jensramakers/laravel-media-library

There is no license information available for the latest version (v1.0.10) of this package.

laravel async media library using livewire

v1.0.10 2022-11-30 10:01 UTC

Requires

• kalnoy/nestedset: ^6.0
• livewire/livewire: ^2.10

Unknown License

• jensramakers

README

in controller use the trait: "FileRequestHelper"
in model use trait: "Fileable"

Add this piece of HTML to a form, place it oustide the form tags, you can pass the form 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" />

or when you dont want it inside of a form but to be static on one page you can you can use the livewire tag

 @livewire('media-library')

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

add stackable-modals.js
add medialibrary.js
add stackable-modals.css THESE FILES ARE LISTED BELOW

These can all be used as defered in the links This package uses livewire so add the @livewireScripts and @livewireStyles in the head And install Fontawesome for the icons And install jquery

and dont forget storage:link and chmod -R 777 storage/

You can save the files like this

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

To retrieve files or images use code below

$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;
    }
}