Read File stored on some URL using HTML5 File API

Question

I'm using HTML5 file API to upload files to my web application.

I have an input element on my web page using which I read files and call upload function

<input type="file">

$('input[type="file"]').on("change",function(e){
      console.log(this.files);
      // upload each file in this.files
});

This works perfectly for native files on os. I want to now upload remote files e.g., example.com/blah/file1.jpg My question is how do I read this file using File API? Is there a way to do it?

Answer 1

You can download remote files over XMLHttpRequest, and process them as Blob. Then upload it to another server. The upload has to be over XMLHttpRequest. It relies on the browser's implementation of XHR Level 2. This link contains the code snippets you will need:

http://www.html5rocks.com/en/tutorials/file/xhr2/

It has both snippets for downloading remote file as a Blob and uploading a Blob to a server.