PHPackages                             jensramakers/laravel-media-library - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. jensramakers/laravel-media-library

ActiveLibrary[File & Storage](/categories/file-storage)

jensramakers/laravel-media-library
==================================

laravel async media library using livewire

v1.0.10(3y ago)0310Blade

Since Nov 10Pushed 3y ago1 watchersCompare

[ Source](https://github.com/PS222407/laravel-media-library)[ Packagist](https://packagist.org/packages/jensramakers/laravel-media-library)[ RSS](/packages/jensramakers-laravel-media-library/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (10)Dependencies (2)Versions (12)Used By (0)

laravel media library
=====================

[](#laravel-media-library)

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

```
{{ __('admin.open_gallery') }}

```

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
------------------

[](#stackable-modaljs)

```
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
---------------

[](#medialibraryjs)

```
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
------------------

[](#stackablemodalcss)

```
.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;
    }
}
```

###  Health Score

26

—

LowBetter than 40% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~2 days

Total

11

Last Release

1350d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a00f8f2c9d2164380cf71b675887807d39d3db7b1476ca3a99b978519022c2e5?d=identicon)[jensramakers](/maintainers/jensramakers)

---

Top Contributors

[![PS222407](https://avatars.githubusercontent.com/u/74543766?v=4)](https://github.com/PS222407 "PS222407 (19 commits)")

### Embed Badge

![Health badge](/badges/jensramakers-laravel-media-library/health.svg)

```
[![Health](https://phpackages.com/badges/jensramakers-laravel-media-library/health.svg)](https://phpackages.com/packages/jensramakers-laravel-media-library)
```

###  Alternatives

[unopim/unopim

UnoPim Laravel PIM

10.8k2.5k](/packages/unopim-unopim)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

731189.9k16](/packages/tallstackui-tallstackui)[dasundev/livewire-dropzone

A Livewire Dropzone component for simple drag-and-drop file uploads.

228106.7k](/packages/dasundev-livewire-dropzone)[filament/support

Core helper methods and foundation code for all Filament packages.

2333.9M295](/packages/filament-support)[nasirkhan/laravel-starter

A CMS like modular Laravel starter project.

1.4k2.7k](/packages/nasirkhan-laravel-starter)[yajra/laravel-datatables-export

Laravel DataTables Queued Export Plugin.

362.3M4](/packages/yajra-laravel-datatables-export)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)