Question

I am trying for hours to use the HTML5 FileSystem to add a remote file with an URL (like http://example.com/doc.pdf) instead of the file obtained by the file input because I want the process to be automatic (I have more than one doc) but I didn’t found anything about the process…

All examples I found concern local files (added with a file input)…

I give you few lines of my code :

window.requestFileSystem(TEMPORARY, 1024 * 1024 * 10,  function(fs) {
  FS_ = fs;
  addRemoteDocuments();
}, errorCallback);

function addRemoteDocuments(){
var docList = [ "http://cpbdev/html5tests/pdf/tarifs.pdf", "http://cpbdev/html5tests/pdf/tarifs1.pdf", "http://cpbdev/html5tests/pdf/tarifs2.pdf", "http://cpbdev/html5tests/pdf/tarifs3.pdf", "http://cpbdev/html5tests/pdf/tarifs4.pdf" ];

for (var i = 0, doc; doc = this.docList[i]; ++i) {

// Capture current iteration's file in local scope for the getFile() callback.
(function(f) {

  FS_.root.getFile(getName(doc), {create: true, exclusive: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function(e) {
        console.log('Write completed for doc '+i);
      };

      fileWriter.write(GET_REMOTE_FILE(doc));
    }, errorCallback);
  }, errorCallback);
})(doc);
}

readDirectories();
}

function GET_REMOTE_FILE(doc){
  //Impossible to find a way to get File (with possibility to use file.name and others properties)
}

Maybe with a simulated click to a hidden file input (if it’s possible to add a remote file…)

I hope somebody can help me because the docs about remote files and filesystem are difficult to find…

Thanks everybody 🙂

Brice.

Answer 1

My article on HTML5Rocks discusses this in depth and gives a full example.
It involves XHR2 + the Filesystem API.