I am currently building a large database from an imported XML document, about 13k items or so. When I do
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
let text = reader.result;
let parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"application/xml");
getReportList(xmlDoc);
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
});
}
function isGroupTag(arr) {
return arr.nodeName === "Group";
}
function getReportList(xml) {
// Creates an array containing all reports
let reportList = Array.from(xmlDoc.children[0].children).filter(isGroupTag);
allReports = reportList.map((currElement, index) => {
return getReport(xml, index);
});
}
I only get back about 2100? I checked my program using a much smaller XML document and every thing was loaded fine. Any ideas as to why I would be getting such a small return back?
My first thought was that the XML document wasn't loaded completely yet so when I did Array.from() it was building the array with what it had...not sure though. Any help would be great.
EDIT:
I just finished testing loading in a few more XML documents. Instead of one massive file I loaded in the yearly ones and everything shows up. Still not sure why I can't just do the massive one.
Related
TinyMCE is not allowing multiple file uploads in a post. You can select a file, and it will insert into the TinyMCE editor however once you submit, only the last inserted image is uploaded.
Below is the code I am working with: (the [0] is removed on the second attempt in which I was thinking TinyMCE would handle the files array)
if (meta.filetype == 'image') {
$('#upload').trigger('click')
$('#upload').on('change', function() {
var file = this.files[0]
var reader = new FileReader()
var name = file.name.split('.')[0]
var blobCache = tinymce.activeEditor.editorUpload.blobCache
var blobInfo = blobCache.create(name, file, reader.result)
blobCache.add(blobInfo);
reader.onload = function(e) {
callback(blobInfo.blobUri(), {
alt: file.name,
title: name
})
}
reader.readAsDataURL(file)
})
}
}
I have tried to append additional files with a for loop and removed the [0] from files and split without success.
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
$('#upload').trigger('click')
$('#upload').on('change', function() {
var file = this.files//[0]
var reader = new FileReader()
var name = []
for(var x = 0; x < file.length; x++) {
name.push(file[x].name.split('.'))
}
var blobCache = tinymce.activeEditor.editorUpload.blobCache
var blobInfo = blobCache.create(name, file, reader.result)
blobCache.add(blobInfo);
reader.onload = function(e) {
callback(blobInfo.blobUri(), {alt: file.name, title: name})
}
reader.readAsDataURL(file)
})
}
}
I have also tried allowing auto upload which only work for the first image and the rest fallback to base64 in the database. Lastly, I tried to combine all files in order to upload however I'm not seeing different file names in console.log. For instance I attach one file, I see one file in console.log, I attach another, I see two responses in console.log but with the most recent attached file but only the last attached image will upload on submit. It seems that TinyMCE overwrites the file with each image attachemnt.
Is there a different approach to this so I can add images to a post with TinyMCE and upon submit, they are all uploaded instead of the last image attached?
Changed to the following now for a working solution. Using the name for the first argument when calling blobCache.create was the cause of the issue, a unique blobid is required instead.
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
$('#upload').on('change', function() {
var file = this.files[0]
var reader = new FileReader()
reader.onload = function(e) {
// var name = file.name.split('.')[0] // replaced with id below
// var base64 = reader.result.split(',')[1]; // for base64
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache
var blobInfo = blobCache.create(id, file, reader.result)
blobCache.add(blobInfo);
callback(blobInfo.blobUri(), {alt: file.name, title: name})
}
reader.readAsDataURL(file)
})
$('#upload').trigger('click')
}
}
I need your help with following problem:
I have HTML input which supports multiple files;
I upload let's say 5 files;
Each file is processed: it is readAsDataURL by FileReader and data of file is saved to object(there will be other params saved too, that is why object), which is pushed to array.
After I run flow I described, length of final array is NOT changed.
I believe problem is in async behaviour, but I cannot understand how should I change code to make it work, that is why I ask you for a help. Please find code below:
var controls = document.getElementById('controls');
function processUploadedFilesData(files) {
if (!files[0]) {
return;
};
var uploads = [];
for (var i = 0, length = files.length; i < length; i++) {
(function(file) {
var reader = new FileReader();
//I need object, as other params will be saved too in future;
var newFile = {};
reader.readAsDataURL(file);
reader.onloadend = function(e) {
newFile.data = e.target.result;
uploads.push(newFile);
}
})(files[i]);
}
return uploads;
}
controls.addEventListener('change', function(e) {
var uploadedFilesOfUser = processUploadedFilesData(e.target.files);
alert(uploadedFilesOfUser.length);
});
Codepen example - https://codepen.io/yodeco/pen/xWevRy
I'm trying to create a simple web app that could read and display a plain text file. I want it to open the files just by dragging and dropping them on a div.
This is my code that handles the drop event:
dropHere.addEventListener('drop', function(e) {
e.preventDefault();
var data = e.dataTransfer.getData('text');
console.log(data);
});
Pretty straightforward, huh? Only... it logs an empty string.
I'm really confused. Am I missing some trivial thing?
e.dataTransfer.files[0] returns a File object, with the correct filename, size, and even file type.
OK, so I went through a few pages that allow drag & drop file uploading and found a solution to this problem. Use FileReader instead of getData().
This is how the code looks now (generated from CoffeeScript):
var loadFile;
empty.addEventListener('drop', function(e) {
var file, files, i, len, results;
e.preventDefault();
files = e.dataTransfer.files;
results = [];
for (i = 0, len = files.length; i < len; i++) {
file = files[i];
results.push(loadFile(file));
}
return results;
});
loadFile = function(file) {
var reader;
reader = new window.FileReader;
reader.onload = function(e) {
return content.innerHTML = reader.result;
};
return reader.readAsText(file);
};
Everything works fine now.
My script selects a file... but doesn't read it. I've been banging my head on it but can't make it work. It's part of my studies, I'm a greenhorn and I'm lost.
function readBlob() {
var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
var file = files[0];
var start = 0;
var stop = file.size;
var reader = new FileReader();
if (file.webkitSlice) {
var blob = file.webkitSlice(start, stop);
//Creates new blob if using google chrome
} else if (file.mozSlice) {
var blob = file.mozSlice(start, stop);
//Creates new blob if using mozilla firefox
}
//read the contents of the file in as text into the blob
reader.readAsText(blob);
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
document.getElementById('byte_content').textContent =
evt.target.result;
}
};
}
}
Seems like a simple syntax error to me, but maybe just an error inserting it into stack overflow. The entire thing, the slicing of the file, the insertion into the document, everything, is inside of the if (!files.length) statement. Therefore, the script only executes when there is no file (catching on to the problem yet :) but it is actually meant to do the opposite. All of the important stuff is supposed to be outside of the if statement.
With the new File API in Javascript you can read files in Javascript to create dataURLs to show clientside pictures clientside. I'm wondering if you can reach the File object within the FileReader's onload callback.
I will illustrate this with an example:
var div = document.createElement('div');
div.ondrop = function(e) {
e.preventDefault();
e.stopPropagation();
var files = e.dataTransfer.files;
for ( var i=0; i<files.length; i++ ) {
var file = files[i]; // this is the file I want!!
var filereader = new FileReader();
filereader.onload = function(e) {
this; // the FileReader object
e.target; // the same FileReader object
this.result; // the dataURL, something like data:image/jpeg;base64,.....
var img = document.createElement('img');
img.src = this.result;
img.title = file.fileName; // This won't be working
document.appendChild(img);
}
}
return false;
}
What I could do - what I do right now - is wrap the contents of the for loop in a function and execute it to create a new scope and keep a file in that scope like so:
for ( var i=0; i<files.length; i++ ) {
var _file = files[i]; // this is the file I want!!
(function(file) {
// do FileReader stuff here
})(_file);
}
I was just wondering... Maybe I'm missing something. Is there a way to get the File object from within the onload function of the FileReader? Both this and e.target are the FileReader object and not the File. Is there something in this or e that is the File?? I can't find it :(
Thanks a bunch.
PS. A fiddle: http://jsfiddle.net/rudiedirkx/ZWMRd/1/
I already found a way. Maybe not better than the scope wrapper, but I think it's neater:
for ( var i=0; i<files.length; i++ ) {
var file = files[i]; // this is the file I want!!
var filereader = new FileReader();
filereader.file = file;
filereader.onload = function(e) {
var file = this.file; // there it is!
// do stuff
}
}
There is now a much easier (apparently faster) way (sync!) to get a file's data URL:
img.src = URL.createObjectURL(file);
Demo on http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ of both methods, and the original problem illustrated (drag multiple images and check the title tooltips).
I don't think this.file is still supported. When I try to run the answer code, this.file is undefined whereas if I run the code from the question I get the expected results. I think you have to use the closure (at least this is how they do it on html5rocks (Example)).