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 eg, 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.