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>
        <!-- Estilo uniforme con Eliminar / Ver -->
        <a class="dz-download dz-remove" href="javascript:void(0);" style="text-align:center;">Descargar</a>        
        <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.btnDownloadFiles = $(`#${domElement.replace('#', '')}_btnDownloadFiles`);
        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.btnDownloadFiles.on('click', this._handleDownloadFiles.bind(this))

            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) {
            // Botón Ver
            const viewButton = Dropzone.createElement("<a class='dz-remove' style='text-align:center;'>Ver</a>");
            file.previewElement.appendChild(viewButton);
            viewButton.addEventListener("click", this.onViewButton.bind(this, file));

            // Botón Descargar
            const downloadButton = Dropzone.createElement("<a class='dz-download dz-remove' style='text-align:center;'>Descargar</a>");
            file.previewElement.appendChild(downloadButton);
            downloadButton.addEventListener("click", () => {
                const fileUrl = `${window.location.protocol}//${window.location.host}/sistema/intranet/${this.resourcePath}/${file.hash}`;
                const a = document.createElement("a");
                a.href = fileUrl;
                a.download = file.name;
                document.body.appendChild(a);
                a.click();
                a.remove();
            });
        }
    }

    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')
        }
    }

    _handleDownloadFiles() {
        $("#loader").modal('show');

        $.ajax({
            url: `/presupuestoadmin/download_zip`,
            type: 'POST',
            data: {
                [this.nameId]: this.modelId
            },
            xhrFields: {
                responseType: 'blob'
            },
            success: (blob, status, xhr) => {
                const disposition = xhr.getResponseHeader('Content-Disposition');
                let filename = "archivos.zip";
                if (disposition && disposition.indexOf('attachment') !== -1) {
                    const match = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition);
                    if (match != null && match[1]) {
                        filename = match[1].replace(/['"]/g, '');
                    }
                }

                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            },
            error: () => {
                alertWarningMessage("Error al descargar el archivo ZIP.");
            },
            complete: () => {
                $("#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;