PHPackages                             webzille/filemanager - 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. webzille/filemanager

ActiveLibrary

webzille/filemanager
====================

Filemanager for laravel

071Blade

Since Mar 2Pushed 2y ago1 watchersCompare

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

READMEChangelogDependenciesVersions (1)Used By (0)

This is a filemanager curated for laravel.
------------------------------------------

[](#this-is-a-filemanager-curated-for-laravel)

In the meantime it is using the `File` facade for all files operation, which means it doesn't use the `disk()`. It is planned to be switched over to the `storage()` facade to enable integration with AWS as well as making the filemanager more configurable.

The features it currently has:

- Upload single file VIA upload form
- Upload multiple files VIA drag/drop
- Rename files
- Move files
- Delete files
- Create new directories
- Rename directories
- Move directories
- Delete directories (and the files in the directories)
- Download files from filemanager to your pc
- Previewing images

At the moment there are no validation on uploading the files and no config files...

Many other features are planned... this is a dev version.

> composer require webzille/filemanager

After requiring the package, you need to create a symbolic link to where the filemanager will upload the files to

> php artisan storage:link

And the public files needs to be published to load the CSS files

> php artisan vendor:publish --tag=filemanager\_public

Below are the instructions to implement the filemanager with SimpleMDE, but you can use the filemanager with any editor of your choice. Only differences would be are how you add a custom button to the editor and how you append the generated markdown/html to the editor.

In SimpleMDE, in your list of buttons, you would create a custom button which would open the filemanager and pass the selected files (images) to a function that generates the markdown/

```
{
    name: "internal-image",
    action: function openFileManager(editor) {
        fileManagerWindow('image').then(function(selectedFiles) {
            var markdownContent = generateMarkdown(selectedFiles);

            editor.codemirror.replaceSelection(markdownContent);
        });
    },
    className: "fa fa-file",
    title: "File Manager",
},
```

The `fileManagerWindow(arg)` is the function that opens the filemanager in a new window and sets the environment to `image` (or whatever else is passed to it).

```
function fileManagerWindow(type) {
    var fileManagerRoute = '{{ route('filemanager', ':type') }}';
    var fileManagerWindow = window.open(
        fileManagerRoute.replace(':type', type),
        'FileManager',
        'resizable=true,scrollbars=true,fullscreen=true'
    );

    return new Promise(function(resolve, reject) {
        window.addEventListener('beforeunload', function() {
            var selectedFiles = fileManagerWindow.selectedFiles;
            resolve(selectedFiles);
        });

        window.addEventListener('message', function(event) {
            if (event.source === fileManagerWindow) {
                var selectedFiles = event.data;
                resolve(selectedFiles);
            }
        });
    });
}
```

And the function to generate the markdown that the custom button invokes is:

```
function generateMarkdown(selectedFiles) {
    var markdownContent = selectedFiles.map(function(file) {
        return '![' + file + '](' + file + ')';
    }).join('\n');

    return markdownContent;
}
```

It is possible to use this filemanager outside of an editor by adding an event listener to a button/input field or whatever else you may desire and handling the returned file. Here is an example to set an image preview in an element by setting an event listener to an input text field with an id of 'post-image'.

```
const postImage = document.getElementById('post-image');

// Attach event listener for click and focus events
postImage.addEventListener('click', handleImageSelection);
postImage.addEventListener('focus', handleImageSelection);

function handleImageSelection() {
    fileManagerWindow('image').then(function(selectedFiles) {
        // We only use one image for the post. Using the first regardless of how many images returned.
        setImagePreview(selectedFiles[0]);
    });

    postImage.blur();
}

function setImagePreview(image) {
    postImage.value = image;

    // The DIV the image will be set as a background image to.
    const postImagePreview = document.getElementById('post-image-preview');

    postImagePreview.style.visibility = 'visible';
    postImagePreview.style.backgroundImage = 'url(' + image + ')';

    const postImagePreviewClose = document.getElementById('post-image-preview-close');

    postImagePreviewClose.style.visibility = 'visible';
}
```

###  Health Score

13

—

LowBetter than 1% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity19

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/ab4db4a38ff5525340e877186b71c948b29c6a88c9df2d3dbc4b890bedd4b321?d=identicon)[webzille](/maintainers/webzille)

---

Top Contributors

[![webzille](https://avatars.githubusercontent.com/u/153772404?v=4)](https://github.com/webzille "webzille (55 commits)")

### Embed Badge

![Health badge](/badges/webzille-filemanager/health.svg)

```
[![Health](https://phpackages.com/badges/webzille-filemanager/health.svg)](https://phpackages.com/packages/webzille-filemanager)
```

PHPackages © 2026

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