Streamlining File Handling in JavaScript

JavaScript is a popular programming language that is used to develop applications for web, mobile, and desktop environments. One important aspect of application development is file handling, which involves reading, writing, and manipulating files. In this article, I would introduce you to file handling with JavaScript and discuss how popular libraries like Filestack can be used to simplify this process.

What is file handling?

File handling refers to the process of working with files in a computer system. This can involve tasks such as reading data from a file, writing data to a file, creating and deleting files, and modifying file properties. File handling is an essential part of many applications, including web applications, mobile applications, and desktop applications.

JavaScript provides several built-in functions and libraries that allow developers to work with files. However, working with files can be complex, and it can be challenging to ensure that file operations are performed correctly and efficiently. This is where libraries like Filestack come in.

File handling with JavaScript

JavaScript provides several built-in functions and libraries for working with files. In this section, we will introduce you to two of the basic file-handling operations that can be performed with JavaScript.

1. Reading files

JavaScript provides a FileReader object that can be used to read the contents of a file. The FileReader object provides several methods for reading files, including readAsArrayBuffer(), readAsBinaryString(), readAsDataURL(), and readAsText().

The readAsText() method is the most commonly used method for reading files in JavaScript. This method reads the contents of a file as text and returns the contents as a string. Here is an example of how to use the readAsText() method to read a file:

// Create a new FileReader object
const reader = new FileReader();

// Set the onload event handler
reader.onload = function(event) {
    // Get the contents of the file as a string
    const contents = event.target.result;
    console.log(contents);
};

// Read the contents of the file
reader.readAsText(file);

In this example, a new FileReader object is created. The onload event handler, which is called when the file has been successfully read is then set. Inside the onload event handler, the target.result property is then used to get the contents of the file as a string.

Writing files

JavaScript does not provide a built-in way to write files to a user's local file system. This is because of security restrictions in web browsers, which prevent web pages from accessing files on a user's local file system. However, there are ways to work around this limitation, such as using Blob and URL.createObjectURL.

From the above, it can be seen that handling the reading and writing of files with JavaScript can be a bit cumbersome and hacky. Even if one manages to build a file upload system with vanilla JavaScript, it might be large in file size, and this might impact the speed of the web or mobile applications. There are a couple of libraries that can be used to make file handling easier. One such library is Filestack.

What is Filestack?

Filestack is a cloud-based file-handling service that provides developers with a set of tools for working with files. With Filestack, developers can easily integrate file-handling capabilities into their applications without needing to build file-handling functionality from scratch.

Filestack provides a range of features, including file uploading, file conversion, and file storage. It supports a variety of file types, including images, videos, and documents, and provides APIs for integrating with popular programming languages like JavaScript, Python, and PHP.

Getting Started with Filestack

The first step to working with Filestack is to sign up for a free account on their website. Once you have signed up, you will get an API key that can be used to access Filestack's services. Filestack provides a JavaScript library that can be added to your project to enable file handling.

<script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>

Uploading Files with Filestack

Uploading files with Filestack is straightforward. You start by creating a Filestack client instance using your API key, as shown below:

const client = filestack.init('YOUR_API_KEY');

Once you have the client instance, you can use the picker() method to open a file picker dialog that allows the user to select files to upload:

const options = {
  maxFiles: 20,
  uploadInBackground: false,
  onOpen: () => console.log("opened!"),
  onFileSelected: (file) => console.log(file),
  onUploadDone: (res) => console.log(res),
};

client.picker(options).open();

The open() method opens the file picker dialog, and the user can select one or more files to upload. The file picker dialog provides a beautiful interface that the user can use to select the files to be uploaded.

The file picker dialog can be customized by passing it a Javascript object that contains the options that you want. A list of the customizable options can be found on the Filestack website.

Once the user has selected the files and uploaded them, you can handle the files using the onUploadDone function in the options passed in. In the example above, we are logging the uploaded files to the console. The response object contains information about the uploaded files, including their URLs, sizes, and MIME types.

Previewing Files with Filestack

Previewing files with Filestack is just as easy as uploading them. You can use the preview() method to retrieve a file by its URL. The first argument to the method is the URL and the second argument is an options object with the id of the DOM element to embed the preview into.

client.preview('7m1aL2WEQg2Dkh1Cxgpi', { id: 'content' });

You can also show the image to the user by using the native HTML image element.

<img src="https://cdn.filestackcontent.com/giYVGX3kR1ea5bQoFVdV" alt="sample-image" />

Manipulating Files with Filestack

Filestack provides several features for manipulating files, including cropping, resizing, and converting. With Filestack you can transform your files in real time by appending parameters to the URLs.

<img src="https://cdn.filestackcontent.com/resize=width:300/sepia=tone:80/polaroid/giYVGX3kR1ea5bQoFVdV" alt="sample-image" />

You can also give your users the ability to select files from the file system using standard input and then transform them before uploading. This can be done using the Transformation UI.  This provides them with a beautiful UI and great experience in manipulating their files.

Filestack provides a JavaScript library that you can add to your project to enable file transformations:

<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

 In our application, we have to prepare a container to display the result of the image transformations:

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

<div style="text-align: center">
  <img id="result" style="width: 600px" />
</div>

Then we initialize Transformations UI with our API key and listen for the change event on our file input to display the Transformations UI:

const tr = new FilestackTransform("your api key");

document.querySelector("#file").addEventListener("change", (res) => {
  tr.open(res.target.files[0]).then((res) => {
    document.getElementById("result").src = res;
  });
});

With the Transformations UI, users can crop, zoom, and add filters, texts, and overlays to the uploaded image. The below image is an example of the Transformations UI:

Conclusion

File handling is an important part of programming, especially when it comes to building web applications that require file management. Filestack provides an easy and convenient way to manage and process files on the web.

With Filestack's JavaScript library, you can upload, download, and manipulate files with ease. Filestack's cloud-based service ensures that your files are always available, secure, and scalable.