Laravel Nova Image Collection upload "The image-collection must be an image"

  laravel, laravel-4, laravel-5, laravel-nova, php

I’ve inherited an Expo app with a Laravel backend, and I’m having trouble allowing images to be uploaded on the Nova admin panel. Whenever I try to upload a photo, I get an error that says "The image-collection must be an image." From the code, I can tell the name of the image collection is "image-collection", but I’m not sure why Nova thinks the image collection isn’t an image. I’m able to upload photos through the app, so it looks like it should be a Nova issue. Here’s a screenshot of the error I’m getting:
Laravel Nova Image Upload error

Here is the Image model that we are using to store the images in the database

<?php

namespace App;

use AppTraitsSearchable;
use CviebrockEloquentSluggableSluggable;
use IlluminateDatabaseEloquentModel;
use IlluminateSupportStr;
use IlluminateSupportFacadesStorage;

use SpatieMediaLibraryHasMediaHasMedia;
use SpatieMediaLibraryHasMediaHasMediaTrait;
use SpatieMediaLibraryModelsMedia;

/**
 * AppImage
 *
 * @property int $id
 * @property int $restaurant_id
 * @property string|null $image_path
 * @property string|null $caption
 * @property string $slug
 * @property bool $active
 * @property IlluminateSupportCarbon|null $created_at
 * @property IlluminateSupportCarbon|null $updated_at
 * @property-read mixed $slug_title
 * @property-read IlluminateDatabaseEloquentCollection|SpatieMediaLibraryModelsMedia[] $media
 * @property-read AppRestaurant $restaurant
 * @method static IlluminateDatabaseEloquentBuilder|AppImage findSimilarSlugs($attribute, $config, $slug)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage newModelQuery()
 * @method static IlluminateDatabaseEloquentBuilder|AppImage newQuery()
 * @method static IlluminateDatabaseEloquentBuilder|AppImage query()
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereActive($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereCaption($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereCreatedAt($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereId($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereImagePath($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereRestaurantId($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereSlug($value)
 * @method static IlluminateDatabaseEloquentBuilder|AppImage whereUpdatedAt($value)
 * @mixin Eloquent
 * @method static IlluminateDatabaseEloquentBuilder|AppImage searchBy($value)
 */
class Image extends Model implements HasMedia
{
    use Sluggable;
    use HasMediaTrait;
    use Searchable;

    public function sluggable()
    {
        return [
            'slug' => [
                'source' => 'slug_title',
                'unique' => true,
            ]
        ];
    }

    protected $fillable = [
        'caption', 'active', 'review_id'
    ];

    protected $searchable = [
        'id', 'caption',
    ];

    protected $casts = [
        'active' => 'boolean'
    ];

    public function getSlugTitleAttribute()
    {
        return Str::random(12);
    }

    public function restaurant()
    {
        return $this->belongsTo(Restaurant::class);
    }

    public function registerMediaConversions(Media $media = null)
    {
        $this->addMediaConversion('thumb')
//            ->width(130)
            ->height(300)
            ->withResponsiveImages();
    }

    public function registerMediaCollections()
    {
        $this->addMediaCollection('main-image')->singleFile();
        $this->addMediaCollection('image-collection');
    }
}

Here is the corresponding Nova panel:


namespace AppNova;

use LaravelNovaFieldsBelongsTo;
use LaravelNovaFieldsID;
use IlluminateHttpRequest;
use LaravelNovaFieldsText;
use LaravelNovaFieldsBoolean;
use LaravelNovaFieldsMarkdown;
use LaravelNovaHttpRequestsNovaRequest;
use EbessAdvancedNovaMediaLibraryFieldsImages;

class Image extends Resource
{
    /**
     * The model the resource corresponds to.
     *
     * @var string
     */
    public static $model = 'AppImage';

    /**
     * The single value that should be used to represent the resource when being displayed.
     *
     * @var string
     */
    public static $title = 'caption';

    /**
     * The columns that should be searched.
     *
     * @var array
     */
    public static $search = [
        'caption'
    ];

    /**
     * Get the fields displayed by the resource.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [

            BelongsTo::make('Restaurant Name', 'restaurant', 'AppNovaRestaurant')->creationRules('required')->sortable(),
            Text::make('Caption')->rules('required', 'max:84')->sortable(),

            // allow batch image upload
            Images::make('Image Collection', 'image-collection') // second parameter is the media collection name
                //->withResponsiveImages()
                ->customPropertiesFields([
                    Boolean::make('Active'),
                    Markdown::make('Description'),
                ])
                ->setFileName(function($originalFilename, $extension, $model){
                    return md5($originalFilename) . '.' . $extension;
                })
                ->conversionOnPreview('thumb') // conversion used to display the "original" image
                ->conversionOnDetailView('thumb') // conversion used on the model's view
                ->conversionOnIndexView('thumb') // conversion used to display the image on the model's index page
                ->conversionOnForm('thumb') // conversion used to display the image on the model's form
                ->fullSize() // full size column
                //->rules('required') // validation rules for the collection of images
                // validation rules for the collection of images
                ->singleImageRules('dimensions:min_width=100'),

            Boolean::make('Active'),
        ];
    }

    /**
     * Get the cards available for the request.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function cards(Request $request)
    {
        return [];
    }

    /**
     * Get the filters available for the resource.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function filters(Request $request)
    {
        return [];
    }

    /**
     * Get the lenses available for the resource.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function lenses(Request $request)
    {
        return [];
    }

    /**
     * Get the actions available for the resource.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function actions(Request $request)
    {
        return [];
    }
}

Any help on this would be much appreciated, as I am a Laravel and Laravel Nova beginner.

Source: Laravel

Leave a Reply