how to upload image file from url using FileReader API?

Question

In html form, we have a image field, to upload a file. I followed tutorial from http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api and it works fine

Answer 1

FileReader API is dedicated to local files (cf http://www.html5rocks.com/en/tutorials/file/dndfiles/)

If you want to download an image from a remote URL and extract its data in javascript you can use Image and Canvas elements, as explained in the following question: Convert an image into binary data in javascript

Answer 2

as @fiddler answer says, fileReader is for local files only, if you need to get things like images from remote urls, then you may follow another approach

1) using Http Get request
2) using Canvas features

but due to security threat, browsers not allow scripts to do cross origin requests, only DOM itself can do that. that can be solve by

1) Cors (Cross-Origin Resource Sharing) ?
2) Jsonp ?

now you curious so cors or jsonp

if you have access to server where your remote things exist you can do server side cors ?, which is recommended by most.

but as question looking for a solution which can handle any remote resources, cors proxy ? help you
free cors proxies