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 when uploading a image file from local disk.

But suppose i have a image url say http://www.google.com/images/logos/ps_logo2.png and want to upload this image from remote url instead of uploading from local disk.

FileReader API works well when trying upload image from local disk but how can we use it to load images by urls?

Its easy to create a base64 of image and use it for preview by setting in image field as <img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'> but what workflow should one adopt to upload images from remote url using jQuery or JavaScript?

How can i? Any suggestions?

Why don't you just get it on the server with curl or something. — Musa
– Musa, Commented Jan 3, 2014 at 12:39
Possible duplicate of: stackoverflow.com/questions/5420384/… — sdabet
– sdabet, Commented Jan 3, 2014 at 12:45
I agree about using curl. My approach is to use a drag and drop (like this: stackoverflow.com/a/11973398/1798697), retrieve the URL and submit the URL to the server (instead of the actual file data). When the server gets a URL, it uses curl (or w/e x-server thing) to get its own copy. — plong0
– plong0, Commented Sep 8, 2015 at 17:05

Community · Accepted Answer · 2017-05-23 12:18:04Z

2

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 3, 2014 at 12:48

sdabet

19.2k11 gold badges96 silver badges165 bronze badges

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

2 Comments

Musa Over a year ago

That not going to work any more. SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

sdabet Over a year ago

I wans't aware of this security limitation. Thx for sharing.

Praveen Soni · Accepted Answer · 2018-01-07 12:52:45Z

1

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

answered Jan 7, 2018 at 12:52

Praveen Soni

7908 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to upload image file from url using FileReader API?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related