My website allows users to upload multiple images simultaneously. I want to check the EXIF rotation tag of each uploaded image in order to manually rotate the images in the browser if needed.
I came across a solution for reading the EXIF rotation value of an image:
While this method works fine for single image uploads, it doesn't function properly for multiple images as fr.onloadend completes after reading all the images.
Currently, I am storing the image names and rotation values in a hash (rotate_images) and plan to apply these rotations later when rendering the images on the page.
Below is the code snippet I have so far:
$('#file').change(function(){
for(var i = 0; i<this.files.length; i++){
var file = this.files[i];
var file_path = this.files.item(i).name;
if(file_path){
var startIndex = (file_path.indexOf('\\') >= 0 ? file_path.lastIndexOf('\\') : file_path.lastIndexOf('/'));
var filename = file_path.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
console.log('uploading image ' + filename);
}
fr = new FileReader;
fr.onloadend = function(){
console.log('getting exif');
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
var orientation = exif.Orientation;
console.log(filename +' has orientation ' + orientation);
if(orientation != 1){
rotate_images[filename] = orientation;
}
}
fr.readAsBinaryString(file);
}
});
After analyzing the logs, here's what I found:
uploading image camera.JPG
uploading image robot.JPG
uploading image snack.jpg
getting exif
snack.jpg has orientation 8
getting exif
snack.jpg has orientation 8
getting exif
snack.jpg has orientation 1
The logs reveal that the script is only reading the last file. How can I delay the loop until each file is read? Is there an alternate method to extract EXIF orientation data from multiple files?
Here are the scripts I'm utilizing to access the EXIF information: