Using .bind('fileuploadadd' to grab exif data not working on mobile browser

[Erik Unterschuetz]

I'm using jquery.exif.js to grab gps coordinates of images before upload. The lat and long are then sent along with each image from a hidden input and re-written to the file using PEL. My method (detailed below) is working correctly on a desktop browser, but not on iOS (haven't tested other mobile browsers). I know iOS strips exif data from html5 file uploads - which is why I'm attempting this function. But jQuery-File-Upload is parsing exif data somehow on iOS to correctly display thumbnail orientation. I must be grabbing the file at the wrong point.

Currently I have this for my exif handling:

var getInfo = function(exifObject) {
var aLat = exifObject.GPSLatitude;
var aLong = exifObject.GPSLongitude;
var strLatRef = exifObject.GPSLatitudeRef || "N";
var strLongRef = exifObject.GPSLongitudeRef || "W";
var fLat = (aLat[0] + aLat[1]/60 + aLat[2]/3600) * (strLatRef == "N" ? 1 : -1);
var fLong = (aLong[0] + aLong[1]/60 + aLong[2]/3600) * (strLongRef == "W" ? -1 : 1);
$('#timetime').val(exifObject.DateTime);
$('#latlat').val(fLat);
$('#longlong').val(fLong);
$('#latlatdms').val(aLat);
$('#longlongdms').val(aLong);
}

And this to call it:

$('#fileupload').bind('fileuploadadd', function (e, data) {
    $(data).fileExif(getInfo);
});

I've been at this on and off for a week now, and am out of time. I've also tried binding to fileuploadchange with the same result - iOS doesn't pickup any exif data from the image.

Where is the proper place to call $(data).fileExif(getInfo); so that it successfully grabs exif data before iOS removes it?


I've also just realized that the way I'm handling the exif data inputs works when adding photos individually, but not when adding multiple. My method was to grab the data from placeholder inputs and add them to each photo in the template. I added classes to the template and the following to _renderPreviews: function (data) in jquery.fileupload-ui.js:

            data.context.find('.imagedatetime').each(function () {
                $(this).val($('#timetime').val());
            });
            data.context.find('.gpslat').each(function () {
                $(this).val($('#latlat').val());
            });
            data.context.find('.gpslong').each(function () {
                $(this).val($('#longlong').val());
            });
            data.context.find('.gpslatdms').each(function () {
                $(this).val($('#latlatdms').val());
            });
            data.context.find('.gpslongdms').each(function () {
                $(this).val($('#longlongdms').val());
            });
            data.context.find('.token').each(function () {
                $(this).val(getUrlVars()['toktok']);
            });
            data.context.find('.cascade').each(function () {
                $(this).val(getUrlVars()['cid']);
            });

So a related, but less crucial question is, how do I correctly assign the exif data to each respective image when adding multiple photos at once? I haven't spent a week on this part yet, so I may be able to piece it together.

Thanks for any assistance!!
- Erik

[Saulo De Carlo]

Hi Erik,

Can you send me a example of your code. 

I can't assign the GPS values into formData.

I tryed something like this:

    $('#fileupload').fileupload({

        change: function (e, data) {

            $.each(data.files, function (index, file) {

                 EXIF.getData(file, function() {

                    var long = EXIF.getTag(this, 'GPSLongitude');

                    var longDecimal = toDecimal(long);

                    $("#longDecimal["+index+"]").val(longDecimal);

                });               

            });

        }

    });