包简介

A modern, flexible drag-and-drop file uploader component for Laravel

README 文档

README

CODz File Uploader for Laravel

A modern, flexible drag-and-drop file uploader component for Laravel applications

Features

✅ 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

Installation

You can install the package via composer:

composer require codz/uploader

Then 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

Include Assets

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>

Basic Usage

Single File Upload

<x-codz-uploader 
    name="document"
    label="Upload Document"
    accept=".pdf,.docx"
    maxSize="5120"
/>

Multiple File Upload

<x-codz-uploader 
    name="photos[]"
    label="Upload Photos"
    multiple="true"
    accept=".jpg,.jpeg,.png"
    maxSize="2048"
/>

With Existing Files

<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"
/>

With Arabic Language Support (RTL)

<x-codz-uploader 
    name="document"
    label="تحميل المستند"
    lang="ar"
    accept=".pdf,.docx"
    maxSize="5120"
/>

Using Inside a Laravel Form

<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>

Configuration Options

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)

Alternative Usage Methods

Using Blade Component Directive

@component('codz-uploader::components.uploader', [
    'name' => 'document',
    'label' => 'Upload Document',
    'multiple' => false,
    'required' => true,
    'accept' => '.pdf,.docx',
    'maxSize' => '5120'
])
@endcomponent

Using Blade Include

@include('codz-uploader::components.uploader', [
    'name' => 'document',
    'label' => 'Upload Document',
    'multiple' => false,
    'required' => true,
    'accept' => '.pdf,.docx',
    'maxSize' => '5120'
])

Supported File Types

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"

Custom Styling

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 */
}

License

The MIT License (MIT). Please see License File for more information.

codz/uploader 适用场景与选型建议

codz/uploader 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 3 次下载、GitHub Stars 达 0，最近一次更新时间为 2025 年 04 月 17 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「component」「laravel」「blade」「file-upload」「drag-drop」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 codz/uploader 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 codz/uploader 我们能提供哪些服务？

定制开发 / 二次开发

基于 codz/uploader 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 codz/uploader 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

fsi/datasource 8

FSi DataSource Component

skeeks/cms-user-personal-area 0

Priveate for SkeekS CMS

monolith/component-bootstrapping 0

Module for bootstrapping components in the Monolith framework.

quansitech/qscmf-buttontype-download-img 0

qscmf modal button download

foxtes/alfabank-rest 1

Alfabank REST API integration

limingxinleo/support-crontab 0

Crontab

codz/uploader

包简介

关键字：