- ✅ Drag & drop file upload interface
- ✅ Single or multiple file upload support
- ✅ File type validation
- ✅ File size limitation
- ✅ Image preview for supported formats
- ✅ File type icons for non-image files
- ✅ Easy file deletion
- ✅ Built-in RTL support (Arabic)
- ✅ Fully styled and customizable
- ✅ Works with Laravel forms
You can install the package via composer:
composer require codz/uploaderThen publish the package assets and component:
php artisan vendor:publish --tag="codz-uploader"This will publish:
- JavaScript and CSS assets to
public/vendor/codz-uploader/ - Blade component to
resources/views/components/codz-uploader.blade.php
For proper functionality, make sure to include the CSS in your document <head> and the JavaScript file at the end of your <body>:
<!-- In your layout's <head> section -->
<link rel="stylesheet" href="{{ asset('vendor/codz-uploader/styles.css') }}">
<!-- At the end of your <body> section -->
<script src="{{ asset('vendor/codz-uploader/scripts.js') }}"></script><x-codz-uploader
name="document"
label="Upload Document"
accept=".pdf,.docx"
maxSize="5120"
/><x-codz-uploader
name="photos[]"
label="Upload Photos"
multiple="true"
accept=".jpg,.jpeg,.png"
maxSize="2048"
/><x-codz-uploader
name="photos[]"
label="Photo Gallery"
multiple="true"
accept=".jpg,.png"
:files="[
1 => 'https://example.com/uploads/photo1.jpg',
2 => 'https://example.com/uploads/photo2.jpg'
]"
deleteRouteName="photos.delete"
/><x-codz-uploader
name="document"
label="تحميل المستند"
lang="ar"
accept=".pdf,.docx"
maxSize="5120"
/><form action="/upload" method="POST" enctype="multipart/form-data">
@csrf
<div class="form-group">
<x-codz-uploader
name="document"
label="Upload Document"
required="true"
accept=".pdf,.docx"
maxSize="5120"
/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>| Option | Type | Default | Description |
|---|---|---|---|
name |
string | 'image' |
Input name attribute |
label |
string | 'Browse Files' |
Upload component label |
multiple |
boolean | false |
Enable multiple file uploads |
hasLabel |
boolean | true |
Show/hide the label |
required |
boolean | false |
Make the file upload required |
accept |
string | '.png, .jpg, .jpeg' |
Allowed file types |
maxSize |
string | '500' |
Maximum file size in KB |
files |
array/string | [] |
Pre-populated files |
deleteRouteName |
string | null |
Route name for file deletion |
deleteMethod |
string | 'GET' |
HTTP method for deletion (GET, POST, DELETE) |
lang |
string | 'en' |
Language ('en' or 'ar' for Arabic) |
@component('codz-uploader::components.uploader', [
'name' => 'document',
'label' => 'Upload Document',
'multiple' => false,
'required' => true,
'accept' => '.pdf,.docx',
'maxSize' => '5120'
])
@endcomponent@include('codz-uploader::components.uploader', [
'name' => 'document',
'label' => 'Upload Document',
'multiple' => false,
'required' => true,
'accept' => '.pdf,.docx',
'maxSize' => '5120'
])The uploader accepts file types based on MIME types or extensions:
// For images
accept=".jpg,.jpeg,.png,.gif,.webp"
// For documents
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
// For videos
accept=".mp4,.webm,.mov,.avi"
// Using MIME types
accept="image/*,application/pdf"
// Multiple types
accept="image/*,application/pdf,.docx"The uploader comes with a pre-styled interface, but you can customize it by overriding CSS variables:
:root {
--uploader-primary: #4a90e2; /* Primary color */
--uploader-border: #dbe1e9; /* Border color */
--uploader-text: #333333; /* Text color */
--uploader-bg: #f9f9f9; /* Background color */
--uploader-error: #e74c3c; /* Error state color */
--uploader-success: #2ecc71; /* Success state color */
}The MIT License (MIT). Please see License File for more information.