We Keep Coding

javascript how can i run 2 file reader methods(readAsArrayBuffer() & readAsDataURL())?

i currently have the ff code my goal is to remove the extra filreader loop? is it possible to maybe chain the readAsArrayBuffer and readAsDataURL or load them both?
var images = [];
var files = dt.files.length;
for (i = 0; i < files; i++) {
var reader = new FileReader();
reader.fileId = i;
reader.onload = function (){
images[this.fileId].is_valid = true / false; // checks mime type
}
reader.readAsArrayBuffer(dt.files[i]);
for (i = 0; i < files; i++) {
var reader = new FileReader();
reader.fileId = i;
reader.onload = function (){
//load image
if(image[i].is_valid){
// do this
}else {
// do this
}
}
reader.readAsDataURL(dt.files[i]);

Failed to execute 'readAsDataURL' on 'FileReader': the object is already busy reading Blobs

I want to upload multiple images. When I choose multiple images photoSelected function is called. I want to use base64 but it shows this error on console.
PhotoSelected (e){
Let files = e.target.files;
Let reader = new FileReader();
Let file;
For (let i=0; I<files.length ; i++){
file = files [i];
reader.onload = (file) => {
This.product.photo[i] = reader.result;
}
reader.readAsDataURL(file)
}
}

you defined the reader outside the for loop and use the same reader within the loop. this results in the reader being busy. You can solve this by creating one reader for each loop in its own scope, using an IIFE.
PhotoSelected (e){
let files = e.target.files;
let reader = new FileReader();
let file;
for (let i=0; I<files.length ; i++){
(function(file) {
var reader = new FileReader();
reader.onload = (file) => {
this.product.photo[i] = reader.result;
}
reader.readAsDataURL(file)
})(files[i]);
}
}
Since you are using let already and it uses block scope, you could also create a reader each loop using let.
PhotoSelected (e){
let files = e.target.files;
let file;
for (let i=0; I<files.length ; i++){
let reader = new FileReader();
file = files [i];
reader.onload = (file) => {
this.product.photo[i] = reader.result;
}
reader.readAsDataURL(file)
}
}

Why is my function only applying SRC property only to the first uploaded image?

The function successfully creates N image elements with a class of new-avatar-picture, however, it only adds SRC property to the first image. I'm not getting any errors in the console either.
function displayInputImage(input) {
var files = input.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
var x = document.createElement("img");
reader.onload = function(e) {
x.setAttribute("src", e.target.result);
}
reader.readAsDataURL(file);
x.className = "new-avatar-picture";
$('.upload-btn-wrapper').append(x);
}
}

The issue with your logic is due to the fact that onload() of the reader fires after the loop completes, so x will refer to the last element in the set. Hence that single element gets its src set N times.
To fix this you could use a closure:
function displayInputImage(input) {
for (var i = 0; i < input.files.length; i++) {
var $img = $("<img />");
(function($imgElement) {
var reader = new FileReader();
reader.onload = function(e) {
$imgElement.prop("src", e.target.result);
}
reader.readAsDataURL(input.files[i]);
$imgElement.addClass("new-avatar-picture");
$('.upload-btn-wrapper').append($imgElement);
}($img));
}
}
Alternatively you could create the new img elements only after the content of the file is read:
function displayInputImage(input) {
for (var i = 0; i < input.files.length; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$('<img />').addClass('new-avatar-picture').prop('src', e.target.result).appendTo('.upload-btn-wrapper');
}
reader.readAsDataURL(input.files[i]);
}
}

One way to do that is to give each image a new property, I call it temp_src so that the browser will not try to load the images right away.
Then in the .onload event, loop through all images that you have created and give each of them the proper src value, by copying it from its temp_src property.
Something like:
var reader = new FileReader();
function displayInputImage(input) {
var files = input.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var x = document.createElement("img");
x.setAttribute("class", "temp_img");
x.setAttribute("temp_src", file);
reader.readAsDataURL(file);
x.className = "new-avatar-picture";
$('.upload-btn-wrapper').append(x);
}
}
reader.onload = function(e) {
var images = document.getElementsByClassName("tmp_img");
images.forEach(function(img) {
img.setAttribute("src", img.temp_src);
});
}

File Reader loop Issue

readFile : function(files)
{
for(x = 0; x < files.length; x = x + 1) {
var file = files[x];
(function(file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
console.log(e.target.result);
console.log(file.name);
}
})(file);
}
}
var fileObjects = document.querySelectorAll('input[type=file]'), i;
this.readFile(fileObjects)
getting this error
Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

jQuery Split function not working

I am trying to split the input file object, But not working
Script
$('#imageUpload').change(function(){
readImgUrlAndPreview(this);
function readImgUrlAndPreview(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var src_img = [];
src_img=$('#imageUpload')[0];
var comImgObj=dataURItoBlob(src_img);
$('#imagePreview').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
else {
var img = input.value;
$('#imagePreview').attr('src',img);
}
}
});
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
Jsfiddle
I am getting this error
Uncaught TypeError: Object # has no method 'split'