PHPackages                             mhshagor/file-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. mhshagor/file-picker

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

mhshagor/file-picker
====================

File Picker - Beautiful file picker for managing image/files

1.0.9(2mo ago)0131MITHTML

Since Mar 4Pushed 2mo agoCompare

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

READMEChangelogDependenciesVersions (6)Used By (1)

File Picker for Laravel
=======================

[](#file-picker-for-laravel)

A beautiful and customizable image picker component for Laravel applications with drag-and-drop support, multiple preview types, and file validation.

Features
--------

[](#features)

- 🖼️ **Drag & Drop Support** - Intuitive file upload interface
- 📱 **Responsive Design** - Works on all device sizes
- 🎨 **Multiple Preview Types** - Grid, list, thumbnail, dropdown, and file views
- ✅ **File Validation** - Built-in size and type validation
- 🔄 **Multiple Files** - Support for single or multiple file uploads
- 🎯 **Easy Integration** - Simple Blade component usage
- 📦 **Zero Dependencies** - Pure JavaScript, no external libraries required

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

[](#installation)

### 1. Install the package

[](#1-install-the-package)

```
composer require mhshagor/file-picker:dev-main
# or
composer require mhshagor/file-picker
```

If you are not using Laravel, you do not need Composer. Use the standalone instructions below.

### 2. Publish the assets

[](#2-publish-the-assets)

```
php artisan vendor:publish --tag=file-picker
```

### 3. Add to your app.js

[](#3-add-to-your-appjs)

Add this line to your `resources/js/app.js`:

```
import "./sgd/file-picker.js";
```

### Add to your app.css

[](#add-to-your-appcss)

Add this line to your `resources/css/app.css`:

```
@import "./sgd/file-picker.css";
```

### 4. Compile your assets

[](#4-compile-your-assets)

```
npm run dev
# or
npm run build
```

Usage
-----

[](#usage)

### Basic Usage

[](#basic-usage)

```

```

### Advanced Usage

[](#advanced-usage)

```

```

Standalone HTML/JS Usage (No Laravel)
-------------------------------------

[](#standalone-htmljs-usage-no-laravel)

Copy these files from the package into your project and include them in your HTML:

- **CSS**: `/vendor/mhshagor/file-picker/asset/css/file-picker.css -> public/css/file-picker.css`
- **JS**: `/vendor/mhshagor/file-picker/asset/js/file-picker.js -> public/js/file-picker.js`
- **Demo HTML**: `/vendor/mhshagor/file-picker/asset/demo/file-picker.html -> ./file-picker.html`

Then use:

- **CSS**: `public/css/file-picker.css`
- **JS**: `public/js/file-picker.js`

Example:

```

```

Parameters
----------

[](#parameters)

ParameterTypeDefaultDescription`name`stringrequiredInput field name`id`string(auto-generated)Input field ID`label`stringemptyDisplay label for the field`multiple`booleanfalseAllow multiple file selection`max`number2Maximum file size in MB`type`string'image'Accept 'image' or 'file'`preview`booleantrueShow file preview`previewType`string'grid'Preview style: 'grid', 'list', 'file', 'thumbnail', 'dropdown'`required`booleanfalseMake field required`class`stringemptyAdditional CSS classes`labelClass`stringemptyAdditional CSS classes for labelPreview Types
-------------

[](#preview-types)

### Profile Preview

[](#profile-preview)

```
preview-type="profile"
```

Shows a circular profile picture preview.

### Grid Preview

[](#grid-preview)

```
preview-type="grid"
```

Shows files in a responsive grid layout with thumbnails.

### List Preview

[](#list-preview)

```
preview-type="list"
```

Displays files in a vertical list with thumbnails and filenames.

### Thumbnail Preview

[](#thumbnail-preview)

```
preview-type="thumbnail"
```

Shows small thumbnails in a compact horizontal layout.

### File Preview

[](#file-preview)

```
preview-type="file"
```

Displays files as downloadable links.

### Dropdown Preview

[](#dropdown-preview)

```
preview-type="dropdown"
```

Shows a dropdown with file count and list when clicked.

File Validation
---------------

[](#file-validation)

The component includes built-in validation:

- **File Type Validation**: Automatically validates file types based on the `type` parameter
- **Size Validation**: Validates file size against the `max` parameter
- **Error Messages**: User-friendly error messages with auto-dismiss

Styling
-------

[](#styling)

The component uses Tailwind CSS classes and includes:

- `base-input` - Base input styling
- `base-label` - Base label styling
- Responsive design classes
- Hover and focus states
- Error state styling

You can customize the appearance by:

1. Overriding the CSS classes
2. Adding custom classes via the `class` parameter
3. Modifying the published Blade component

Form Integration
----------------

[](#form-integration)

The component integrates seamlessly with Laravel forms:

```

    @csrf

    Submit

```

Error Handling
--------------

[](#error-handling)

The component automatically displays Laravel validation errors:

```
@error('avatar')
    {{ $message }}
@enderror
```

File Processing
---------------

[](#file-processing)

In your controller, handle the uploaded files:

```
public function store(Request $request)
{
    $request->validate([
        'avatar' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
        'gallery_images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048'
    ]);

    if ($request->hasFile('avatar')) {
        $file = $request->file('avatar');
        $path = $file->store('avatars', 'public');
        // Save path to database
    }

    if ($request->hasFile('gallery_images')) {
        foreach ($request->file('gallery_images') as $file) {
            $path = $file->store('gallery', 'public');
            // Save path to database
        }
    }
}
```

Customization
-------------

[](#customization)

### Custom Component Location

[](#custom-component-location)

If you want to customize the component, you can modify the published files:

- **Views**: `resources/views/components/sgd/form/file-picker.blade.php`
- **JavaScript**: `resources/js/sqd/file-picker.js`

### Custom Styling

[](#custom-styling)

Add custom CSS to override default styles:

```
.file-picker .base-input {
    /* Custom input styling */
}

.file-picker .base-label {
    /* Custom label styling */
}
```

Browser Support
---------------

[](#browser-support)

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

Contributing
------------

[](#contributing)

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License
-------

[](#license)

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

Support
-------

[](#support)

For support, please contact [mhshagor](mailto:srq001100@gmail.com).

---

**Made with ❤️ for the Laravel community**

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance87

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity37

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.

###  Release Activity

Cadence

Every ~1 days

Total

4

Last Release

62d ago

### Community

Maintainers

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

---

Top Contributors

[![mhshagor](https://avatars.githubusercontent.com/u/75138610?v=4)](https://github.com/mhshagor "mhshagor (34 commits)")

---

Tags

file-picker

### Embed Badge

![Health badge](/badges/mhshagor-file-picker/health.svg)

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

###  Alternatives

[knplabs/gaufrette

PHP library that provides a filesystem abstraction layer

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

Cloud Storage Client for PHP

34390.8M123](/packages/google-cloud-storage)[illuminate/filesystem

The Illuminate Filesystem package.

15261.6M2.6k](/packages/illuminate-filesystem)[superbalist/flysystem-google-storage

Flysystem adapter for Google Cloud Storage

26320.6M30](/packages/superbalist-flysystem-google-storage)[creocoder/yii2-flysystem

The flysystem extension for the Yii framework

2931.7M61](/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)

PHPackages © 2026

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