Blog / Development / Web development

How Web Apps work with Local Files Through the Browser

  • Rating — 4.7 (95 voices)
  • by Tony
  • Updated on August 20, 2019
  • Read —
    7-8 minutes
Drag and Drop Files to browser

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:
HTML5 file browser web app

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 and XLSX 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

drag-drop-upload
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

proofreading in publishing businessIf you’re in publishing business you may love a web app with a preview feature that will allow your writers to review and apply some styles in the text editor BEFORE actually uploading it to CMS system.

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

file manager win 95 style

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.

Need to make things right?

Tony Sol is the business development manager of GBKSOFT, overseeing the production of all writings for both internal blog and external platforms. He is technical-driven person always looking for new benefits of merging business and software.


Comments (4)

Leave a comment
Close

Leave a Reply


Omar K. Harris
Sep 21, 2019 at 9:13 AM

local files browsers are indeed helpful, through this blog they have explained that how the apps work through the local files, this information is going to be useful and I really appreciate the solution to the issue.

reply
son
Jun 08, 2019 at 7:13 AM

There are a few internal methods that are really working with the local files through the browser. If you read the article you will get all those methods that are responsible behind the browser works, so keep reading the article and get the details in it.

reply
nickrobin
Feb 21, 2019 at 5:28 AM

you can solve such kind of problems on the go by applying file management to your web app. File API allows users to preview the files before uploading them to the server. This way users can change column order to the required one in advance.

reply
Alex
Aug 16, 2018 at 7:49 PM

This is really a great information which is mentioned in this article, and the information which is mentioned in this article is really great keep updating this kind of information.

reply

Related services

Similar Blog Articles

code review principles

Development

Why does your Startup Tech-team Need a Code Review?

Not sure about the quality of code you’ve got from your freelance developer? Or it was for a while since you upgraded your app and you want another development team to make the work for you? Well, in any case, you’ll need to look under the hood or make a Code Review as it called...

Rating — 5 (4 voices)
Website redesign

Development

,

UI and Design

Website Redesign ROI: Tips and Success Stories

Redesigning a website takes a lot of time and money, so it’s usually very tempting just to avoid this topic and leave everything as it is. However, doing nothing is not the best business strategy you can implement in this case. Because the results you will receive from a quality redesign performed by professionals may...

Rating — 5 (8 voices)
PHP development

Business

How Much Does PHP Development Cost?

What do such websites like Facebook, Yahoo, Wikipedia, and MailChimp have in common? Of course, all of them are really popular and I bet most of us use at least one of these sites quite often. But there is also one more thing — they all are built with PHP programming language. Actually, not only...

Rating — 4.8 (162 voices)

Categories

All articles Business Company News Development Marketing StartUp App Ideas UI and Design

People are talking about

You've got
a project in mind

What's next?

Send us a message with a brief description of your project.
Our expert team will review it and get back to you within one business day with free consultation and to discuss the next steps.

Testimonials

Devan
They write clean code, adhere to deadlines, and communicate extremely well. I strongly recommend anyone from the GBKSOFT agency and hope to work with them again myself. Clean Code
Tao
GBKSOFT did a good job to manage the project. They put in a good effort to communicate with us and make it easier for us to communicate with developers. Good Job
Andy
I think they do great work. I haven’t yet given them something that they were unable to do. Great
13
App Futura Top App Development CompaniesGood FirmsClutchAwwwards