How can I use EXIF data in onbeforeupload event

Transloadit
1

I have created custom EXIF plugins like Compressor
And now I am trying to get Exif data in onbeforeupload event it’s undefined
Because the onbeforeupload event executed before EXIF data plugin
I know this case just because when I console the file it has EXIF data,
I have added the EXIF data plugin

`var Translator = require('@uppy/utils/lib/Translator');

var Compressor = require('compressorjs/dist/compressor.common.js');

var Exif = require("exif-js");

var UppyExifData =
/*#__PURE__*/
function (_Plugin) {
  inheritsLoose(UppyExifData, Plugin);

  function UppyExifData(uppy, opts) {
    var _this;

    this = Plugin.call(this, uppy, opts) || this;
    this.id = this.opts.id || 'ImageExif';
    _this.type = 'modifier';
    _this.defaultLocale = {
      strings: {
        exifImages: 'Geting EXIF data from images...'
      }
    };
    var defaultOptions = {
      quality: 0.6
    };
    this.opts = extends({}, defaultOptions, opts); // we use those internally in `this.compress`, so they
    // should not be overriden

    delete _this.opts.success;
    delete _this.opts.error;

    _this.i18nInit();

    this.prepareUpload = this.prepareUpload.bind(_assertThisInitialized(_this));
    this.exifdata = this.exifdata.bind(_assertThisInitialized(_this));
    return _this;
  }

  var _proto = UppyExifData.prototype;

  _proto.setOptions = function setOptions(newOpts) {
    _Plugin.prototype.setOptions.call(this, newOpts);

    this.i18nInit();
  };

  _proto.i18nInit = function i18nInit() {
    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale]);
    this.i18n = this.translator.translate.bind(this.translator);
    this.setPluginState(); // so that UI re-renders and we see the updated locale
  };

  _proto.exifdata = function exifdata(blob) {
    var _this2 = this;
	return new Promise((resolve, reject) => {
	  return new Exif.getData(blob, function(){
	      global_simpletext = blob.exifdata.DateTime;
        console.log(blob);
        console.log(global_simpletext);
        return resolve(blob);
    })
    })
  };

  _proto.prepareUpload = function prepareUpload(fileIDs) {
    var _this3 = this;

    var promises = fileIDs.map(function (fileID) {
      var file = _this3.uppy.getFile(fileID);

      _this3.uppy.emit('preprocess-progress', file, {
        mode: 'indeterminate',
        message: _this3.i18n('exifImages')
      });

      if (file.type.split('/')[0] !== 'image') {
        return;
      }

      return _this3.exifdata(file.data).then(function (compressedBlob) {
        _this3.uppy.log("[Image exif] Image " + file.id);

        _this3.uppy.setFileState(fileID, {
          data: compressedBlob
        });
        this.emit('reset-progress');
      })["catch"](function (err) {
        _this3.uppy.log("[Image exif] Failed to exifdata " + file.id + ":", 'warning');

        _this3.uppy.log(err, 'warning');
      });
    });

    var emitPreprocessCompleteForAll = function emitPreprocessCompleteForAll() {
      fileIDs.forEach(function (fileID) {
        var file = _this3.uppy.getFile(fileID);

        _this3.uppy.emit('preprocess-complete', file);
      });
    }; // Why emit `preprocess-complete` for all files at once, instead of
    // above when each is processed?
    // Because it leads to StatusBar showing a weird “upload 6 files” button,
    // while waiting for all the files to complete pre-processing.


    return Promise.all(promises).then(emitPreprocessCompleteForAll);
  };

  _proto.install = function install() {
    this.uppy.addPreProcessor(this.prepareUpload);
  };

  _proto.uninstall = function uninstall() {
    this.uppy.removePreProcessor(this.prepareUpload);
  };

  return UppyExifData;
}(Plugin);

module.exports = UppyExifData;

you can see that I have added the console screenshot

image_2022_11_29T05_00_57_008Z
image_2022_11_29T05_00_57_008Z1207×421 68.5 KB

Will you please guide me on how can I get this EXIF data in uppy events (onbeforefileadded, onbeforefileupload)?

Your friend
Preetam

2

Hi, this issue is duplicated twice in our GitHub repository.

References are here: Before file upload, resize the file or client side resize image · Issue #2886 · transloadit/uppy · GitHub

3

Hi, have you tried setting EXIF as meta data via uppy.setFileMeta(fileID, data) and then passing that to Transloadit via fields? Then that metadata should be available in your assemby instructions as ${fields.YOUR_EXIF} as per docs here: Assembly Instructions | Transloadit Docs.

Do I understand correctly that you don’t need onBeforeUpload per se, you just want that exif info available for your Transloadit assemblies?