thetool/public/js/pages/TimerecordingCar/Form.js

const fileTypeClasses = {
    'image/png': 'fa-file-png',
    'image/jpeg': 'fa-file-jpg',
    'application/pdf': 'fa-file-pdf',
    'application/zip': 'fa-file-zip',
    'application/x-zip-compressed': 'fa-file-zip',
    'application/octet-stream': 'fa-file-csv',
    'text/csv': 'fa-file-csv',
    'text/xml': 'fa-file-xml',
    'application/xml': 'fa-file-xml',
    'audio/mpeg': 'fa-file-mp3',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'fa-file-doc',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'fa-file-xls',
    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'fa-file-ppt',
    'application/x-rar-compressed': 'fa-file-archive',
    'application/msword': 'fa-file-doc',
    'application/vnd.ms-excel': 'fa-file-xls',
    'application/vnd.ms-powerpoint': 'fa-file-ppt',
    'application/vnd.ms-outlook': 'fa-file-outlook',
    'application/vnd.ms-access': 'fa-file-access',
    'application/vnd.ms-project': 'fa-file-project',
    'application/vnd.ms-visio': 'fa-file-visio',
    'application/vnd.ms-publisher': 'fa-file-publisher',
};
$(".select2").select2({placeholder: ""});

// disable mousewheel on a input number field when in focus
$('form').on('focus', 'input[type=number]', function (e) {
    $(this).on('wheel.disableScroll', function (e) {
        e.preventDefault()
    })
});
$('form').on('blur', 'input[type=number]', function (e) {
    $(this).off('wheel.disableScroll')
});

tinymce.init({
    //font_formats: "Arial=arial,sans-serif;",
    selector: '#description',
    dialog_container: '#EventModal',
    language: 'de',
    branding: false,
    height: 250,
    menubar: false,
    forced_root_block_attrs: {
        style: 'margin:0;'
    },
    skin: "tinymce-5",
    plugins: ' code link autolink lists table',
    paste_block_drop: true,
    paste_as_text: true,
    paste_data_images: false,
    promotion: false,
    toolbar1: 'undo redo | styles | bold italic underline strikethrough | fontfamily fontsize forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | table | link unlink',
    content_css: "/assets/css/tinymce.css",
    content_style: "body { font-family: 'Calibri', sans-serif; }",
    font_family_formats: "Calibri=Calibri, sans-serif;Arial=arial,sans-serif; Courier New=courier new,courier,monospace; Georgia=georgia,palatino,serif; Helvetica=helvetica,sans-serif; Lucida Sans=lucida sans unicode,sans-serif; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times,serif",
    setup: function (editor) {

    }

});
$(document).ready(function () {
    $('#confirmRetire').on('click', function () {
        var retireDate = $('#retireDate').val();

        if (!retireDate) {
            alert("Bitte wählen Sie ein Datum aus.");
            return;
        }
        window.location.href = "<?= self::getUrl('TimerecordingCar', 'retire', ['id' => $timerecordingcars->id]) ?>"
            + "&retired_date=" + encodeURIComponent(retireDate);
    });
    $('body').on('change', '#files-input', function () {
        let fileList = $('#files-input').prop("files");

        $('#uploadsts').html('');
        let i;
        for (i = 0; i < fileList.length; i++) {
            let newkey = $('#attachments').data('newkey');
            const filetype = fileList[i].type;
            const classContentType = fileTypeClasses[filetype] || 'fa-file';
            const today = new Date();
            const day = today.getDate().toString().padStart(2, '0');
            const month = (today.getMonth() + 1).toString().padStart(2, '0');
            const year = today.getFullYear().toString().slice(-2);
            const formattedDate = `${day}.${month}.${year}`;
            // $('#uploadsts').append('<p class="upload-page">' + fileList[i].name + '<span class="loading-prep" id="prog' + i + '"></span></p>');
            $('.attachment-div').append(`<div class="doc-main-div doc-main-div-dev" data-name="` + fileList[i].name + `" ><div class="d-inline-block doc-icon-div"><i class="fa-duotone fa-solid ` + classContentType + `"></i></div>
<div class="d-inline-block doc-content-div doc-content-div-dev" style="margin-left: -3px;"></div>
<span class="float-right"><i title="` + fileList[i].name + `" class="fas fa-trash fa-del-document ml-2"></i></span><span class="float-right ml-1">(` + formattedDate + `)</span><span class="float-right">` + formatFileSize(fileList[i].size) + `</span></div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated pb-` + fileList[i].size + `" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
`);
            if (i == fileList.length - 1) {
                uploadajax(fileList.length - 1, 0);
            }
        }

    });

    $('body').on('click', '.fa-del-document', function () {
        if (confirm('Wollen Sie das Dokument wirklich löschen?')) {
            let id = $(this).closest('.doc-main-div').data('id');
            let doc = $(this).closest('.doc-main-div');
            $.ajax({
                url: requestDocumentDeleteUrl,
                type: 'POST',
                data: {
                    id: id
                },
                success: function (res) {
                    doc.remove();
                }
            });
        }
    });
});

function formatFileSize(bytes) {
    // Wenn die Dateigröße größer als 1 MB ist
    if (bytes >= 1024 * 1024) {
        const megabytes = bytes / (1024 * 1024);
        return megabytes.toFixed(2) + ' MB';
    }
    // Wenn die Dateigröße größer als 1 KB ist
    else if (bytes >= 1024) {
        const kilobytes = bytes / 1024;
        return kilobytes.toFixed(2) + ' KB';
    }
    // Wenn die Dateigröße kleiner als 1 KB ist (also in Bytes)
    else {
        return Math.round(bytes) + ' Bytes';  // Keine Nachkommastellen
    }
}

function uploadajax(ttl, cl) {
    let fileList = $('#files-input').prop("files");
    let form_data = "";

    form_data = new FormData();
    form_data.append("timeRecordingCar", fileList[cl]);
    form_data.append("timerecordingCar_id", $('#id').val());
    form_data.append("file_name", fileList[cl].name);


    let request = $.ajax({
        url: requestDocumentUploadUrl,
        cache: false,
        contentType: false,
        processData: false,
        async: true,
        data: form_data,
        type: 'POST',
        xhr: function () {
            let xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', function (event) {
                    let percent = 0;
                    if (event.lengthComputable) {
                        percent = Math.ceil(event.loaded / event.total * 100);
                    }
                    $('.pb-' + fileList[cl].size).css('width', percent + '%').attr('aria-valuenow', percent);
                }, false);
            }
            return xhr;
        },
        success: function (res, status) {
            if (status == 'success') {
                percent = 0;
                $('.pb-' + fileList[cl].size).closest('.progress').remove();
                try {
                    var jsondecode = JSON.parse(res);
                    $('.doc-content-div-dev').eq(cl).html(`<a href="` + requestDocumentUrl + `&id=` + jsondecode.data.file_id + `" target="_blank">` + fileList[cl].name + `</a>`);
                    $('.doc-main-div-dev').eq(cl).data('id', jsondecode.data.id);
                } catch (e) {
                    $('.doc-main-div-dev').eq(cl).html('<span class="text-danger doc-content-div-dev">Fehler: ' + fileList[cl].name + ' (Dateiendung nicht erlaubt)</span>');

                }

                if (cl < ttl) {
                    uploadajax(ttl, cl + 1);
                } else {
                    $('.doc-content-div-dev').each(function (index, value) {
                        $(this).removeClass('doc-content-div-dev');
                    });
                    $('.doc-main-div-dev').each(function (index, value) {
                        $(this).removeClass('doc-main-div-dev');
                    });

                }


            }
        },
        fail: function (res) {
            alert('Failed');
        }
    })
}