3

I can send a file to the server using axios and the FormData api, like that : 

    persist(avatar){
        let data = new FormData();
        data.append('avatar', avatar);
        axios.post(`/api/users/${this.user.name}/avatar`, data)
            .then(() => flash('Avatar uploaded!'));
    }

The avatar param, passed to persist(), is a file object from a form input of type "file".

I can then grab the file on the server side.

Is it possible to do it without using FormData ? That is, to simulate the FormData work ? Basically, I'm trying to understand the extra work done by the FormData api. Maybe it's not possible using axios, and I should do that with plain XMLHttpRequest.

Of course, simply sending the file object won't work : 

axios.post(`/api/users/${this.user.name}/avatar`, {avatar: avatar})

On the server side, the avatar object will be empty. I can send metadata like avatar.name, but not the whole object.

trogne
  • 3,402
  • 3
  • 33
  • 50

1 Answers1

2

Yes, it is possible to do the encoding manually on the client. Writing a form data encoder yourself may be useful if you really want to learn every little detail about how forms work. However, for most applications, I would not recommend it. The FormData API should be used in production.

You will need to refer to RFC 7578 for how to implement the encoder.

This specification defines the multipart/form-data media type, which can be used by a wide variety of applications and transported by a wide variety of protocols as a way of returning a set of values as the result of a user filling out a form.

More resources:

Community
  • 1
  • 1
Seth Holladay
  • 8,951
  • 3
  • 34
  • 43
  • I have a big nested json payload I post, and inside them one is file. It means I need to write create the form data object manually for each field? – Arup Rakshit Jun 12 '19 at 02:28
  • No, you would most likely want just one `FormData` instance. You then need to decide which fields to put inside of that object using the `formData.append()` method. I would suggest having one field for the file and a second field for the JSON, which I assume is the file's metadata. – Seth Holladay Sep 13 '19 at 22:51