Send image via formData and fetch

Question

I want to make a post request with form data to send an image like this via fetch API:

function uploadImage(image) {
      var data = new FormData();
      data.append("upload", image);
      fetch('/accounts/upload-image', {
          method: 'post',
          body: data,
      })
      .then(response => response.json())
      .then(result => console.log(result))
      .catch(error => console.log(error));
}

But it seems that I missed something? I can not get the data in my server!

Using Postman with no errors it's working So there is something wrong with my fetch function in front end.

The binary data (image) I send to uploadImage(image) function is like this:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAA

It looks like on the server you accept file upload but you send data as POST variable using data URI. Check this answer [How do I upload a file with the JS fetch API?](https://stackoverflow.com/a/40826943/387194) don't look at the accepted answer, it's totally wrong and incomplete. — jcubic, Aug 19 '21 at 18:15
See https://stackoverflow.com/questions/6850276/how-to-convert-dataurl-to-file-object-in-javascript for how to convert the `data:` URI to a `Blob` so you can upload it. — Barmar, Aug 19 '21 at 18:17
If you don't have a file and you want to send Canvas Data URI to server as file upload see [How to convert dataURL to file object in javascript?](https://stackoverflow.com/a/7261048/387194) — jcubic, Aug 19 '21 at 18:17
Does this answer your question? [Node/Express file upload](https://stackoverflow.com/questions/23691194/node-express-file-upload) — Heartbit, Aug 19 '21 at 19:27

Send image via formData and fetch

0 Answers0