Handling Files on the Web: A Deep Dive

In this article, we will take a deep dive into file handling in JavaScript; starting by exploring how files work, how to access them, how to upload them to a server, and some third-party services you can use while managing files for your applications. Let's dive in and discover the world of file handling in JavaScript on the web! How Do Files Work in the Browser? Before understanding how files are represented on the web, we must understand the in JavaScript. Blob Blob According to , a Blob object represents a file-like object of immutable raw data that can be read as text or binary data and converted into a , which further allows its methods to process the data as needed. MDN Web Docs ReadableStream A simple example of a blob would be creating it via the constructor: Blob const array = [' hello ',' world ']; const blob = new Blob(array, { type: "text/html" }); Here, the constructor accepts an object such as an , strings, etc., or a mix of any of such elements as the first argument and returns a blob whose content is the concatenation of the values in the array. Blob iterable Array ArrayBuffer The second argument is an options object with an optional type property for specifying the of the blob. MIME type If you try running the above snippet in your browser console and then try logging the output of the variable, you'll see an output like this: blob > blob Blob {size: 36, type: 'text/html'} You can also do to get the blob size in bytes, which will be 36 in the above case. blob.size Blob also has some instance methods, which allow us to read the data from the Blob or create a new Blob with the subset of the data of the original Blob. For instance, the method returns a that resolves with a string containing the contents of the blob interpreted as UTF-8. text Promise blob.text().then(data => { console.log(data); // hello world }); File The enables JavaScript on a webpage to provide information about files and access their content. The File object is a specific type of Blob, meaning it inherits all the properties and methods of Blob. File interface Like the constructor, the constructor also accepts iterable objects , , etc., and other Blobs as its first argument. The second argument is the file's name or the path to the file. Blob File Array ArrayBuffer const array = [' hello ',' world ']; const file = new File(array, "index.html", { type: "text/html" }); In the options object, the constructor also accepts a property called , which, as the name suggests, is a read-only property that stores the last modified date of the file and defaults to . File lastModifiedAt Date.now() Now similar to Blob, you can perform all the actions for reading the file's content. You can also download the file by creating an object URL for the file via the method, which creates a string containing a URL representing a File, Blob, or MediaSource object. URL.createObjectURL So we can download the above file with the following snippet: const array = [' hello ',' world ']; const file = new File(array, "index.html", { type: "text/html" });

// Create a download URL for the File object const downloadUrl = URL.createObjectURL(file); // Create an anchor element for the download link var downloadLink = document.createElement('a'); // Set the download link's href attribute to the download URL downloadLink.href = downloadUrl; // Set the download link's download attribute to the filename of the File object downloadLink.download = file.name; // Programmatically click the download link to initiate the file download downloadLink.click(); // Revoke (cleanup) the download URL to free up memory URL.revokeObjectURL(downloadUrl); You can try running the above script in the browser console, and you'll see a file called with the content getting downloaded. index.html hello world Accessing Files On the Web Now that we understand how the File interface works, let's look into how you can access files in your web applications. Using the , you can ask the user to select local files and then read the content of those files, usually using the element. The file input in JavaScript returns a via the property. This object lets you access the files selected by the user. File API FileList files To understand how this API works, let's look at a quick example inspired by the , where we ask for image input from the user and display them with their sizes in KB. MDN docs File handling demo

No files selected!

const fileElem = document.getElementById("fileElem"); const fileList = document.getElementById("fileList");

fileElem.addEventListener( "change", () => { if (!fileElem.files.length) { fileList.innerHTML = " No files selected!

"; } else { fileList.innerHTML = ""; const list = document.createElement("ul"); fileList.appendChild(list); for (let i = 0; i < fileElem.files.length; i++) { const li = document.createElement("li"); list.appendChild(li);

document.getElementById('uploadForm').addEventListener('submit', (event) => { event.preventDefault(); const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (!file) { alert('Please select a file to upload'); return; }

const progressBar = document.getElementById('progressBar'); progressBar.value = 0; // Reset progress bar const statusContainer = document.getElementById('status'); statusContainer.textContent = ''; // Clear status container

Upload an image upload

const uploadButton = document.getElementById("upload"); const client = filestack.init("ADD_YOUR_API_KEY"); uploadButton.addEventListener("click", (event) => { const options = { accept: ["image/*"], onFileUploadFinished: () => { alert("Image uploaded Successfully!"); } };

client.picker(options).open(); }); Check out the . You will need to create your own for the demo to upload the file. demo on CodeSandbox Filestack API key This is all the code required to create a simple uploader that accepts images and uploads the image to . Filestack's CDN When the user clicks on the upload button, Filestack presents them with an interactive widget that allows the user the ability to upload from multiple sources and also allows them to crop or rotate before uploading. Filestack also provides you with a that let you customize almost every aspect of the File Picker, including the ability to customize file sources, set the minimum and maximum number of files that can be uploaded, set the required dimensions of the image to be uploaded, etc. wide variety of options Conclusion In conclusion, this article has provided an in-depth exploration of file handling in JavaScript on the web. We delved into the intricacies of working with files, starting with the Blob object and understanding how to accept files from users through file input. We also looked at a basic example of uploading files to a server and displaying the progress as the file gets uploaded to the user. Additionally, we discussed the limitations of creating a file management system from scratch and saw why you should probably consider using a cloud-based storage solution like Filestack to streamline file handling in your applications.