README

在控制器中使用特性："FileRequestHelper"
在模型中使用特性："Fileable"

将此HTML片段添加到表单中，放置在表单标签之外，您可以传递表单id

<button data-modal-open="laptop-modal" role="button" class="btn-primary mb-3">{{ __('admin.open_gallery') }}</button>
<x-input-file-selector :files="$laptop->files" gallery-id="laptop-create-gallery" container-element-id="laptop-form-images" input-name="laptop_images" form="laptop-form" modal-name="laptop-modal" />

或者当您不希望它在表单内但要在一页上静态显示时，您可以使用livewire标签

 @livewire('media-library')

php artisan vendor:publish --tag=laravel-media-library
php artisan migrate

添加stackable-modals.js
添加medialibrary.js
添加stackable-modals.css 这些文件列在下面

这些都可以用作延迟加载，此包使用livewire，所以请在head中添加@livewireScripts和@livewireStyles。安装Fontawesome以添加图标，并安装jquery

别忘了storage:link和chmod -R 777 storage/

您可以按如下方式保存文件

$laptop->files()->sync($this->getFilesInOrder($request->laptop_images));

要检索文件或图片，请使用以下代码

$laptop->files();
$laptop->images();

stackable-modal.js

let activeModals = [];
let modalOpenButtons = document.querySelectorAll('[data-modal-open]');
let modalCloseButtons = document.querySelectorAll('[data-modal-close]');
let modalBackdrops = document.querySelectorAll('[data-modal-backdrop]');

modalOpenButtons.forEach(el => {
    el.addEventListener('click', function () {
        openModal(el.getAttribute('data-modal-open'));
    });
});
[...modalCloseButtons, ...modalBackdrops].forEach(el => {
    el.addEventListener('click', function () {
        modalClose();
    });
});

function openModal(modalId) {
    const modal = document.getElementById(modalId);
    const backdrop = document.querySelector(`[data-modal-backdrop="${modalId}"]`);

    activeModals.push(modal);

    backdrop.style.display = 'inline-block';
    modal.style.display = 'inline-block';
    modal.style.animationName = 'modalOpen';
    modal.style.animationDuration = '.2s';
    modal.style.animationFillMode = 'both';
}

function modalClose() {
    const modal = activeModals[activeModals.length -1];
    const backdrop = document.querySelector(`[data-modal-backdrop="${modal.id}"]`);

    activeModals.pop();

    backdrop.style.display = 'none';
    modal.style.animationName = 'modalClose';
    modal.style.animationDuration = '.2s';
    modal.style.animationFillMode = 'both';
    setTimeout(() => {
        modal.style.display = 'none';
    }, 200);
}

//    livewire events
Livewire.on('openEditModal', function() {
    openModal('edit-file-modal');
})
Livewire.on('openDeleteModal', function() {
    openModal('delete-file-modal');
})
Livewire.on('closeModal', function() {
    modalClose();
})

medialibrary.js

let $chkboxes = $('.chkbox');
let lastChecked = null;

constructFileGalleryCheckboxes = function () {
    $chkboxes = $('.chkbox');
    deselectAll();
}

deselectAll = function () {
    $chkboxes.each(function () {
        $(this).prop("checked", false);
    });
    highLightCheckBoxLabels();
}

chkboxClick = function(e, box) {
    if (!lastChecked) {
        lastChecked = box;
        highLightCheckBoxLabels();
        return;
    }

    if (e.shiftKey) {
        const start = $chkboxes.index(box);
        const end = $chkboxes.index(lastChecked);

        $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', lastChecked.checked);
    }

    lastChecked = box;
    highLightCheckBoxLabels();
};

function highLightCheckBoxLabels() {
    $chkboxes.each(function () {
        if ($(this).is(":checked")) {
            $(this).next().addClass('highlight');
        } else {
            $(this).next().removeClass('highlight');
        }
    })
}

stackablemodal.css

.modal-backdrop {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 100%;
}

.modal {
    width: 250px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: none;
    border: white 1px solid;
}

@keyframes modalOpen {
    0%   {
        top: calc(50% - 100px);
        opacity: 0;
    }
    100% {
        opacity: 1;
        left: 50%;
        top: 50%;
    }
}
@keyframes modalClose {
    0%   {
        opacity: 1;
        left: 50%;
        top: 50%;
    }
    100% {
        top: calc(50% - 100px);
        opacity: 0;
    }
}