Convert an image from file upload to blob to post to database VueJS

Question

I have a form with multiple inputs, one being of type="file". Where I want to be able to upload an image and then post the form to the api so it's stored on the database.

<input name="image" class="w-full border-2 border-gray-200 rounded-3xl px-4 py-4" type="file" placeholder="Event Image" />

However when I enter all the form values (including file uploading and image) I get this error:

"error TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'."

I'm pushing the values into formdata which is then posted to the API

...
 methods: {
      async onSubmit(values) {
         console.log("button submitted")
                  try {
                     var formdata = new FormData();
                     formdata.append("name", values.eventname);
                     formdata.append("description", values.eventdescription);
                     formdata.append("image", values.image, "Image");
...

How can I convert the file type to blob so it can be uploaded? Thank you

Oliver Heward · Accepted Answer · 2022-06-13 14:41:47Z

You need to take the values.image, console.log the response from it so see how the data is structured. There should be a string value in there that you may need to split at . so that you can take the MIME type of the file that you have uploaded as you need this to create the blob.

The structure of a Blob is like so.

new Blob(blobParts, options);

/**
 * blobParts is an array of Blob/BufferSource/String values.
 * options: option object:
 *    type - Blob type, usually MIME-type e.g image/png
 *    endings - whether to transform end-of-line to make the Blob corrospond to current OS newlines.
 */

You should also be able to turn this into a Blob by calling the .blob() function on the file that has been uploaded.

A dummy is as so:

// your file name in the second param should be constructed of the string that you have logged and split earlier.
var fileToUpload = new File([Blob], 'some_file_name.jpg', {
  type: "image/jpg", // this should be from your string split of the filename to check the file upload type.
  lastModified: new Date(),
});

form.append("image", fileToUpload);

Dvalin99 · Accepted Answer · 2022-06-13 14:00:27Z

-1

For the experience that I have gained on the subject, I can tell you that in order to create a FormData, the second parameter must necessarily be converted into a Blob file. Your code is not very clear to me to be honest, but if you want to learn more about the subject, I will give you the section on FormData of the official Javascript guide:

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

answered Jun 13, 2022 at 14:00

Dvalin99

776 bronze badges

Collectives™ on Stack Overflow

Convert an image from file upload to blob to post to database VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related