Uploading files with Vue.js and Filepond

Question

I am developing an application that uploads files using the 'Filepond' library, which is a file manager. When selecting the file that will be uploaded, the library returns the file blob, which is what is being used to upload via a REST API.

formData.append('image', this.vetorArquivos[i].file)

where this.vector Files[i]. file is the blob that is going to the API. The big problem is that working in this way, the 'filename' of this file becomes 'blob', and the necessary is to go with the file name.

This blob has the following attributes:

Blob {
    lastModifiedDate: Fri Nov 08 2019 22:35:08 GMT-0300 (Horário Padrão de 
    Brasília) 
    name: "Clean_Code.pdf"
    size: 4261722
    type: "application/pdf"
}

Answer 1

The formData.append takes 3 arguments. The name to pass to form, the value (in this case the file) and finally the file name when it is a Blob.

Now you can know the file name via .name your code could be like this:

const arquivo = this.vetorArquivos[i].file;
formData.append('image', arquivo, arquivo.name)