Send Blob file via Axios

Question

I have object like this:

{
    "name": "filename",
    "size": 3523507,
    "type": "image/png",
    "extension": "png",
    "url": "blob:http://localhost:8081/082e9c22-9869-4289-a9c8-e36b0640e61c"
}

And i need upload it to backend. I try it:

const session = axios.create({
  baseURL: debug ? 'http://localhost:8000': '',
  xsrfCookieName: CSRF_COOKIE_NAME,
  xsrfHeaderName: CSRF_HEADER_NAME,
});
let formData = new FormData();
formData.append('file', file, 'file.name');

return session.post(`/chats/files/`,{...formData},), {
  headers: {
    "Content-Type": `multipart/form-data`,
  }
}

But it doesn't work to add Blob to the formData

UPD I get an object with files from the send-message method in the vue-advanced-chat component in this form:

{
    "name": "filename",
    "size": 3523507,
    "type": "image/png",
    "extension": "png",
    "localUrl": "blob:http://localhost:8081/aae047a9-5f9e-481f-b0cc-17febe954c31",
    "blob": {}
}

Then I format it to display in the interface before uploading to the server

UPD2

I converted blob to file

send_file(roomId, messageId, blob_file, isAudio, duration) {
        let formData = new FormData();
        let file = new File([blob_file.blob], blob_file.name);
        formData.append('file[]', file, blob_file.name);
        return session.post(`/chats/files/`,
            {'chat': roomId, 'message': messageId, ...formData},), {
            headers: {
              'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
            },
            timeout: 30000,
        }
    },

and still get: {"file":["No files were sent."]}

According to [this](https://stackoverflow.com/questions/30864573/what-is-a-blob-url-and-why-it-is-used) answer, the blob URL is internal data. can you explain where the object above is coming from? — Yedidya Rashi, Jul 07 '22 at 17:52
Thanks for the information, I updated the question, I also have Blob objects, but still I don’t understand how to add them to formData correctly — Алексей Стародубцев, Jul 08 '22 at 10:01
i think that you are missing this: `formData.append('file[]', file, 'file.name');` file like that want array to be passed correctly — Levi D., Jul 08 '22 at 13:29
Did not help, I try to send a file in base64, blob, file - I get an error — Алексей Стародубцев, Jul 08 '22 at 15:11

score 6 · Accepted Answer · answered Jul 09 '22 at 17:13

After several days of searching, debugging and dozens of attempts, I managed to find a solution.

You need a Blob object, not a URL
You need to convert Blob to File let file = new File([blob_file.blob], fileName);
To correctly identify the file type, you need to add blob_file.extension to the name let fileName = `${blob_file.name}.${blob_file.extension}`;
You need to add all attributes to formData

formData.append('file', file, fileName);
formData.append('chat', roomId);
formData.append('message', messageId);

Specify 'Content-Type': multipart/form-data, and don't specify _boundary - because in new versions of formData it is determined automatically!

headers: {
   'Content-Type': `multipart/form-data`,
},

so the final version of the code looks like this:

send_file(roomId, messageId, blob_file) {
    let formData = new FormData();
    let fileName = `${blob_file.name}.${blob_file.extension}`;
    let file = new File([blob_file.blob], fileName);
    formData.append('file', file, fileName);
    formData.append('chat', roomId);
    formData.append('message', messageId);

    return session.post(`/chats/files/`,
        formData, {
           headers: {
             'Content-Type': `multipart/form-data`,
           },
        })

score 0 · Answer 2 · edited Jul 08 '22 at 13:24

0

You are not sending data in correct way. It should be:

export const uploadFileRequest = ({ file }) => {
   const data = new FormData();
   data.append('file', file, file.name);

   return session.post(`/chats/files/`, data, {
     headers: {
       'Content-Type': `multipart/form-data;boundary=${data._boundary}`,
     },
     timeout: 30000,
   });
};

it should work, for reference https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04

edited Jul 08 '22 at 13:24

Okan Aslan

127
5

answered Jul 07 '22 at 17:43

Mr. Dev

71
7

Tried it many times - doesn't work. I repeat the problem manifests itself in the line formData.append('file', file, file.name); I don't understand how to send a Blob object there correctly. And there are questions to the instructions: where did the timeout come from? Why exactly 30,000? formData._boundary - undefined – Алексей Стародубцев Jul 08 '22 at 09:53

Send Blob file via Axios

2 Answers2