The Magic Behind File Uploading: A Comprehensive Guide to What Happens When You Upload a File to a Website

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 uploading a file the file is represented by a Javascript `File` object. The File object 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[0] 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 [0]. 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.

<input type="file" id="myFileInput">

<script>
const fileInput = document.getElementById('myFileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log('File name:', file.name);
  console.log('File size:', file.size);
  console.log('File type:', file.type);
  console.log('Last modified date:', file.lastModifiedDate);
});
</script>

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.

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.

The FileList object, which contains the selected files, is an internal data structure of the browser that is not directly accessible from JavaScript. This is because JavaScript is executed within a sandboxed environment within the browser, which restricts access to the internal workings of the browser for security reasons.

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:

const formData = new FormData();
formData.set('file', uploadedFile);

// This formData object can now be posted to an api for storage of the file!

Conclusion

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.