safekat/httpdocs/assets/js/safekat/components/forms/fileUploadDropzone.js

import Ajax from '../ajax.js';
import { alertSuccessMessage } from '../alerts/sweetAlert.js'

const PREVIEW_TEMPLATE = `
<div class="dz-preview dz-file-preview">
    <div class="dz-details">
        <div class="dz-thumbnail">
            <!---<img data-dz-thumbnail>
            <span class="dz-nopreview">No preview</span> --->
            <div class="dz-success-mark"></div>
            <div class="dz-error-mark"></div>
            <div class="dz-error-message"><span data-dz-errormessage></span></div>
            <div class="progress">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
            </div>
        </div>
        <div class="dz-filename" data-dz-name></div>
        <div class="dz-size" data-dz-size></div>
    </div>
</div>
`;
class FileUploadDropzone {


    constructor({ domElement, nameId = "presupuesto_id", getUri = null, postUri = null, resourcePath = "presupuestos" }) {
        Dropzone.autoDiscover = false;
        this.domElement = domElement
        this.jqElement = $(domElement)
        this.modelId = this.jqElement.data('id')
        this.btnSelectFiles = $(`#${domElement.replace('#', '')}_btnUploadFiles`)
        this.btnSubmitFile = $(`#${domElement.replace('#', '')}_btnSubmitFiles`)
        this.dataPost = {}
        this.nameId = nameId;
        this.getUri = getUri
        this.postUri = postUri
        this.dataPost[nameId] = this.modelId;
        this.resourcePath = resourcePath

    }
    init() {
        if (this.jqElement.length > 0) {
            this.btnSubmitFile.on('click', this._handleUploadFiles.bind(this))
            this.btnSelectFiles.on('click', () => {
                this.jqElement.trigger('click')
            })

            this.dropzone = new Dropzone(this.domElement, {
                url: this.postUri,
                addRemoveLinks: true,
                previewTemplate: PREVIEW_TEMPLATE,
                paramName: "file",
                uploadMultiple: true,
                parallelUploads: 4, // Ajusta este número al máximo número de archivos que esperas subir a la vez
                maxFiles: 5, // Ajusta este número al máximo número de archivos que esperas subir a la vez
                autoProcessQueue: true,
                dictRemoveFile: "Eliminar",
                acceptedFiles: 'image/*, application/pdf',
                maxFilesize: 5e+7, // Bytes
                init: this._handleGetFiles.bind(this)
            });
            this.dropzone.on("addedfile", this._handleAddedFile.bind(this));
        }
    }
    _handleAddedFile(file) {
        if (file.hash) {
            var viewButton = Dropzone.createElement("<span class='dz-remove'>Ver</span>");
            file.previewElement.appendChild(viewButton);
            // Listen to the view button click event
            viewButton.addEventListener("click", this.onViewButton.bind(this,file));
        }
    }
    onViewButton(file) {
        console.log(window.location.protocol + "//" + window.location.host + "/sistema/intranet/" + this.resourcePath + "/" + file.hash)
        window.open(window.location.protocol + "//" + window.location.host  + "/sistema/intranet/" + this.resourcePath + "/" + file.hash, '_blank');
    }
    _getDropzoneFilesFormData() {
        var files = this.dropzone.files;

        var formData = new FormData();
        var oldFiles = [];
        var counter = 0;
        for (var i = 0; i < files.length; i++) {

            if (files[i].upload) {
                var file = files[i];
                formData.append('file[]', file);
                counter += 1;
            }
            else {
                oldFiles.push(files[i].name);
            }
        }
        formData.append('oldFiles', JSON.stringify(oldFiles));

        formData.append(this.nameId, this.modelId);
        return formData;
    }
    _handleUploadFiles() {
        $("#loader").modal('show')
        let ajax = new Ajax(this.postUri,
            this._getDropzoneFilesFormData(),
            null,
            this._handleUploadFilesSuccess.bind(this),
            null)
        ajax.ajaxForm("POST");

    }
    _handleUploadFilesSuccess(response) {
        this.dropZoneClean()
        this._handleGetFiles()
        alertSuccessMessage(response?.message ?? "Archivos subidos correctamente");
    }
    _handleUploadFilesError(errors) { }

    _handleGetFiles() {
        const ajax = new Ajax(
            this.getUri,
            this.dataPost,
            null,
            this._handelGetFilesSuccess.bind(this),
            null,

        )
        ajax.post()
    }
    _handelGetFilesSuccess(response) {
        try {
            $("#loader").modal('hide')
            const files = JSON.parse(response)
            this.dropZoneUpdateFiles(files)
        } catch (error) {
            $("#loader").modal('hide')
        }
    }

    dropZoneUpdateFiles(files) {

        files.forEach(file => {
            this.dropZoneAddFile(file)
        });

    }
    dropZoneClean() {
        this.dropzone.files.forEach(file => {
            this.dropzone.removeFile(file);
        })
    }
    dropZoneAddFile(mockFile) {
        this.dropzone.files.push(mockFile);    // add to files array
        this.dropzone.emit("addedfile", mockFile);
        this.dropzone.emit("thumbnail", mockFile, window.location.host + "/sistema/intranet/" + this.resourcePath + "/" + mockFile.hash);
        this.dropzone.emit("complete", mockFile);
        this.dropzone.options.success.call(this.dropzone, mockFile);

    }

}

export default FileUploadDropzone;