Download the PHP package mhshagor/file-picker without Composer
On this page you can find all versions of the php package mhshagor/file-picker. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mhshagor/file-picker
More information about mhshagor/file-picker
Files in mhshagor/file-picker
Package file-picker
Short Description File Picker - Beautiful file picker for managing image/files
License MIT
Informations about the package file-picker
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
- 🖼️ 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
1. Install the package
If you are not using Laravel, you do not need Composer. Use the standalone instructions below.
2. Publish Assets
Publish the CSS and JS files to your resources folder:
This will copy files to:
resources/js/vendor/file-picker/file-picker.jsresources/css/vendor/file-picker/file-picker.css
3. Add to your app.js
Add this line to your resources/js/app.js:
4. Add to your app.css
Add this line to your resources/css/app.css:
5. Compile your assets
Usage
Basic Usage
Advanced Usage
Standalone HTML/JS Usage (No Laravel)
Copy these files from the package into your project and include them in your HTML:
- CSS:
/vendor/mhshagor/file-picker/assets/css/file-picker.css -> public/css/file-picker.css - JS:
/vendor/mhshagor/file-picker/assets/js/file-picker.js -> public/js/file-picker.js - Demo HTML:
/vendor/mhshagor/file-picker/assets/demo/file-picker.html -> ./file-picker.html
Then use:
- CSS:
public/css/file-picker.css - JS:
public/js/file-picker.js
Example:
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
name |
string | required | Input field name |
id |
string | (auto-generated) | Input field ID |
label |
string | empty | Display label for the field |
multiple |
boolean | false | Allow multiple file selection |
max |
number | 2 | Maximum file size in MB |
type |
string | 'image' | Accept 'image' or 'file' |
preview |
boolean | true | Show file preview |
previewType |
string | 'grid' | Preview style: 'grid', 'list', 'file', 'thumbnail', 'dropdown' |
required |
boolean | false | Make field required |
class |
string | empty | Additional CSS classes |
labelClass |
string | empty | Additional CSS classes for label |
Preview Types
Profile Preview
Shows a circular profile picture preview.
Grid Preview
Shows files in a responsive grid layout with thumbnails.
List Preview
Displays files in a vertical list with thumbnails and filenames.
Thumbnail Preview
Shows small thumbnails in a compact horizontal layout.
File Preview
Displays files as downloadable links.
Dropdown Preview
Shows a dropdown with file count and list when clicked.
File Validation
The component includes built-in validation:
- File Type Validation: Automatically validates file types based on the
typeparameter - Size Validation: Validates file size against the
maxparameter - Error Messages: User-friendly error messages with auto-dismiss
Styling
The component uses Tailwind CSS classes and includes:
base-input- Base input stylingbase-label- Base label styling- Responsive design classes
- Hover and focus states
- Error state styling
You can customize the appearance by:
- Overriding the CSS classes
- Adding custom classes via the
classparameter - Modifying the published Blade component
Form Integration
The component integrates seamlessly with Laravel forms:
Error Handling
The component automatically displays Laravel validation errors:
File Processing
In your controller, handle the uploaded files:
Customization
Custom Component Location
If you want to customize the component, you can modify the published files:
- Views:
resources/views/components/file-picker.blade.php - JavaScript:
resources/js/vendor/file-picker/file-picker.js
Custom Styling
Add custom CSS to override default styles:
Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Contributing
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
License
This package is open-sourced software licensed under the MIT license.
Support
For support, please contact mhshagor.
Made with ❤️ for the Laravel community