Nowadays it is very common to upload a file to a website, for instance, to complete our user profile with a photograph. Developers always knew how to do that in a classical way: by reloading the page when we push the “Send” button. But since mobile phones are part of our lives, some techniques were necessarily modified in order to facilitate the user experience on websites and to optimize the time of navigation.
In this blog post, we’re going to learn to upload files to a server without reloading the page, by using the native Javascript object called “formData” in a very, very easy way.
Achieve More with Less
In a web project, it is very important to minimize, provided that it is possible, the number of requests to external code or libraries that take on part of the work, mainly because of the time those resources consume in the process of loading a page. All of us have spent too much time waiting for the website to finish loading. And that is not the funniest thing. That’s the reason why to know a technique like the one I describe in this blog post is useful for any developer. To have a compact and efficient code is just a decision.
“The best code is the best documentation” (Steve McConnell)
Uploading Files Easily and without Requiring Unnecessary External Code
The FormData object allows us to send key/value pairs to the server, using XMLHttpRequest. The data we send in this object is transmitted in the same way the submit() does, that is to say, this is equivalent to using “enctype=’multipart/form-data’” in the form property.
NOTE: FormData object is available in all modern browsers. In Internet Explorer, it is available from version 10 onwards.
We can use this object in two different ways. The first one consists of passing the id form to the object constructor:
var myForm = document.getElementById(‘my_form_id’);
var formData = new FormData(myForm);
And then, simply we pass the object (with all the form data inside, not only with the file inputs) on the send() call:
var req = new XMLHttpRequest();
req.open(‘POST’, ‘url/to/upload/file’, true);
req.send(formData);
A Better Solution
The process I’ve just explained, while technically correct, is not ideal because we need -in many cases- to upload the file independently of the rest of the form (for instance, to validate the size or the format of the file before sending the complete form data).
To do that in a better way, formData object gives us the method append(). This method allows us to do what was mentioned above: using key/value pair to set data that will be sent.
var fileInput = document.getElementById(‘the-file’);
var file = fileInput.files[0];
var formData = new FormData();
formData.append(‘file’, file);
Now, formData can send the file using XMLHttpRequest.send() as in the previous example.
Now, it is Your Turn
As we have seen, better ways don’t necessarily involve harder work or a more complicated code. Generally, we are not familiar with the tools that can facilitate our work. This blog post is just an example of this. Surely, you know many other techniques that make your everyday job easier. But if that is not your case, I encourage you to learn and then share your new knowledge.
Do not forget to leave your comments and opinion in the section below. If you have any questions, do not hesitate to contact me at mailto:leonardo.saucedo@intraway.com
