Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does HTML5 allow you to interact with local client files from within a browser

I've seen some posts regarding access to files on a client machine by a webpage, namely this question.

I'm trying to hop on the "continuously update in the cloud" paradigm for some algorithms I am writing so my users can access the latest versions by simply accessing the webpage. This requires that the program/webpage can start with a directory and recursively inspect files within it and compute results based on what is found. In the end it also should be able to write the results file to the client's filesystem.

One of the answers in that previous question mentions Google Gears but that has since been discontinued in favor of HTML5. Is access to a client directory possible within HTML5? How?

I know why access by any webpage to local files is a security risk, but for my purpose I have no problem to ask the user for the appropriate permissions.

like image 512
greye Avatar asked Mar 04 '10 03:03

greye


People also ask

Can a browser access local files?

Web browsers (and JavaScript) can only access local files with user permission. To standardize the file access from the browser, the W3C published the HTML5 File API in 2014. It defines how to access and upload local files with file objects in web applications.

Can JavaScript access local files?

JavaScript cannot typically access local files in new browsers, but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.

How do I open a local file in HTML?

HTML can be used to open a folder from our local storage. In order to open a folder from our local storage, use 'HREF' attribute of HTML. In the HREF attribute, we specify the path of our folder.

How do I access local files?

Using Google Chrome to access local files is as easy as pressing Ctrl + O at the same time. This interface will open, allowing you to navigate to whichever file or folder is needed.


2 Answers

No, not directly at least. However, you have a number of choices here.

Currently your best choices are:

  • Drag and drop files from desktop, see a tutorial. (Link disabled for malware/phishing)
  • Use input type file.
    • Read the contents with the File API or submit the form. Read more on Mozilla Developer Center about reading the file dynamically.
    • You can specify multiple attribute to read and open multiple files at once without having to have separate fields.
    • You can have an invisible input and "trigger a click" on it to open the file open dialog. See the previous Mozilla Developer Center link for details.
  • Use the FileSystem API which allows you to create, delete, read, modify files on the file system. Note: you get a sandboxed directory to work with, you can't access the whole system just like that.
  • Use Java with signed applets to access the whole file system. This requires the user to accept the signature.
like image 96
Tower Avatar answered Oct 05 '22 23:10

Tower


Chrome 6 also will support the File API

like image 39
Vanuan Avatar answered Oct 05 '22 22:10

Vanuan