File uploads using form data api

i am uploading files to server with javascript xmlhttprequest but i am confuse some tutorial read file with file reader and some use formData api what is the difference between two, is formData api also read the file in background and it is important to read file before upload to server ?

1 Like

Welcome back, @Junaid_Arshad

The “formData API” is a way to programmatically do what a “normal” form submit will do (including sending a file via <input type="file">). A formData object gets automatically created when you use a <form>.

Example:
If your users should select some photos from their PC to save them on the server, you probably want to use a form with a file input. When you want to change some data before sending (e. g. add additional details), you would use the formData Object that was created by the form and change/enhance it before sending.


On the other hand the “FileReader API” is generally used to work with files on the client-side. It’s also possible to send the loaded file to a server.

Example:
If your users should select a local image as an avatar and you want to give them the possibility to first crop the image, adjust the brightness and so on, you would probably use the FileReader API to manipulate the image and then send it to the server.

I hope that makes it a bit clearer. :slightly_smiling_face:

Cheers,
Michael

2 Likes

thanks a lot now it is clear.

1 Like