CODEWITHSUNDEEP
javascripthtmlbrowser
Shyam Dixit
Shyam Dixit

Reputation: 2483

How to store file in a browser using JavaScript

I am working for a prototype of website(Only Browser based). There is a part where I need to upload some files.Here I am using JavaScript and HTML.

Whenever user wants to upload(Like Browse button in applications) some files then it will available for next time.I am unable to do this.

Question Can we save/store/upload a file using JavaScript/HTML in browser only(Not server )??

Thanks

Upvotes: 9

Views: 11185

Answers (3)

user1693593
user1693593

Reputation:

Downloading file directly to user's file-system

If you by save/store mean directly to user's computer/file system then no, this is not possible due to security reasons.

However, you can initiate a download which will pop up a "save as" type of requester and allow user to accept or deny to download the file.

There are more than one way to initiate a download. An interesting one is the new download attribute for the anchor tag where you can specify a file name as well as automatically initiate the download setting its href to a data-uri or something else you want to reference for download:

<a href="urlToFile" download="myFile.ext">Click to download</a>

Local storage mechanisms

If you simply want to save the file locally you can use one of the many local storage mechanisms such as:

Note that all of these as sand-boxed and only available in the browser using the same origin as they was written from. The data may or may not be discarded at any point as well (by user or by browser) so they are not a "safe" storage (always keep a server copy or a way to regenerate the data).

Upvotes: 8

Pavlo
Pavlo

Reputation: 44965

Yes, it's possible via FileSystem API (currently only Chrome and Opera).

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

document.querySelector('input[type="file"]').onchange = function(e) {
  var files = this.files;

  window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    // Duplicate each file the user selected to the app's fs.
    for (var i = 0, file; file = files[i]; ++i) {

      // Capture current iteration's file in local scope for the getFile() callback.
      (function(f) {
        fs.root.getFile(f.name, {create: true, exclusive: true}, function(fileEntry) {
          fileEntry.createWriter(function(fileWriter) {
            fileWriter.write(f); // Note: write() can take a File or Blob object.
          }, errorHandler);
        }, errorHandler);
      })(file);

    }
  }, errorHandler);

};

Upvotes: 2

Arpit
Arpit

Reputation: 12797

"Can we save/store/upload a file using JavaScript/HTML in browser only(Not server )??"

Ans. is No. If you want to retain the uploaded file then you need to store it on server.

The moment the browser tab is closed the file will get lost.

Alternative: What you can do is store the name of the file on server and whenever user request the file then ask him to upload it.

For uploading the file into memory you can refer to this link .

Live Demo

Upvotes: -3

Related Questions