Table of Contents
Few will argue that working with files through a browser window is one of the must-have things for any modern office web app. At times when many of us prefer work remotely the ability to work through the web becomes vital for any business entity. Some of them have already decentralized their corporate structure but require to preserve strong digital ties in-between their institutions.
Interestingly, 90% of all business processes that are handled through the web starts from such basic function like file management. Whether you upload a tax report, open a pdf-file, attach an order lists or paste an image into your blog – all these actions are handled by the file system.
How to Access Local Files from the Browser App
Because of undeniable security reasons, it is forbidden for the browser to work with the file system and touch any of data without permission. Definitely, no one wants a hacker to get into his computer through the most exposed and easily accessible part of the system – internet browser.
That is why every time you want to download/upload a file, the system shows you a window like this:
Web browser can’t access OS’s file system without direct user permission. Consequently, web apps that use browser-side JavaScript don’t have permission to write to the client SSD without a lot of security options having to be disabled.
Fortunately, there are several ways to simplify file access process without annoying users with constant “Browse” buttons and windows.
The simple one is to add JS event handler “drop” to some DOM element on your web page and a JavaScript sample for the download file. The files acquired by using JavaScript can be later processed on the client side. For example, you can use XLS libraries to parse xls and xlsx spreadsheets in your browser.
Use JavaScript Blob object function if you have a binary data like images, videos, or audio files.
Surely this short, techie answer to the question of how to get file content in JavaScript. There is also another modern method, that may be more suitable for your needs.
Drag and drop Function in Web Apps by HTML5 File API
Back in 2014, the W3C published the improved HTML5. In addition to the new markup, HTML5 contained some best scripting APIs that can be used with JavaScript and connected to existing DOM interfaces.
Shortly speaking, there is one such API called File, that made specifically for handle file uploads and file manipulations (read file JavaScript). File API is not an inherent part of HTML5 but it can be added to the HTML5 DOM and allows users to select, read, and modify a local file with minimum effort.
Best Functions of File API:
- Drag and drop files with no “Browse” button
- Multiple file selection, which is a great UX enhancement.
- Show thumbnails of user-selected images instead of standard file icons.
- Display all files info to the browser: size, date, id, name, type, etc.
- Asynchronously handling the file upload process, that improves performance of web app.
- Create upload tasks feature is very handy if you need to download multiple images into your blog CMS at once.
Develop Real-Life Applications of File System API
Working with Files Offline
Back old days if you wanted, say… save a file on user’s hard drive, the system had to make JavaScript generate a file to download it. Meaning, you have to send file to the server -> render it on that side -> send it back to user as an attachment (Content-disposition: attachment). Obviously, such scenario isn’t acceptable if you want your web app to work with files offline.
Fortunately, with the help of the File and Directory Entries API, your web app can navigate local storage system and store content on a client side, without constantly being online. Technically, this API simulates a virtual file system where your web app can navigate and display it to the users as if it was a real storage. But, at the end who cares? Your app works with data well, stores it in the cache, and process large chunks on a client side. And all this is performed offline!
File and Directory Entries API Use Cases:
- Audio/Photo Editing – The app can download files for later use or edit them from the cache by using their own computing capabilities instead of doing it on the server side.
- Working with massive files – Clients can choose to work with a specific chunk of data without downloading a whole file.
- Offline email client – Lets users store (cache) attachments locally and upload them on demand.
- Error-proof uploader – In case of browser error or unexpected computer shutdown, your app will resume file download from the place where it was interrupted.
Working with Spreadsheets
Let’s take CSV-files for a start. Those files are just Comma Separated Values: bla1, bla2, bla3. Say you’re working with price list in CSV with three columns inside: item name, amount, price. Unfortunately, one of your manufacturer’s sends you price list file with an exact same type of data, but with the wrongly ordered column in it: amount, price, name. Obviously, you will have problems merging this CSV-files because of the difference in column order.
Fortunately, you can solve such kind of problems on the go by applying file management to your web app. File API allows users preview CSV-files (or file of any other format) before uploading them to the server. This way users can change column order to the required one in advance.
Slicing
If you have a media portal with a huge amount of user-generated content or you have very specific requirements to the data users can upload, then slicing might save you a lot of disc space.
Just give your employees strict instructions and slicing tool the would allow them to cut their files (e.g. passport photos) right in the browser. This way you’ll save a lot of disc space and, what’s more important, you’ll save a lot of time ordering raw data users provide.
By the way, consider integrating this feature if you’re working with big data and data mining techs.
Proofreading
The same functionality is applicable to any other industry where small human errors occur frequently. There is a golden rule for that: the more routine tasks your employees perform, the more important it is to give them an opportunity to double-check their results.
Web App Performance Improvement
Be using File and Directory Entries API we can also greatly improve the performance of your web app. Firstly, it will reduce the latencies by eliminating unnecessary client-server data transfers and request. Simply all the work will be done on the client side and sent to the server only once in awhile.
Secondly, we can let your web app prefetch data in the background process and cache it locally. Or, let users work with a portion of data, while silently loading an additional file segment on the background.
Onboarding Old-School Clients
Some businesses are hard on staying in touch with tech. Moreover, if you’re working with governmental institutions, you simply can’t force them to change the way they do things. Sadly, some people are even harder on adopting new skills than big institutions they are working in. That is where you’ll need to adapt your app to client’s habits.
One of such old-school habits is working with the traditional Windows file management system. This sandbox UI is still widely popular among office workers, secretaries, and top-grade corporate specialists. Which is why making your web app familiar to them may be your goal #1. Indeed, how you’d expect clients to work with your web tool if they’ll spend 10 minutes just downloading and locating their files in the system.
With a little effort, we can give your super-modern web app a slightly different look, which can greatly facilitate the transition period for your clients.
Bottom Line
If you’re going into the development of office web app, keep in mind those three API names File API, File and Directory Entries API, and File Write (allows writing to files from web applications). Those APIs may seem unremarkable in comparison with future-tech algorithms but trust me – making essentials right puts your app halfway to success.