TypeScript Storing Files

Unlike my previous articles, this one will be covering a new style of articles, what I’d like to call a ‘hack-it article‘ and in this article I’ll be going over how you can persist a JavaScript file object to some HTML5 storage. Whether you use local storage or session storage, that’s up to you, the logic used is practically the same.

So, let’s begin, in order to understand entirely what’s going on here, you need to have a relatively basic understanding of modern day JavaScript, including RxJS, promises, arrow functions, TypeScript & all the other good stuff. So, let’s begin by going over why I initially created this script, it was actually work related, I wanted to mimic an existing application that uses JSF & I wanted to see how challenging it was to convert it to Angular. As it turns out, if you’re familiar with JavaScript & Primefaces, it’s incredibly easy, a breeze even. One of the features in this app includes a lot of stateful scenarios, one of those being uploading files to be stored in the session object, so, to replicate this, I tried to store the files into the session storage object.

The solution is simple, very simple, so, without further ado, let’s see some code, to keep things simple, I initially created a class called FileStore, all this class really needed in my opinion was two methods, one to simply store the files, another to simply retrieve the files, that’s it. I decided, since I was using Angular, what an appropriate time to take advantage of RxJS. So, to give you the solution, here you go;

To walk you through the code, it’s quite simple really, in order to store the file object(s) to HTML5 storage, all that’s really going on consists of converting these file objects to the custom POJO called BasicFileInformation. But in order to do this, we must take advantage of the FileReader API, by making use of the FileReader, we’re able to read the contents of the file as a data URL. But the only form of challenge here is that in order to do this, the FileReader’s method to do this is asynchronous, hence why I thought it suitable to take advantage of the observable that RxJS so kindly provides us. Once all of the files have been processed, the idea is to have your state management code elsewhere, there you can subscribe to this sotreFiles method & carry on like so. As I was using Angular, I wanted a nice way to load the files from HTML5 storage, hence the creation of the loadFiles method.

In the loadFiles method, again, very simple stuff, all that we’re doing here is essentially loading the file data by using the fetch API. Due to the fact that this is essentially an ajax request, that’s right, more asynchronous code, so, to keep things nice & consistent, I decided to return another observable object.

Conclusion

This may not be the best solution to persist files to HTML5 storage, however, it’s very simple, very lightweight & it’s incredibly easy to use. If you’re familiar with Angular, you should be able to make use/sense of this code without even having to think about it. In my personal opinion, it’s so simple that even without a great deal of knowledge about the current JavaScript ecosystem, a competent developer should be able to make sense of it to some extent or another.