Choosing not to transmit the requested file

I've been attempting to retrieve the following:

fetch("https://www.filestackapi.com/api/store/S3?key=MYKEY&filename=teste", {
    body: "@/C:/Users/Acer/Pictures/1 (2).jpg",
    headers: {
        "Content-Type": "image/png",
    },
    method: "POST",
});

Unfortunately, it's not working as expected.

I'm trying to upload a file from an input in my form.

You can try this JavaScript code:

<input accept="image/*" type="file" id="imgInp" />;

var input = document.getElementById("imgInp");

var data = new FormData();
data.append("file", input.files[0]);
data.append("user", "hubot");

fetch("https://www.filestackapi.com/api/store/S3?key=MYKEY", {
    method: "POST",
    headers: {
        "Content-Type": "image/png",
    },
    body: data,
});

PS.: It works in postman! Any thoughts on why it's not working elsewhere?

Answer №1

let fileInput = document.getElementById('imgInp');

let formData = new FormData()
formData.append('file', fileInput.files[0])
formData.append('user', 'hubot')

fetch('https://www.filestackapi.com/api/store/S3?key=MYKEY', {
  method: 'POST',
  body: formData
})

To ensure proper handling, do not include the content-type header in this request. The Content-Type header will be automatically added by the browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ember's structured format featuring objects as rows and column names as properties

I am currently working on developing a modular tabular form that requires an input of two arrays: one containing objects (representing the rows) and another containing property names of those objects (representing the columns). The goal is to be able to mo ...

eliminating items from an array nested inside another array

****************UPDATED********************************************************* I am stuck trying to manipulate an array within another array and remove elements based on conditions. The main goal is to make changes without altering the original array of ...

Having difficulty integrating a Hangout button using APIs on my webpage

I'm having some trouble adding a basic Hangout button component to initiate Google's Hangout. I've been following the steps outlined on the Google Developer page, but despite my efforts, I can't seem to resolve the following issue: Fai ...

What is the best way to pause and wait for the user's click event in testing-library React until the state is updated?

Check out this link for the issue in codesandbox The tests in src/tests/App.test.js on codesandbox fail due to timing issues with state update after a click event (line 21). Uncommenting the function with await on line 21 can resolve this issue. What is t ...

Error: Failed to parse the given color specification

My chrome extension is showing an error message: Unchecked runtime.lastError: The color specification could not be parsed. This error seems to be in the popup.html: 1 -> <! DOCTYPE html> line. Can anyone explain what this means and how to fix ...

Obtaining a value from within an Angular 'then' block

I have a unique issue that I haven't been able to find a solution for on StackOverflow: Within an Angular 6 service, I am trying to call a function from another service using TypeScript. Here is the code snippet: Service1: myArray: Array<IMyInte ...

The function you are trying to access does not exist in this.props

Trying to pass this.state.user to props using the isAuthed function is resulting in an error: this.props.isAuthed is not a function . The main objective is to send this.state.user as props to App.js in order to show or hide the Sign out button based on ...

What is the best way to download a file with a specific name using Angular and TypeScript?

Greetings! Below is a snippet of code from my Angular component: this.messageHistoryService.getMessageHistoriesCSV1(msgHistoryRequest).subscribe( (data) => { console.log(data.messageHistoryBytes); let file = new Blob( [data.messageHistoryBytes ...

What is the best way to fake dependencies in Jest for each individual test?

Check out the complete minimal reproducible example Let's take a look at the app below: src/food.js const Food = { carbs: "rice", veg: "green beans", type: "dinner" }; export default Food; src/food.js import Food from "./food"; functio ...

Modify a JavaScript object in JSON format using another object as reference

Consider two JSON formatted JavaScript objects: obj1 = { prop1: 1, prop2: 2, prop3: 3 } obj2 = { prop1: 1, prop2: 3 } In the context of jQuery or Angular, what is the recommended practice to update obj2 into obj1 while also re ...

The error message for ExpressJS states: "Headers cannot be set after they have already been sent."

Currently, I'm facing a challenge with ExpressJS and am having trouble finding the necessary documentation to resolve it. Technology Stack: body-parser: 1.17.0 express 4.15.0 multer: 1.3.0 MongoDB Postman The current view consists of 3 fields: n ...

Problem with sending variable via AJAX

Hey everyone, I'm attempting to send form data along with an extra variable using AJAX. Here's the code snippet: function tempFunction(obj) { var data = $('form').serializeArray(); data.push( { no: $(obj).at ...

What sets apart the two syntaxes for JavaScript closures?

Similar Query: Is there a distinction between (function() {…}()); and (function() {…})();? I've come across a way to prevent variables from becoming global by using the following syntax: (function ($, undefined) { })(jQuery); Rec ...

Encountering a Node.js error when executing the JavaScript file

When I try to run my Node.js application using the command "node main.js" in the terminal, I encounter an error saying "Error: Cannot find module 'D:\nodeP\main.js'". This is confusing for me as I have set the environment variable path ...

Formatting database values in `where` conditions for strings in TypeORM: A simple guide

I am trying to utilize TypeORM's "exist" method in order to check if a name has already been inserted into the database. My issue is that I cannot determine whether the name was inserted in uppercase or lowercase, leading to potential false validatio ...

Retrieve items from the parent row of selected checkboxes

Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

Leveraging NodeJS to handle server-side tasks and operations

Background: I am exploring the use of NodeJS for a project that involves scraping and storing content in Mongo. This process needs to be automated according to a set schedule. In addition, I need functions that can extract items from the Mongo database, o ...

Leveraging the power of Vue to elevate traditional multi-page/server-rendered web applications

After spending hours searching, I still haven't found anything that fits my specific case. My e-commerce website is classic, multi-page, and server-rendered using JAVA One of the pages displays a list of products with pagination Currently, to enhanc ...

How can I seamlessly combine CoffeeScript and TypeScript files within a single Node.js project?

When working on a server-side node project utilizing the standard package.json structure, what is the best way to incorporate both Coffeescript and Typescript files? It's crucial that we maintain the availability of npm install, npm test, and npm sta ...