PHPackages                             mohamedgaldi/vilt-filepond - 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. mohamedgaldi/vilt-filepond

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

mohamedgaldi/vilt-filepond
==========================

A Laravel package for handling file uploads with FilePond in VILT stack

v1.0.7(2mo ago)12916↓59.7%1MITPHPPHP ^8.1

Since Jun 27Pushed 2mo agoCompare

[ Source](https://github.com/Mohamed-Galdi/vilt-filepond)[ Packagist](https://packagist.org/packages/mohamedgaldi/vilt-filepond)[ Docs](https://github.com/mohamedgaldi/vilt-filepond)[ RSS](/packages/mohamedgaldi-vilt-filepond/feed)WikiDiscussions main Synced 2d ago

READMEChangelogDependencies (2)Versions (9)Used By (0)

Laravel FilePond Package for VILT Stack
=======================================

[](#laravel-filepond-package-for-vilt-stack)

A comprehensive Laravel package for handling file uploads using FilePond in VILT (Vue, Inertia, Laravel, Tailwind) stack applications.

Features
--------

[](#features)

- 🚀 **Easy Integration** - Seamless FilePond integration with Laravel
- 📊 **Polymorphic Relations** - Works with any Eloquent model
- 💾 **Chunked Uploads** - Support for large file uploads via chunking
- 🔄 **Smart Management** - Temporary file handling with automatic cleanup
- 📁 **Flexible Uploads** - Support for single and multiple file uploads
- 🏷️ **Collections** - Organize files using collections (images, documents, etc.)
- 🌐 **Multi-language** - Supports multiple locales (Arabic, French, Spanish, English)
- 🌗 **Light/Dark Mode** - Customizable theme with light and dark mode support
- 🔒 **Security First** - Built-in validation and security features

Requirements
------------

[](#requirements)

- Laravel 11.0 or higher
- VILT stack (Vue.js, Inertia.js, Laravel, Tailwind CSS)
- PHP 8.1 or higher

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

[](#installation)

### 1. Install the Package

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

```
composer require mohamedgaldi/vilt-filepond
```

### 2. Install Frontend Dependencies

[](#2-install-frontend-dependencies)

```
npm install filepond vue-filepond filepond-plugin-file-validate-type filepond-plugin-file-validate-size filepond-plugin-image-preview
```

### 3. Publish Package Assets

[](#3-publish-package-assets)

```
# Publish everything at once
php artisan vendor:publish --tag=vilt-filepond

# Or publish individual assets
php artisan vendor:publish --tag=vilt-filepond-config
php artisan vendor:publish --tag=vilt-filepond-migrations
php artisan vendor:publish --tag=vilt-filepond-vue
```

### 4. Import FilePond Styles

[](#4-import-filepond-styles)

Add the following imports to your `app.css` file **before** your Tailwind directives:

```
@import "filepond/dist/filepond.min.css";
@import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
```

⚠️ **Important**: The FilePond CSS imports must come before Tailwind directives to ensure proper styling.

### 5. Run Migrations

[](#5-run-migrations)

```
php artisan migrate
```

### 6. Configure Storage

[](#6-configure-storage)

Ensure your **public** disk is properly configured in `config/filesystems.php` and create the storage link:

```
php artisan storage:link
```

### 7. Environment Configuration

[](#7-environment-configuration)

#### APP\_URL Configuration

[](#app_url-configuration)

Ensure your `APP_URL` in `.env` matches your development server URL:

```
# ❌ Wrong - will cause image loading issues
APP_URL=http://localhost

# ✅ Correct - matches your actual server URL
APP_URL=http://127.0.0.1:8000
```

### 8. Configure Inertia Middleware

[](#8-configure-inertia-middleware)

Add the CSRF token and config values to your `HandleInertiaRequests` middleware:

```
// app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'user' => fn () => $request->user()
            ? $request->user()->only('name', 'email')
            : null,
        'csrf_token' => csrf_token(),
        'fileUploadConfig' => [
            'locale' => config('vilt-filepond.locale'),
            'chunkSize' => config('vilt-filepond.chunk_size'),
        ],
    ];
}
```

Quick Start
-----------

[](#quick-start)

### 1. Prepare Your Model

[](#1-prepare-your-model)

Add the `HasFiles` trait to any model that needs file uploads:

```