HTML5 File API with Remote File

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.

what are you trying to do ? download remote files via the file API ? — mpm
– mpm, Commented Feb 28, 2012 at 16:32
I want to add remote files to the local filesystem. (to access them offline later) — Pouki
– Pouki, Commented Feb 28, 2012 at 16:35

ebidel · Accepted Answer · 2012-02-28 21:29:22Z

2

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

answered Feb 28, 2012 at 21:29

ebidel

24.2k4 gold badges65 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pouki Over a year ago

Hi ebidel, thanks for your link, it's what I need, but I have a question about CORS, you said html5rocks.com has enabled CORS on all of its pages, but how put the header for a png or a pdf file ? Because when I try to access to "html5rocks.com/en/tutorials/file/xhr2/access_control_header.png", I don't see the Access-Control-Allow-Origin header for the image and I can't get the file... Sorry if my question is trivial

Collectives™ on Stack Overflow

HTML5 File API with Remote File

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related