I am trying to post javascript array of object in an ajax call but i get string value "[]". When i try to console.log the array lenght it says zero.
Following is the code i am using
var masterFileArray = []; // where I will store the contents
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
for (var i = 0, f; f = files[i]; i++) {
var r = new FileReader();
r.onload = (function (f) {
return function (e) {
var contents = e.target.result;
masterFileArray.push({name:f.name, contents: contents, type:f.type, size:f.size}); // storing as object
};
})(f);
r.readAsText(f);
}
console.log(masterFileArray);
new Ajax.Request('fileupload.php', {
method: 'post',
parameters: {files: JSON.stringify(masterFileArray)},
onSuccess: function(transport){
var response = transport.responseText;
console.log(response);
}
});
} else {
alert('Failed to load files');
}
}
document.getElementById('upfiles').addEventListener('change', readMultipleFiles, false);
Thats how it looks like on inspection
What i am doing wrong? Any help would be appreciated, Thank you.
You can post after reading finished,
Here introduced left_loaded_count to get the status of reading.
Try like this.
var masterFileArray = []; // where I will store the contents
var left_loaded_count = 0;
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
for (var i = 0, f; f = files[i]; i++) {
var r = new FileReader();
r.onload = (function (f) {
return function (e) {
var contents = e.target.result;
masterFileArray.push({name:f.name, contents: contents, type:f.type, size:f.size}); // storing as object
left_loaded_count -= 1;
if(left_loaded_count == 0)
{
console.log(masterFileArray);
new Ajax.Request('fileupload.php', {
method: 'post',
parameters: {files: JSON.stringify(masterFileArray)},
onSuccess: function(transport){
var response = transport.responseText;
console.log(response);
}
});
}
};
})(f);
left_loaded_count += 1;
r.readAsText(f);
}
} else {
alert('Failed to load files');
}
}
document.getElementById('upfiles').addEventListener('change', readMultipleFiles, false);
readAsText() is an asynchronous operation, but you proceed with the AJAX call right away instead of waiting for the read operations to finish. That's why your console.log(masterFileArray) prints an empty array, when it runs none of the operations have finished and the array is still empty.
The best way to solve this is to wrap each file read operation in a promise and then proceed with the AJAX call once all these promises resolve.
Get rid of var masterFileArray = [] and change your code within the if (files) { ... } block to this:
Promise.all(files.map(function(f) {
return new Promise(function(resolve) {
var r = new FileReader();
r.onload = function (e) {
var contents = e.target.result;
resolve({name:f.name, contents: contents, type:f.type, size:f.size}); // resolve promise with object
};
r.readAsText(f);
});
})).then(function(masterFileArray) {
// All promises have resolved and their results have been collected in masterFileArray
console.log(masterFileArray);
new Ajax.Request('fileupload.php', {
method: 'post',
parameters: {files: JSON.stringify(masterFileArray)},
onSuccess: function(transport){
var response = transport.responseText;
console.log(response);
}
);
});
Related
I want to replace in my object a firebase child data image url by a database64 string. It work pretty well but i have issue with async ? how can i wait for all my value inside my foreach ?
return FirebaseRef.child('rav').on('value', snapshot => {
// const userData = snapshot.val() || [];
var obj = {
}
snapshot.forEach(child => {
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL(child.val().avatar, function (dataUrl) {
// console.log('RESULT:', dataUrl)
obj[child.key] = {
...child.val(),
avatar: dataUrl
}
console.log('obj', obj)
})
});
console.log('obj', obj)
this.updateAvatar({ profile: obj }); // Send to reducer
});
},
}),
Create an empty array before the forEach, have the callback() function return a Promise.resolve(), push the return value (the promise) of callback() into your array, then (after the forEach) use Promise.resolve() with your array to trigger the action you want to call after all the FileReader() calls have completed.
Let me start by stating that you shouldn't define a function inside a loop. It's redefining at every step of the loop. That's not your issue though. Lucky for you I wrote such a function earlier this year. This dataURL was found on wikipedia.
function dataURLtoBlob(dataURL){
var d;
if(typeof dataURL !== 'string' || !((d = dataURL.split(';base64,')) && d.length > 1)){
return false;
}
var s = atob(decodeURIComponent(d[1])), l = s.length, a = new Uint8Array(l);
for(var i=0; i<l; i++){
a[i] = s.charCodeAt(i);
}
return new Blob([a], {type:'image/png'});
}
var url = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////////////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=';
console.log(url);
dataURLtoBlob(url).text().then(function(str){
console.log(str);
});
<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////////////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k='/>
Of course, you should ask yourself why you're doing this when you can store an image in Firebase.
PS
You should be able to send a Blob to your Server using FormDataInstance.append.
I'm trying to upload an array of files using FileReader which are base64 encoded and stored in an array for further processing. I'm struggling to understand the pattern I need to create in order to ensure all files have been uploaded because I have to wait for the onload event handler to fire. For example;
If I pass an array of files to the following function it will resolve the promise before the files are actually uploaded.
localUploads( event ) : any {
var response = [];
return new Promise( function(resolve, reject) {
//Retrieve all the files from the FileList object
var files = event.target.files;
var response = [];
if (files) {
for (var i=0, f; f=files[i]; i++) {
var r = new FileReader();
r.onload = (function(f) {
return function(e) {
let contents = e.target['result'];
let file = {
name: f.name,
asset: contents,
private: false
};
console.log('we are pushing into the array');
response.push( file );
};
})(f);
}
resolve( response );
}
r.readAsText(f);
});
}
Can anybody please advise a novice?
Many thanks.
It's all about resolving the promise at the right time. Currently you resolve it when the loop is done, but that doesn't mean that all the items have been processed. I haven't used FileReader, but you should be able to do something like this:
localUploads( event ) : any {
var response = [];
return new Promise(function(resolve, reject) {
//Retrieve all the files from the FileList object
var files = event.target.files;
var response = [];
if (files) {
for (var i=0, f; f=files[i]; i++) {
var r = new FileReader();
r.onload = function(e) { // Possible clean-up?
let contents = e.target['result'];
let file = {
name: f.name,
asset: contents,
private: false
};
console.log('we are pushing into the array');
response.push( file );
if(response.length == files.length)
{
// Everything is done. Resolve the promise.
resolve( response );
}
};
// Moved here to be able to access r and f variables
r.readAsText(f);
}
}
});
}
Or the old way using $q.
var response = [];
var dfd = $q.defer();
//Retrieve all the files from the FileList object
var files = event.target.files;
var response = [];
if (files) {
for (var i=0, f; f=files[i]; i++) {
var r = new FileReader();
r.onload = function(e) { // Possible clean-up?
let contents = e.target['result'];
let file = {
name: f.name,
asset: contents,
private: false
};
console.log('we are pushing into the array');
response.push( file );
if(response.length == files.length)
{
// Everything is done. Resolve the promise.
dfd.resolve(response);
}
};
// Moved here to be able to access r and f variables
r.readAsText(f);
}
}
else {
// Possible resolve promise here to?
}
return dfd.promise;
Note that you might also want to handle the possible errors. If one of the files isn't completed sucessfully the promise will never be resolved.
You might need to resolve the promise in onloadend instead of onload. I really cannot figure it out from the docs.
var r = new FileReader();
r.onload = function(e) {
if(response.length == files.length)
{
// Everything is done. Resolve the promise.
dfd.resolve(response);
}
}
This is the code I have for reading the first item in a file input, how can I iterate over all items inside this input?
function readFile (uploadControlId) {
if (!window.FileReader)
throw "The browser does not support HTML 5";
var element = document.getElementById(uploadControlId);
var def = new $.Deferred();
var file = element.files[0];
var parts = element.value.split("\\");
var fileName = parts[parts.length - 1];
var reader = new FileReader();
reader.onload = function (e) {
if (uploadControlId == 'uploadControlId'){
def.resolve(e.target.result, fileName);
} else {
def.resolve(e.target.result, fileName);
}
};
reader.onerror = function (e) {
def.reject(e.target.error);
};
reader.readAsArrayBuffer(file);
return def.promise();
}
I have tried something like:
angular.forEach(element.files, function (file){
})
But this doesn't work since the variables 'parts' and 'fileName' is from the variable 'element', so if I iterate over each file in element, they get 'undefined' fileName, this means they won't have like .txt or .pdf, so they are unreadable.
Update: This give no error, but only the last file gets uploaded:
function readFile (uploadControlId) {
if (!window.FileReader)
throw "The browser does not support HTML 5";
var def = new $.Deferred();
var element = document.getElementById(uploadControlId);
angular.forEach(element.files, function(file){
var fileName = file.name;
var reader = new FileReader();
reader.onload = function (e) {
def.resolve(e.target.result, fileName);
};
reader.onerror = function (e) {
def.reject(e.target.error);
};
reader.readAsArrayBuffer(file);
});
return def.promise();
}
My upload function:
$scope.UploadAttachment = function(){
readFile(uploadControlId).done(function (buffer, fileName) {
// logic to upload to server
}).fail(function (err) {
alert("error in reading file content");
});
};
Have you added the "multiple" attribute on the input tag?
By the way if you add this directive to your tag, an event will be fired with all files and you will handle that in you controller.
// Directive
(function(){
var Directive = function(){
return {
restrict: 'A',
scope : {},
link : function(scope, element, attrs){
element.bind('change', function(changeEvent){
scope.$emit('fileReader', changeEvent.target.files);
});
}
}
};
Directive.$inject = [];
app.directive('fileReader', Directive);
})();
// Controller
(function(){
var Controller = function($scope){
// Methods
function fileReader(files){
for(var iFile = 0, fileLen = files.length; iFile < fileLen; iFile = iFile + 1){
var file = files[iFile];
// Do something
}
}
// Events
$scope.$on('fileReader', function(event, files){
fileReader(files);
});
};
Controller.$inject = [
'$scope'
];
app.controller('MainCtrl', Controller);
})();
I have a list of files I need to save and in addition to the name I need to send the readAsDataURL to the server as well.
The problem is I am not sure how to do it with the async nature of readAsDataURL. Because to save the DATAURL to the array I need to look up the name of the file which is in the files list. and I cannot pass the file to the async method of readAsDataURL. How do you write this properly to work? The end result is I want a list of files sent to the server in one JSZip file.
function saveFileList(files)
{
for (var i = 0, file; file = files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e){
if (e.target.readyState == FileReader.DONE) {
var tt = e.target.result.split(",")[1];
//update the record in the list with the result
}
};
var pp = fr.readAsDataURL(file);
}
If you have FileList and you need to get array of base64 string, you need do this
export async function fileListToBase64(fileList) {
// create function which return resolved promise
// with data:base64 string
function getBase64(file) {
const reader = new FileReader()
return new Promise(resolve => {
reader.onload = ev => {
resolve(ev.target.result)
}
reader.readAsDataURL(file)
})
}
// here will be array of promisified functions
const promises = []
// loop through fileList with for loop
for (let i = 0; i < fileList.length; i++) {
promises.push(getBase64(fileList[i]))
}
// array with base64 strings
return await Promise.all(promises)
}
use it like this
const arrayOfBase64 = await fileListToBase64(yourFileList)
You need another function around it, so you can pass the file in. Try this:
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
if(reader.readyState == FileReader.DONE)
alert(theFile.name); // The file that was passed in.
}
};
})(file);
reader.readAsDataURL(file);
An alternative to Russell G's answer:
var reader = new FileReader();
reader.onload = function(event){
payload = event.target.result;
var filename = file.name, filetype = file.type;//etc
//trigger a custom event or execute a callback here to send your data to server.
};
reader.onerror = function(event){
//handle any error in here.
};
reader.readAsDataURL(file);
I am trying to do something like this:
JavaScript:
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
window.array = []
if (files) {
for (var i = 0, f; f = files[i]; i++) {
var r = new FileReader();
r.onload = (function (f) {
return function (e) {
var contents = e.target.result;
window.array.push(contents);
};
})(f);
r.readAsText(f);
}
alert(window.array);
} else {
alert("Failed to load files");
}
}
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
HTML:
<input type="file" id="fileinput" multiple />
So that I can read local files locally.
However, instead I want to store the file contents in an array of this format:
[file1Contents, file2Contents, file3Contents... etc]
How would I go about this? I tried setting a global variable (e.g. window.fileContents) and updating inside the on.load, but that did not work
Thanks
I'm not exactly sure what you're looking to do, but I'll give it a swing. I see that you're already reading the file as text.. could you not just shove that into the array there? I've modified your code below:
var masterFileArray = []; // where I will store the contents
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
window.array = []
if (files) {
for (var i = 0, f; f = files[i]; i++) {
var r = new FileReader();
r.onload = (function (f) {
return function (e) {
var contents = e.target.result;
window.array.push(contents);
masterFileArray.append({name:f.name, contents: contents}); // storing as object
};
})(f);
r.readAsText(f);
}
console.log(masterFileArray);
} else {
alert("Failed to load files");
}
}
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);