jQuery Media Library

Responsive Grid

Beautiful thumbnail grid that adapts from 6 columns on desktop to 2 on mobile. Lazy-loaded images.

Search & Filter

Search by filename with 300ms debounce. Filter by folder tabs. Paginated results.

Single or Multi-Select

Toggle between single and multiple file selection with one option.

Auto Uploader Hook

Automatically adds a "Media Library" button to any jQuery file uploader. Zero config.

Backend Agnostic

Works with PHP, Node.js, Python, Go — anything that returns JSON. Examples included.

~10KB Minified

Single JS file with CSS injected. No extra dependencies beyond jQuery + Bootstrap 5.

Single File Select

Click the button to open the modal and select one file.

No file selected — click the button above

MediaLibrary.open({
    onSelect: function (files) {
        console.log('Selected:', files[0].url);
    }
});

Multiple File Select

Select multiple files at once. Click files to toggle selection.

No files selected

MediaLibrary.open({
    multiple: true,
    onSelect: function (files) {
        // files = [{ url, name }, { url, name }, ...]
        files.forEach(f => console.log(f.url));
    }
});

Pre-filtered by Folder

Open the modal with a specific folder pre-selected.

No file selected

MediaLibrary.open({
    folder: 'products',
    onSelect: function (files) {
        console.log(files[0].url);
    }
});

Quick Start — 3 Lines of Code

html

<!-- 1. Add after jQuery + Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/jquery-media-library/dist/media-library.min.js"></script>

<script>
// 2. Set your API endpoint
MediaLibrary.defaults.apiUrl = '/api/media-list';

// 3. Open the modal
$('#btn').on('click', function () {
    MediaLibrary.open({
        multiple: true,
        onSelect: function (files) {
            console.log(files);
        }
    });
});
</script>