Création d'un plugin pour du drag and drop upload

Bonjour,

Je suis en train de créer une zone d'administration via Laravel. Je me suis lancé dans la création d'un système d'upload de fichier par drag and drop.

Ce que je fais

J'ai suivi le tutoriel que notre cher @Grafikart avait fait il y a quelques temps (https://www.grafikart.fr/tutoriels/upload-drop-172) . Donc, voici mon code source jquery que je met ici pour voir votre avis et que vous m'aidiez à le terminer.

//Code jquery
(function($){

    //Tableau des options
    var option = {
        limit: 1,
        message:  'Glissez votre fichier ici',
        message2: 'Relachez votre fichier',
        script: 'upload.php',
        csrf: '',
        progressbar: '.progression'
    }

    $.fn.dropfile = function(option){
        //Listage des div qui serviront à l'uploads
        this.each(function(oo){
            if(oo) $.extend(option, oo);
            $('<span>').append(option.message).appendTo(this);
            $(this).bind({
                dragenter: function(e){
                    //e.stopPropagation();
                    e.preventDefault();
                    $(this).text(option.message2).addClass('border-upload_hover');
                },
                dragover: function(e){
                    //e.stopPropagation();
                    e.preventDefault();
                    $(this).text(option.message2).addClass('border-upload_hover');
                },
                dragleave: function(e){
                    //e.stopPropagation();
                    e.preventDefault();
                    $(this).text(option.message).removeClass('border-upload_hover');
                },
            });
            this.addEventListener(
                'drop',
                function(e){
                    e.preventDefault();
                    files = e.dataTransfer.files;
                    if(option.limit >= files.length)
                    {
                        for(var i= 0; i < files.length; i++)
                        {
                            progressbar(option, 'file'+i);
                            var fd = new FormData();
                            fd.append('file', files[i]);
                            uploadData(fd, 'file'+i);
                        };
                        console.log('fini')
                    }
                    else
                    {
                        $(this).text(option.message).removeClass('border-upload_hover');
                        $(".error").html(
                            "<div class=\"sufee-alert alert with-close alert-danger alert-dismissible fade show\">" +
                            "<span class=\"badge badge-pill badge-danger\">Erreur</span>" +
                            "Vous êtes limité à " + option.limit + " fichiers" +
                            "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">" +
                            "<span aria-hidden=\"true\">×</span>" +
                            "</button>" +
                            "</div>");
                    }
                },
                false);
        });
        function progressbar(option, div){
            var $structure = '<div class="row">\n' +
                '<div class="col-md-12">\n' +
                '<div class="progress mb-2">\n' +
                '<div id="progress" class="progress-bar progress-bar-striped bg-success progress-bar-animated ' + div +'" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>\n' +
                '</div>\n' +
                '</div>\n' +
                '</div>';
            $(option.progressbar).append($structure);
        }
        function uploadData(formdata, div){
            $.ajax({
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            $('.'+div).css({width: percentComplete * 100 + '%'}).text(percentComplete.toFixed(2) * 100 + '%');
                        }
                    }, false);
                    xhr.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            $('.'+div).css({width: percentComplete * 100 + '%'}).text(percentComplete.toFixed(2) * 100 + '%');
                        }
                    }, false);
                    return xhr;
                },
                url: option.script,
                headers: {
                    'X-CSRF-TOKEN': option.csrf
                },
                type: 'post',
                data: formdata,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response){
                }
            });
        }
    }
})(jQuery);

Et mon appel à mon plugin:

jQuery(function ($) {
           $("#uploadfile").dropfile({
               limit: 99,
               message:  'Glissez votre fichier ici',
               message2: 'Relachez votre fichier',
               csrf: $('meta[name="csrf-token"]').attr('content'),
               script: '{{ route('Admin.Profile.PostsUploads') }}',
               progressbar: '.progression'
           })
        });

Et enfin ma structure html pour que cela fonctionne (structure basé sur bootstrap).

<div class="col-md-11">
    <div class="error">
    </div>
    <input type="file" name="file" id="file">
    <div class="border-upload text-center align-middle dragandrop-profile upload-area" id="uploadfile">
    </div>
    <br />
    <div class="progression"></div>
</div>

Ce que je veux

Mon script fonctionne pour ce qui est de l'upload de fichier. Hors, je pense qu'il y a encore du travail.

• Optimisation du code. Je pense que certains éléments peuvent être améliorer.
• Soucis au niveau de la fusion des options lors de l'appel du plugin et celle par défaut. Si une option est absent dans l'appel, celle par défaut n'est pas prise en compte.
• Détecter la fin d'upload des X images. Exemple, notifier l'ulisateur lorsque ces fichiers sont totalement transmis.
• Ajout d'option tel que la selection en js du type de fichier (qui devra également être vérifier dans le code php).
• Lors d'un clic dans cette dropzone, avoir la possibilité de sélectionner et donc d''uploader les fichiers de notre choix.

Ce que j'attend

Ce que j'attend est très simple, votre avis, vos remarques et votre aide pour les derniers points qui me sont encore un peu flou.

Amicalement