Implementation mediainfo.js with dropzone on success

Question

I would like to use this javascript: https://github.com/buzz/mediainfo.js

I want to implement in the Dropzone success event a call to the functions present in mediainfo.js

var varFunc_Dropzone = function () {

    var dzone_upload_show_poster = function () {

        $('#dzone_poster').dropzone({

            url: "../../assets/system/sys_upload_manager.php",
            method: "POST",
            paramName: "file",
            acceptedFiles: "image/*",
            maxFiles: 1,
            maxFilesize: 1, // MB
            uploadMultiple: false,
            thumbnailWidth: null,
            thumbnailHeight: null,
            addRemoveLinks: true,
            timeout: 180000,
            dictRemoveFileConfirmation: "Sicuro?",
            dictFileTooBig: "File grande ({{filesize}}mb). Massimo consentito {{maxFilesize}}mb",
            dictInvalidFileType: "Tipo di file non valido",
            dictCancelUpload: "Cancella",
            dictRemoveFile: "Rimuovi",
            dictMaxFilesExceeded: "Sono consentiti un massimo di {{maxFiles}} file",
            dictDefaultMessage: "Trascina il file qui per effettuare Upload",

            success: function(file, done) {

// implement the trigger here for request  MediaInfo with mediainfo.js

// I try:

                    // get_file_info(MediaInfo({ format: 'text' }, {file}));
                    // var xFile = MediaInfo({ format: 'text' }, (mediainfo) => {file});
                    // var xFile = MediaInfo({ format: 'text' }, (mediainfo) => onChangeFile(file));

            }

        });

    }

    return {
        init: function() {

            dzone_upload_show_poster();
        }
    };
}();

KTUtil.ready(function() { varFunc_Dropzone.init(); });

Thank you! I hope you will be able to help me!!!

score 2 · Answer 1 · answered Mar 18 '21 at 12:50

You are sending the dropzone files to this endpoint: "../../assets/system/sys_upload_manager.php"

That may not be what you want. mediainfo.js processes files in the user's browser not in the server. If you want to process media files on the server you need to handle that in your receiving PHP script. If you plan to process them inside the browser you can't use the success event handler. From the Dropzone.js documentation:

The file has been uploaded successfully. Gets the server response as second argument. (Source)

To prevent Dropzone from uploading files automatically, you can set autoProcessQueue to false as described in this answer.

You could then handle the event addedfile which gives you a File object to work with.

There's a simple example how to use mediainfo.js with File objects.

Disclaimer: I'm the author of mediainfo.js.

Implementation mediainfo.js with dropzone on success

1 Answers1