I'm following the result in this answer exactly but I am receiving the following error:
ReferenceError: BinaryFile is not defined
Here's the code where that is used:
fr.onloadend = function() {
console.log(this);
exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
}
The console.log shows that there is data there, I just don't understand this error I'm receiving.
Thank you for your help.
I used the following which worked very well
EXIF.getData(img, function() {
orientation = EXIF.getTag(this, "Orientation");
});
where img is my image object.
Also EXIF.pretty(this) was helpful to see what data is in each image.
Removing BinaryFile and changing how FileReader read the file (readAsArrayBuffer) worked for me.
fileReader.onload = function (event) {
var exif = fileReader.readFromBinaryFile(this.result);
console.log(exif);
};
fileReader.readAsArrayBuffer(file);
Related
I am experiencing an unexpected error when trying to load a javascript object using FileReader, unexpected because it works fine in another project, which is listed below. My intention is to perform a few operations on the javascript object right after reading it by executing a function that has several parameters, and that's why I changed the code structure because I didn't know how to put parameters in the code that works. Any tips are welcome.
Code that doesn't work
function wczytajSklad(sklad, id, objSklad, gdzie) {
var fr = new FileReader();
fr.onload = function(){
let wczytanySklad = fr.result;
sklad = JSON.parse(wczytanySklad);
ukryjInputFile(id);
pokazCheckAndRadio(objSklad, gdzie);
}
fr.readAsText(this.files[0]);
}
A place where i try to run function
<input type="file" name="gospodarze" id="wczytajSkladGospodarzy" onchange="wczytajSklad(skladGospodarzy, 'wczytajSkladGospodarzy', skladGospodarzy, 'skladGospodarzy')">
Code that works
document.getElementById('inputfile')
.addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function(){
wczytanyPlik = fr.result;
arrPoints = JSON.parse(wczytanyPlik);
rysuj();
}
fr.readAsText(this.files[0]);
})
I'm new to coding and have the opportunity to do some small stories on a project to whet my teeth. Right now I'm working on getting profile picture selection and cropping into a webapp with AngularJS. I've selected ngImgCropper to handle the cropping. Here's a JSFiddle with boilerplate code: http://jsfiddle.net/a2ew3yhf/50/
And here's JavaScript from that link:
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage = evt.currentTarget.result;
});
};
reader.readAsDataURL(file);
};
Here's my problem. My project uses Typescript, which doesn't support evt.currentTarget.result, so I get the following error:
Property 'result' does not exist on type 'EventTarget'
Is there any way to get around this?
Simple solution
If you sure that this property exist just make something like below
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage = (<any>evt.currentTarget).result;
});
};
reader.readAsDataURL(file);
};
Also you can create own interface that would be describe your target
interface MyTarget {
result:any; //or type of image
}
//skip some code
$scope.myImage = (evt.currentTarget as MyTarget).result;
Complicated solution
You can provide own declaration of ngImageCroper or provide description for current event
var handleFileSelect=function(evt: ImageCropEvent){
//your stuff
}
Resource
Write your d.ts file
So I'm trying to understand paste and copy API in Google Chrome. I don't understand either.
As of copy, you'll probably want to use javascript to add something in clipboard. I'm working with images (strings work well actually1):
//Get DataTransferItemList
var files = items.items;
if(files) {
console.log(files);
//Create blob from canvas
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
var file;
try {
//Try to create file from blob, which may fail
file = new File([blob], "image.png", {type:"image/png"});
}
catch(e) {
return false;
}
if(file) {
//I think this should clear previous data from clipboard
files.clear();
//Add a file as image/png
files.add(file, "image/png");
}
//console.log(files.add(file));
}
The problem is, that I don't really know how does that add method work. I found this "documentation" for DataTransferItemList which says:
add(any data, optional DOMString type)
What's any data? (how can anybody even write this in documentation?) While something is added to clipboard, I don't know what it is. I can't paste it anywhere - except Chrome. If I inspect paste event with my copied file, this is in DataTransferItemList:
It can be converted to File, but if I try to turn it back to <img>:
ImageEditorKeyboard.prototype.processFile = function(file) {
//File reader converts files to something else
var reader = new FileReader();
//Refference to this class
var _this = this;
//happens when the file is loaded
reader.onload = function(event) {
var img = new Image;
img.onload = function() {
_this.processImage(this);
};
img.src = event.target.result;
}; // data url!
//Read file
reader.readAsDataURL(file);
}
I get the error2:
If I log the value of event.target.result it turns out that the data was empty:
console.error("String '", event.target.result, "' ain't a valid URL!");
Q: What is the exact specification of DataTransferItemList, it's methods and properties, especially the .add method?
1: To add string to clipboard (during copy event of course!), call this: event.clipboardData.setData(data, "text/plain");. The second argument doesn't seem to have any functionality - using image/png will not do anything.
2: Funny thing is that this error can't be caught.
I'm wrting a function which takes an image from a file input from a form and enables me to put it in localstorage. The function I wrote to achieve this:
function getImage() {
var pic = document.getElementById("image").files[0];
var imgUrl;
var reader = new FileReader();
reader.onload = function(e) {
var imgURL = reader.result;
saveDataToLocalStorage(imgURL);
return imgUrl;
}
}
Then in another function I call this function and create a JSON entry in which I store values from other form inputs including the image. It looks like this:
var imgUrl = getImage();
// Create new JSON entry
var json_entry = {'title': titleField.val(),
'image': imgUrl,
'content': contentField.val(),
'location': location};
Sadly the value of imgUrl is undefined.. There are no console errors. What am I doing wrong? And how can I fix this?
I honestly don't know much about the FileReader object, but I can see just from glancing at your JS that (at least) one thing is off:
var imgUrl = getImage();
Your getImage function doesn't return anything; so imgUrl is definitely going to be undefined above.
If you want to do something with the result property of your FileReader, then you need to do so w/ a callback since you're handling the (asynchronous) onload event:
function getImage(callback) {
// What are you doing with this?
var pic = document.getElementById("image").files[0];
var reader = new FileReader();
reader.onload = function(e) {
var imgURL = reader.result;
saveDataToLocalStorage(imgURL);
// Note the difference here: rather than return from the event handler
// (which effectively does nothing) we pass the result to a callback.
callback(imgUrl);
}
// I assume you actually need to load something with the FileReader?
}
And then:
getImage(function(imgUrl) {
var json_entry = {
'title': titleField.val(),
'image': imgUrl,
'content': contentField.val(),
'location': location
};
});
It looks like you are forgetting to set the reader to readAsDataUrl. Likely the value is coming back as undefined because localStorage does not inherently know how to serialize binary data. Setting the reader to readAsDataUrl changes reader.result onload.
var reader = new FileReader();
reader.onload = function(e) {
var imgURL = reader.result;
saveDataToLocalStorage(imgURL);
callback(imgUrl);
};
// add this line
reader.readAsDataURL(pic);
Have a look at this article, especially the section titled Reading Files. Note in the linked example the author uses e.target.result instead of reader.result. This should be the same value.
Hi i am using the JS HTML5 File API to handle file uploads to my server.
I am getting the following error in Aurora(Fire Fox Bleeding edge builds)
NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsBinaryString]
function readBlob(opt_startByte, opt_stopByte,file,partNo) {
var start = parseInt(opt_startByte);
var stop = parseInt(opt_stopByte);
var reader = new FileReader();
var totalParts = parseInt(file.size/MAX_READ);
if((file.size % MAX_READ) !== 0){
totalParts++;
}
// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
//var contents = reader.result;
postFilePart(partNo,contents,totalParts,escape(file.name))// DONE == 2
}
};
if (file.webkitSlice) {
var blob = file.webkitSlice(start, stop);
} else if (file.mozSlice) {
var blob = file.mozSlice(start, stop);
}
reader.readAsBinaryString(blob);
}
the error is occurring at this line
reader.readAsBinaryString(blob);
i have tried mozSlice and Slice
if (file.mozSlice) {
var blob = file.mozSlice(start, stop);
}
and it gave me the same results. it might not be the best idea to use HTML 5 API yet as this may cause issues with other browsers as well.
does anyone have a work around to get the same functionality or how i can resolve this particular error
Solved the issue it it was rerunning the reader code with incorrect parameters due to a mistake on the calling method
https://bugzilla.mozilla.org/show_bug.cgi?id=725289
rather use slice vs mozSlice