Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to upload image file from url using FileReader API?

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?

like image 377
uday.blob Avatar asked Jan 03 '14 12:01

uday.blob


People also ask

Can you send an image through an API?

You can send an image to an API from your Dropsource app.

How do you use readAsDataURL?

The readAsDataURL method is used to read the contents of the specified Blob or File . When the read operation is finished, the readyState becomes DONE , and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.

What is FileReader API?

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

How do I preview an image in react?

The React app we are going to build has a file input. When you select an image with this file input, an image preview will show up below it. There is also a “Remove This Image” button that lets you remove the selected image and the preview as well.


2 Answers

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

like image 124
Praveen Soni Avatar answered Sep 28 '22 04:09

Praveen Soni


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

like image 43
sdabet Avatar answered Sep 28 '22 05:09

sdabet