Question

Using html5 javascript, how do you get the file path when user select the file?
I needed the file path to use in this example case:

user upload a file, pause it(I know so far I think only mozilla can do this), and then close the browser and plan to resume the file the next day. I need to know the file path for this file..

Answer 1

Even if you did have a path (some browsers used to give it to you), there is no way to set the path of a input of type file.

Therefore, it is not possible to do what you want with plain JS and the DOM.

I said it wasn’t possible, but now that you asked I do think there is a way, with new File API. The following steps outline what needs to be done, but have in no way been tested, and I don’t expect it to work, it’s just to show you the way, also global variables are bad, it’s just the simplest way to show you. Here’s a good page with examples on using the File API http://www.html5rocks.com/en/tutorials/file/dndfiles/

First You need an input of type file, then you can use once a user selects a file, you are given access to the File object. http://dev.w3.org/2006/webapi/FileAPI/#dfn-filereader

<input type="file" id="files" name="files[]" multiple />
<script>
  var fileBlobs = [];
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. You may now read their contents
    var reader = new FileReader();
    for (var i = 0, f; f = files[i]; i++) {
      fileBlobs.push(reader.readAsBinaryString(f));
    }
  }    
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Second Now you have the content as a binary string. You can use the File API to store the file locally in a way that you can access later using the FileWriter and FileSaver interfaces http://dev.w3.org/2009/dap/file-system/file-writer.html

var bb = new BlobBuilder();
bb.appendfileBlobs.(fileBlobs[0]);
window.saveAs(bb.getBlob(), "test_file");

Third You need to make an Ajax request passing that blob to the server, tracking how much of the upload is complete. http://www.w3.org/TR/XMLHttpRequest/#the-upload-attribute. It doesn’t look like tracking progress can be done on the client. Your may have to poll the server for actual progress. A possible solution to know where to start an interrupted upload is to have upload ids and when you restart an upload, you ask the server how much of the file has been uploaded.

Sorry I can’t provide a full answer, but this is not an easy problem. The steps I gave you should take you in the right direction.