Upload file in json to server

Question

Context

I have a page with questions, this has an structure like the following

sections:[{
    section: 1,
    questions:[{
        question: 1,
        attachment: [FormData Object]
        ...
    },
    {
        question: 2,
        attachment: [FormData Object]
        ...
    }]
}, ...]

Each question have an attachment. What I did was to create a FormData object, upload the file into it and add it to the question object. Example:

let formData = new FormData();
formData.append('file', event.target.files[0])
question.attachment = formData

Everything's fine so far. The problem comes when I try to send it to the server. I doesn't pass the form object to it. This is the code I use to send it:

this.$http.post('my-path', {data: this.sections}, {headers: {'Content-Type': 'multipart/form-data'}, emulateJSON: true})

Using emulateJSON: true sends the data but attachment attribute is not contained in the request.

Using headers: {'Content-Type': 'multipart/form-data'} for some reason send a null request.

Is there a way to do something like that and actually works?

score 3 · Accepted Answer · answered Jun 27 '18 at 12:48

I think the problem resides in serialization of form object.

I suggest you to encode each file in base64 and append it instead of form data object.

Or if you prefer posting form data included in JSON. Read about the correct way of form data serialization.

In my experience encoding files in base64 was the preferred way.

score 0 · Answer 2 · answered Jun 27 '18 at 12:47

0

you must set processdata to false

this.$http.post('my-path', {
    cache: false,
    processData: false,
    data: this.sections,
}, 
{
    headers: {
        'Content-Type': 'multipart/form-data'
    }, 
    emulateJSON: true
};)

answered Jun 27 '18 at 12:47

Malkhazi Dartsmelidze

4,783
4
16
40

score 0 · Answer 3 · answered Jun 27 '18 at 13:05

as @eWizard said. And he can use How to convert file to base64 in JavaScript??

I faced the problem with it but i solved it using async and await.

then in server he can convert it to file again.

and change the function to be like that:

   getBase64: function(file){
        var reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onerror = () => {
                reader.abort();
                reject(new DOMException("Problem parsing input file."));
            };
            reader.onload = () => {
                resolve(reader.result);
            };
            reader.readAsDataURL(file);
        });
    }

and use it as the following

  var fileReaderPromise = await this.getBase64(image);

Upload file in json to server

3 Answers3