PHPackages                             msdev2/media-picker - 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. msdev2/media-picker

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

msdev2/media-picker
===================

A simple Laravel media picker (file manager) package with a WYSIWYG editor.

021JavaScript

Since Sep 13Pushed 3mo agoCompare

[ Source](https://github.com/msdev2/media-picker)[ Packagist](https://packagist.org/packages/msdev2/media-picker)[ RSS](/packages/msdev2-media-picker/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

Laravel Media Picker
====================

[](#laravel-media-picker)

A simple, powerful, and modern file manager package for Laravel, inspired by the WordPress media library. This package provides a rich file management interface, a full-featured WYSIWYG editor, and seamless integration for any Laravel project.

### Features

[](#features)

- **File & Folder Management:** Easily navigate, create folders, upload, rename, move, and delete files.
- **Advanced Inline Picker:** A full-featured file manager block with a nested folder tree sidebar and an actions panel for selected files.
- **Powerful Modal Picker:** Trigger a picker from any button to select files. Can be configured with simple data attributes or a global JavaScript event for advanced use cases.
- **WYSIWYG Editor:** A rich text editor component with a full suite of formatting tools, including custom dialogs for links and media. Double-click on media to edit its attributes.
- **Image Resizing:** On-the-fly image resizing and manipulation powered by The PHP League's Glide library.
- **Configurable:** Control allowed file types and max upload sizes via a publishable config file.
- **Modern Build:** Built with a clean, modular JavaScript and SCSS structure using Laravel Mix for optimal performance.

Installation
------------

[](#installation)

This is a step-by-step guide to get the package fully operational in a new or existing Laravel project.

### Step 1: Require the Package via Composer

[](#step-1-require-the-package-via-composer)

First, add the package to your project's dependencies.

```
composer require msdev2/media-picker
```

### Step 2: Publish Package Assets

[](#step-2-publish-package-assets)

This essential command will publish the package's configuration file to your `config` directory, and the compiled CSS and JavaScript to your `public/vendor` directory.

```
php artisan vendor:publish --provider="Msdev2\MediaPicker\MediaPickerServiceProvider" --force
```

### Step 3: Set up Image Resizing (Glide)

[](#step-3-set-up-image-resizing-glide)

This package's image resizing features rely on a self-contained Glide implementation configured in the package's service provider. This makes setup much simpler as you do not need to install or configure a separate Glide package in your main application.

### Step 4: Create the Storage Symlink

[](#step-4-create-the-storage-symlink)

To ensure that files uploaded to `storage/app/public` are publicly accessible, you must create the storage symlink.

```
php artisan storage:link
```

If you have already run this command for your project, you do not need to do it again.

Configuration
-------------

[](#configuration)

After publishing in Step 2, you can edit the package's configuration file at `config/media-picker.php`.

```
// config/media-picker.php
return [
    // The base directory within your 'public' disk where files will be stored.
    'base_directory' => 'uploads',

    // The maximum file size for a single upload in kilobytes (e.g., 2048 = 2MB).
    'max_upload_size_kb' => 2048,

    // A list of all MIME types that are allowed to be uploaded.
    // It is highly recommended to keep this list as specific as possible for security.
    'allowed_mime_types' => [
        'image/jpeg', 'image/png', 'image/gif', 'video/mp4', 'application/pdf',
    ],
];
```

Usage
-----

[](#usage)

### Step 1: Include Assets in Your Layout

[](#step-1-include-assets-in-your-layout)

Before using any components, you must include the package's assets and a CSRF token in your main Blade layout file.

```

>

    @yield('content')

```

### Use Case 1: Inline File Manager

[](#use-case-1-inline-file-manager)

To display the full file manager directly on a page, use the Blade component with the `:inline="true"` attribute.

```
My Media Library

```

### Use Case 2: Modal Picker Button (The Easy Way)

[](#use-case-2-modal-picker-button-the-easy-way)

This is the recommended method for most situations. The package's JavaScript will automatically handle updating the target element. **No custom JS is required.**

Add the `ms-media-picker` class and two data attributes:

- `data-target-selector`: A CSS selector for the element to update (e.g., `#my-id`, `.my-class`).
- `data-target-type`: How to update the element (`input`, `image`, or `html`).

**Example: Update an Input Field's Value**if data-target-preview then image id we have to pass and if "data-target-preview"+\_preview div exist then auto set display:inline-block

```

Featured Image URL

    Choose Image

```

**Example: Update an Image's `src`**

```

    Change Picture

```

### Use Case 3: Modal Picker Button (The Advanced Way)

[](#use-case-3-modal-picker-button-the-advanced-way)

For complex or custom logic, listen for the global `ms-media-file-selected` event. This is the most flexible method and allows you to handle multiple, different picker buttons on a single page.

The key is to use the `event.detail.triggerElement` to identify which button opened the modal.

**1. The HTML: Define Multiple Buttons with Unique IDs**

```

    Change Profile Picture

Featured Image URL:

    Set Featured Image

```

**2. The JavaScript: Create One Smart Event Listener**

In your main application's JavaScript, create a single listener that checks the ID of the trigger element and routes the logic accordingly.

```
document.addEventListener('ms-media-file-selected', (event) => {
    // Get the selected file object from the event payload
    const file = event.detail.file;

    // Get the button element that triggered the modal
    const trigger = event.detail.triggerElement;

    // Use the trigger's ID to decide what action to perform
    if (trigger.id === 'profile-pic-btn') {
        // Logic for the profile picture button
        const profileImage = document.getElementById('profile-preview');
        if (profileImage) {
            profileImage.src = file.url;
        }
    }
    else if (trigger.id === 'featured-image-btn') {
        // Logic for the featured image button
        const featuredImageInput = document.getElementById('featured-image-input');
        if (featuredImageInput) {
            featuredImageInput.value = file.url;
        }
    }
});
```

The `file` object contains `name`, `url` (the public URL), `path`, `size`, and `is_image`. This event-driven approach gives you full control to integrate the media picker anywhere in your application.

### Use Case 4: The WYSIWYG Editor

[](#use-case-4-the-wysiwyg-editor)

Use the `x-ms-media-editor` component for a full-featured rich text editor.

**Basic Usage:**

```

```

**Advanced Usage with Default Content:**

```
@php
    $existingContent = 'Hello WorldThis is some default content.';
@endphp

```

```
@php
    $existingContent = 'Hello WorldThis is some default content.';
@endphp

        {!! $existingContent !!}

```

The editor features a full toolbar, including custom dialogs for inserting/editing links and media. Double-clicking an image or video in the editor will open the edit dialog.

**Listening for Editor Content Changes:**

The editor dispatches a custom event whenever content changes, allowing you to react to updates in real-time:

```
document.querySelector('.ms-media-editor').addEventListener('ms-editor-content-changed', (event) => {
    const { content, plainText, codeView } = event.detail;

    console.log('HTML content:', content);
    console.log('Plain text:', plainText);
    console.log('Code view active:', codeView);

    // Your custom logic here
});
```

Also get complete editor object using window.MSSEditor The event provides:

- `content`: Full HTML content of the editor
- `plainText`: Plain text without HTML tags
- `codeView`: Boolean indicating if code view is currently active

Image Resizing (Glide)
----------------------

[](#image-resizing-glide)

The package includes routes for on-the-fly image resizing. You can get resized versions of any image by manipulating the URL structure.

- **Base URL:** `http://your-app.com/storage/uploads/folder/image.jpg`
- **Glide Resize URL:** `http://your-app.com/uploads/folder/300/200/image.jpg` (300px wide, 200px high crop)
- **Auto Width:** `http://your-app.com/uploads/folder/w/200/image.jpg` (200px high, auto width)
- **Auto Height:** `http://your-app.com/uploads/folder/300/h/image.jpg` (300px wide, auto height)

Development & Customization (Optional)
------------------------------------------

[](#development--customization-optional)

This package uses Laravel Mix for asset compilation. If you wish to modify the JavaScript or SCSS source files, you must have a compatible Node.js environment (LTS versions like 18.x are recommended).

1. Navigate to the package's root directory: `cd vendor/msdev2/media-picker`
2. Install NPM dependencies: `npm install`
3. Run the development build: `npm run dev` or `npm run watch`
4. Run the production build (minified): `npm run prod`

The source files are located in `src/resources/assets`, and the compiled output is placed in the `dist` folder.

License
-------

[](#license)

This package is open-source software licensed under the [MIT license](LICENSE).

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance53

Moderate activity, may be stable

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity15

Early-stage or recently created project

 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/9dbae5c28bfd51a5759d466c8c43622f8b6c0239d460ad96b6d338400336240b?d=identicon)[mraganksoni](/maintainers/mraganksoni)

---

Top Contributors

[![msdev2](https://avatars.githubusercontent.com/u/46561871?v=4)](https://github.com/msdev2 "msdev2 (20 commits)")

### Embed Badge

![Health badge](/badges/msdev2-media-picker/health.svg)

```
[![Health](https://phpackages.com/badges/msdev2-media-picker/health.svg)](https://phpackages.com/packages/msdev2-media-picker)
```

###  Alternatives

[knplabs/gaufrette

PHP library that provides a filesystem abstraction layer

2.5k39.8M123](/packages/knplabs-gaufrette)[superbalist/flysystem-google-storage

Flysystem adapter for Google Cloud Storage

26320.6M30](/packages/superbalist-flysystem-google-storage)[illuminate/filesystem

The Illuminate Filesystem package.

15161.6M2.6k](/packages/illuminate-filesystem)[creocoder/yii2-flysystem

The flysystem extension for the Yii framework

2931.7M62](/packages/creocoder-yii2-flysystem)[flowjs/flow-php-server

PHP library for handling chunk uploads. Works with flow.js html5 file uploads.

2451.6M15](/packages/flowjs-flow-php-server)[madnest/madzipper

Easier zip file handling for Laravel applications.

1382.3M6](/packages/madnest-madzipper)

PHPackages © 2026

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