javascript FileReader freezes browser when reading file over 500kb - javascript

I'm trying to use FileReader after user uploads pictures so that the user can preview his/her images. It works smoothly if the picture's size is about 100kb, however, when it is above 500kb, the browser will freeze for seconds. Once I upload a 2MB picture and it took the browser 1 min to load.so my question is how to make it work fast in background? or is there a way to compress the picture using javascript or jQuery before it is processed by FileReader?
function read_img(input) {
if (input.files && input.files[0]) {
for(i=0;i<$(input.files).length;i++) {
(function(file) {
var reader = new FileReader();
reader.onload = function (e) {
$(".preview").append("<img src='"+e.target.result+"'/>")
}
reader.readAsDataURL(input.files[i]);
})(input.files[i]);
}
}
}

Related

HTML Input file upload saved as very long url without PHP, AJAX, or jQuery

I have a website where you can upload files and it will be saved in a database, but is there a way where the url doesn't have to be 1 million characters long? Here's the code for uploading
function readImg(input, eltID) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(eltID).style.backgroundImage = 'url('+e.target.result+')';
};
reader.readAsDataURL(input.files[0]);
}
}
Which generates this:
Any solution?
I'm also not using any form. Using input type=file
You have to store the image data somewhere.
At the moment you appear to be choosing to store it in a data: scheme URL.
You can't reduce the size of that without making the total amount of image data smaller (e.g. by degrading the quality).
If you want a short URL, then make the URL be a reference to the image (e.g. store the file on a file system and put a static HTTP server in front of it, then the URL will be based on the filename you save the image as).
Where is the "upload" part?
Anyhow on the client side you can use createObjectURL
function readImg(input, eltID) {
if (input.files && input.files[0]) {
var url = URL.createObjectURL(input.files[0])
document.getElementById(eltID).style.backgroundImage = 'url('+url+')'
}
}

Iphone Photo Upload EXIF roate not working

I have the following code which does a great job in taking user selected image and displaying as preview. However, images uploaded on devices running IOS have the rotation problem - they are rotated on preview. I understand that I need to access the EXIF data of the image to find out how much to rotate. The problem is, I am not able to get this to work on top of my existing code.
Here is the current function which works - excluding the ios upload issue:
function changeAvatar(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var avatar = jQuery('.avatar_class');
reader.onload = function(e) {
loadImage(
e.target.result,
function (img) {
var imgUrl = e.target.result;
jQuery(avatar).css({'background-image': 'url('+imgUrl+')'});
jQuery('.image_value').attr({'val':imgUrl});
}
);
},
reader.readAsDataURL(input.files[0]);
}
}
jQuery('#avatarUpload').change(function() {
changeAvatar(this);
});
I have tried most of the scripts I could find here with no luck. I am just not sure how to access the EXIF data and then run a switch statement which would add css transform with attr rotate(xdeg).
Any advice would be much appreciated!
Now the question

Chromecast casting images from pc

I created chromecast app for casting specific image from web to screen but what I need now is add possibility to choose photo from my pc to cast. I tried with Javascript class FileReader using function readAsDataUrl(). It works if i want to display image on page but it says Media error when trying to cast it.Maybe becouse of format?Anyone knows hot to fix it or maybe different aproach for this problem that works?
code:
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
url= e.target.result;
$('#myImg').attr('src', e.target.result);}
....
function loadMedia(){
var mediaInfo=new chrome.cast.media.MediaInfo(url,type);
mediaInfo.metadata=new chrome.cast.media.PhotoMediaMetadata();
mediaInfo.metadata.metadataType=chrome.cast.media.MetadataType.PHOTO;
mediaInfo.contentType=type;
var request=new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(request,onMediaDiscovered.bind(this,"loadMedia"),onMediaError.bind(this));
}
In order for chromecast to be able to fetch your image, you need to have a web server to serve the image. If it is not in the cloud, then your sender (web or phone) needs to embed a web server and then communicate the URL of the image, as served by the web server, to chromecast.

Display image with JavaScript FileReader

I'm trying to display an image before uploading it via javascript / jQuery.
I'm executing this code in the ADD-Method of the jQuery Fileuploader. The data-attribute provides me with the file
var reader = new FileReader();
reader.onload = function(e) {
var img = $('<img></img>');
img.attr('src', e.target.result);
$("#general_dropable").append(img);
}
reader.readAsDataURL(file); // Retrieved from the data-attribute of the ADD-Method of the jQuery Fileuploader
Displaying works fine. When I drag the image in Google-Chrome, however, I'm getting this error from Chrome:
He's dead, Jim! Either Chrome ran out of memory or the process for the webpage was terminated for some other reason. To continue, reload or go to another page.
Dragging the image in Firefox works fine.
The image source is the actual source code of the image, not an absolute path.
Is there a workaround to this bug?
Thank you very much.
Edit
You can see a live example here:
http://jsfiddle.net/Fractaliste/LvsYc/1669/
Just drag the image after uploading and the error will appear (In Chrome)
I just found this question on stackoverflow. But looking at the jsfiddle I don't get this exception in Chrome any more (Chrome 46). To me it looked like you forgot to define the "file" variable in your function when you write it to the DOM (reader.readAsDataURL). But in your jsfiddle it seems fixed:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#target').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
.. this is not my answer as it was fixed already in jsfiddle ... but as I was searching for a solution for my problem i wanted to clarify things here as this might help others.

load a csv file into d3 without sending to server

is there anyway to load csv data into d3.csv without sending it to server? I'm trying to use a dataURI but it's not working...
I have a form that a user can choose a csv file from their computer.
<input type='file' onchange="readURL(this);"/>
This leads to the readURL function which creates a dataURI from that file.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#file_url')
.attr('data-file-url', f.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
Then I have a script to steal that dataURI from the #file_url div and enter it into d3.csv:
var address = $('#file_url').attr('data-file-url');
d3.csv(address,function(csv){
do stuff with that csv
}
Problem is I'm getting a cross-origin error.
You can use File API, but is not supported a close browsers especially IE. For more check this

Categories