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?
Answer
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