With Golden Retriever

Golden Retriever Özelliği: Bu plugin, sayfa yenilendiğinde veya tarayıcı kapandığında seçilen dosyaları otomatik olarak geri yükler. LocalStorage veya IndexedDB kullanarak dosya bilgilerini saklar. Kullanıcı yanlışlıkla sayfayı yenilese bile dosyalar kaybolmaz ve upload işlemi kaldığı yerden devam edebilir.

Basic File Upload

Single File Upload

Multiple Files with Restrictions

Modal Mode

With Image Editor

Disabled

Auto Proceed (Auto Upload)

Not: Bu örnekte auto-proceed prop'u aktif. Dosyalar seçilir seçilmez otomatik olarak yüklenmeye başlamalı. Yükleme butonuna tıklamaya gerek yok.

Small Size

Medium Size (Default)

Large Size

With Webcam

With Screen Capture

With Compressor

With Thumbnail Generator

File Upload Component

The File Upload component uses Uppy.js library for advanced file upload functionality with previews, progress tracking, and more.

Usage

<x-file-upload 
    label="Upload files"
    multiple
    accepted-file-types="image/*"
    :max-file-size="5"
/>

Props

  • label - string

    Label text displayed above the upload area

  • multiple - bool

    Allow multiple file selection (default: false)

  • name - string

    Input name attribute (auto-generated if not provided)

  • id - string

    Input ID attribute (auto-generated if not provided)

  • accepted-file-types - string

    Comma-separated list of MIME types (e.g., "image/jpeg,image/png")

  • max-file-size - int

    Maximum file size in MB

  • max-number-of-files - int

    Maximum number of files allowed

  • inline - bool

    Render Dashboard inline or as modal (default: true)

  • width - int

    Width of the Dashboard in pixels (default: 600, only used when inline: true)

  • height - int

    Height of the Dashboard in pixels (default: 400, only used when inline: true)

  • theme - string

    Theme: "light", "dark", or "auto" (default: "auto")

  • editor - bool

    Enable image editor for cropping, rotating, and editing images (default: false). Alias: allow-image-editor

  • note - string

    Custom note text to display below the upload area

  • auto-proceed - bool

    Automatically start uploading when files are selected (default: false)

  • meta-fields - array

    Custom meta fields (e.g., [{id: 'caption', name: 'Caption', placeholder: 'Enter caption'}])

  • disabled - bool

    Disable the file upload component

  • upload-route - string

    Server route URL for file upload

  • webcam - bool

    Enable webcam for taking photos (default: false). Alias: allow-webcam

  • screenshot - bool

    Enable screen capture (default: false). Alias: allow-screen-capture

  • compress - bool

    Enable automatic file compression (default: false). Alias: enable-compressor

  • golden - bool

    Enable automatic file restoration after page reload. Stores file information in LocalStorage/IndexedDB and restores them when the page is refreshed or browser is closed/reopened. This prevents data loss if user accidentally refreshes the page. (default: false). Alias: enable-golden-retriever

  • thumbnails - bool

    Enable automatic thumbnail generation for files (default: false). Alias: enable-thumbnail-generator

  • form-selector - string

    CSS selector for form integration (uploads files when form is submitted)

Features

  • ✅ File upload with preview

  • ✅ Image preview support

  • ✅ File type and size validation

  • ✅ Progress tracking

  • ✅ Server upload with custom routes and headers

  • ✅ Multiple file support

  • ✅ Modal and inline modes

  • ✅ Dark mode support

  • ✅ Image editor with crop, rotate, zoom, and flip