As a user of the internet it is very common these days to upload files (images, documents etc) via websites. But have you ever thought or wondered what it happening under the hood? In this post we are going to explore in detail the specific steps that happen when uploading a file to a web site.
In order to upload any file to a website, you need to do it via an input field. These can come in all different shapes and sizes thanks to the amazing powers of CSS. When you use an input field to upload a file, the file is temporarily stored in the browser's memory until it is submitted to the server. When the form is submitted, the file is transferred to the server, and the server can then decide where to store the file, whether that be in a local file system, a cloud storage service, or some other location.
When the form is submitted, the file is transferred to the server, and the server can then decide where to store the file, whether that be in a local file system, a cloud storage service, or some other location.
provides information about the file, such as its name, size, type, and last modified date, and it also provides methods for reading the file's contents.
In the below code snippet example, we add an event listener to the file input field that listens for the change event, which is triggered when the user selects a file. In the event listener function, we access the File object using the event.target.files syntax, which returns an array of files selected by the user. Since we only selected one file, we access the first element of the array using . We can then log some properties of the File object to the console, including the file name, size, type, and last modified date.
Note: The File object is only available in modern browsers that support the HTML5 File API.
Where is the file temporarily stored?
When a file is uploaded via a website, it is temporarily stored in the browser's memory in a FileList object
until the user submits the form or triggers a submit event. The FileList object is an array-like object that contains one or more File objects representing the files selected by the user.
If the user does leave the page or reload it, the FileList object is discarded and the file has to be uploaded again.
The FileList object is stored in the browser's memory as long as the user does not leave the page or reload it. If the user does leave the page or reload it, the FileList object is discarded and the file has to be uploaded again. This FileList object is also used for a list of files dropped into web content when using the drag and drop API!
It's important to note that the size of the FileList object is limited by the browser and can vary depending on the browser and the device. If the user selects too many files or files that are too large, the browser may reject the upload or the website may become unresponsive.
How do we upload this file to the server for permanent storage
So it is not possible to get the path to the browser's memory where the file is stored when it is temporarily uploaded to a website.
So how do we get a 'hold' of this file in order to send it to the server?
The answer is to use the FormData API
. The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch() or XMLHttpRequest.send() method. Perfect! So we can use the `.append()` or `set()` method to a set a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist. Then this FormData object can be posted to whichever service to handle storing the image.
The actual code would look something like this:
Like anything in Web Development, when you don't know how something works it seems so mysterious. However, once you start probing a little deeper and breaking down the mystery you find out it's a sequence of logical steps that fit together nicely. Here we discovered that there are a bunch of APIs designed to help with the exact use case of uploading files from the browser.