PHPackages                             mahmoud183/nova-image-gallery-field - 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. [Image & Media](/categories/media)
4. /
5. mahmoud183/nova-image-gallery-field

ActiveLibrary[Image & Media](/categories/media)

mahmoud183/nova-image-gallery-field
===================================

Field for Nova that allows you to upload multiple images and sort them

00PHP

Since Mar 15Pushed 1y agoCompare

[ Source](https://github.com/Mahmoud183/nova-image-gallery-field)[ Packagist](https://packagist.org/packages/mahmoud183/nova-image-gallery-field)[ RSS](/packages/mahmoud183-nova-image-gallery-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel Nova Image Gallery Field
================================

[](#laravel-nova-image-gallery-field)

 [![](./banner.jpeg)](./banner.jpeg)

> A custom Nova field that allows multiple image upload with sorting

[![Stable Version](https://camo.githubusercontent.com/eaef69e50a2c5cc848c8e8beaa90f345a79d77dbd0618f85570ce33b9d638dfc/687474703a2f2f706f7365722e707567782e6f72672f617264656e7468712f6e6f76612d696d6167652d67616c6c6572792d6669656c642f76)](https://packagist.org/packages/ardenthq/nova-image-gallery-field) [![License](https://camo.githubusercontent.com/7816f0dc953adb62c62179dd358d405271078e57035c6a56565cb167ae82579c/687474703a2f2f706f7365722e707567782e6f72672f617264656e7468712f6e6f76612d696d6167652d67616c6c6572792d6669656c642f6c6963656e7365)](https://packagist.org/packages/ardenthq/nova-image-gallery-field) [![PHP Version Require](https://camo.githubusercontent.com/b29d50f635d3cefd07e0262d5929e1de04daf56592320d18a33874f780448720/687474703a2f2f706f7365722e707567782e6f72672f617264656e7468712f6e6f76612d696d6167652d67616c6c6572792d6669656c642f726571756972652f706870)](https://packagist.org/packages/ardenthq/nova-image-gallery-field)

Features
--------

[](#features)

- For Laravel Nova ^4.0
- Multiple image upload into a `spatie/laravel-medialibrary` collection.
- Image sorting
- Custom Image Validation
- Drag & Drop
- Dark Mode

 [![](./screenshot.png)](./screenshot.png)

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

[](#installation)

```
composer require ardenthq/nova-image-gallery-field
```

### Requirements

[](#requirements)

- PHP ^8.0
- [Laravel](https://laravel.com/)
- [Laravel Nova ^4.22](https://nova.laravel.com/), for lower versions see the [Compatibility Branch](#compatibility-branch)
- [Laravel Media Library](https://spatie.be/docs/laravel-medialibrary)

Use
---

[](#use)

> **Note**This package reuses part of the logic used on the `Laravel\Nova\Fields\Trix` Field to store and handle files. This means we need to follow some steps that are mentioned on the [Laravel Nova docs](https://nova.laravel.com/docs/1.0/resources/fields.html#file-uploads) related to adding the migrations and pruning the files.

1. Define two database tables to store pending and persisted Trix uploads. To do so, create a migration with the following table definitions:

```
Schema::create('nova_pending_field_attachments', function (Blueprint $table) {
    $table->increments('id');
    $table->string('draft_id')->index();
    $table->string('attachment');
    $table->string('original_name');
    $table->string('disk');
    $table->timestamps();
});

Schema::create('nova_field_attachments', function (Blueprint $table) {
    $table->increments('id');
    $table->string('attachable_type');
    $table->unsignedInteger('attachable_id');
    $table->string('attachment');
    $table->string('disk');
    $table->string('url')->index();
    $table->timestamps();

    $table->index(['attachable_type', 'attachable_id']);
});
```

**Note**: latest nova already includes these migrations. If so, you might receive error `Table already exists` while running migrations. In this case, you might only need to add `original_name` field in `nova_pending_field_attachments`:

```
Schema::table('nova_pending_field_attachments', function (Blueprint $table) {
    $table->string('original_name')->after('attachment');
});
```

2. In your `app/Console/Kernel.php` file, you should register a daily job to prune any stale attachments from the pending attachments table and storage. Laravel Nova provides the job implementation needed to accomplish this:

```
use Laravel\Nova\Trix\PruneStaleAttachments;

$schedule->call(function () {
    (new PruneStaleAttachments)();
})->daily();
```

3. Add the `ImageGalleryField` field to your Nova Resource.
4. Consider that the images will be stored in a `Spatie\MediaLibrary\MediaCollections\Models\Media` collection according to the name passed as the first parameter on the field `make` method or the second parameter if set. *(Dont forget to [register a media collection in your model](https://spatie.be/docs/laravel-medialibrary/working-with-media-collections/defining-media-collections))*
5. Use the `rules()` method to define the rules used for every single image.
6. Use the `rulesMessages()` method to define custom validation messages for the image rules.
7. Use the `help()` method if you want to place "help" text inside the Drag & Drop area.

### Example

[](#example)

```