craftable: Media Upload for the lastest craftable version updates is not working, old documentation not showing the changes...

I tried many times to create the media upload cover and gallery but it seems that in the new craftable version things changed for this but there is no update information regarding media upload yet for the form-elements.blade…

I have made the changes in post like stated here:

https://docs.getcraftable.com/v4/#/upgrade-guide

but anyway I get these errors:

"Class App\Models\Post contains 11 abstract 
methods and must therefore be declared abstract or implement the remaining methods (Spatie\MediaLibrary\HasMedia\HasMedia::media,
 Spatie\MediaLibrary\HasMedia\HasMedia::addMedia,
 Spatie\MediaLibrary\HasMedia\HasMedia::copyMedia, ...) ◀"

here the Model:

<?php

namespace App\Models;

//use Brackets\Media\HasMedia\HasMediaCollections;
//use Brackets\Media\HasMedia\HasMediaCollectionsTrait;
//use Brackets\Media\HasMedia\HasMediaThumbsTrait;
use Illuminate\Database\Eloquent\Model;
//use Spatie\MediaLibrary\HasMedia\Interfaces\HasMediaConversions;
use Spatie\MediaLibrary\HasMedia\HasMedia;
use Spatie\MediaLibrary\Models\Media;
//use Spatie\MediaLibrary\Media;
use Brackets\Media\HasMedia\ProcessMediaTrait;
use Brackets\Media\HasMedia\AutoProcessMediaTrait;

class Post extends Model implements HasMedia
{
    use AutoProcessMediaTrait;
    use ProcessMediaTrait;

    protected $fillable = [
        "title",
        "perex",
        "published_at",
        "enabled",
        "author_id",

    ];

    protected $hidden = [

    ];

    protected $dates = [
        "published_at",
        "created_at",
        "updated_at",

    ];



    protected $appends = ['resource_url'];

    /* ************************ ACCESSOR ************************* */

    public function getResourceUrlAttribute()
    {
        return url('/admin/posts/'.$this->getKey());
    }

    public function registerMediaCollections()
    {
        $this->addMediaCollection('cover')
            ->accepts('image/*');

        $this->addMediaCollection('gallery')
            ->accepts('image/*')
            ->maxNumberOfFiles(20);

        $this->addMediaCollection('pdf')
            ->accepts('application/pdf');
    }

    public function registerMediaConversions(Media $media = null)
    {
        $this->autoRegisterThumb200();
    }

    /* ************************ RELATIONS ************************* */

    public function author()
    {
        return $this->belongsTo(Author::class);
    }
}

any demo with a working demo of media upload using the latest craftable version with those changes?

Any help appreciated! thanks

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 15 (8 by maintainers)

Most upvoted comments

You probably didn’t follow the instruction from upgrade guide correctly. You have these lines missing: use Brackets\Media\HasMedia\AutoProcessMediaTrait; use Brackets\Media\HasMedia\ProcessMediaTrait;

Than inside model class you have missing: use AutoProcessMediaTrait; use HasMediaCollectionsTrait; use ProcessMediaTrait;

You don’t need to use use HasMediaTrait;

strstensky on Sep 16, 2019

Example of working model:

use Illuminate\Database\Eloquent\Model;
use Brackets\Media\HasMedia\ProcessMediaTrait;
use Brackets\Media\HasMedia\AutoProcessMediaTrait;
use Brackets\Media\HasMedia\HasMediaCollectionsTrait;
use Spatie\MediaLibrary\Models\Media;
use Spatie\MediaLibrary\HasMedia\HasMedia;
use Brackets\Media\HasMedia\HasMediaThumbsTrait;

class Post extends Model implements HasMedia {

    use ProcessMediaTrait;
    use AutoProcessMediaTrait;
    use HasMediaCollectionsTrait;
    use HasMediaThumbsTrait;

    public function registerMediaCollections()
    {
        $this->addMediaCollection('gallery')
                 ->accepts('image/*')
                 ->maxNumberOfFiles(20);
    }

    public function registerMediaConversions(Media $media = null)
    {
        $this->autoRegisterThumb200();
    }

strstensky on Sep 16, 2019

sorry it is craftable 5 now with Laravel 6 because I updated both and follow up the guidelines too:

https://docs.spatie.be/laravel-medialibrary/v7/converting-images/defining-conversions/

here my post model

<?php

namespace App\Models;


use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\Models\Media;
use Spatie\MediaLibrary\HasMedia\HasMedia;
use Spatie\MediaLibrary\HasMedia\HasMediaTrait;
use Spatie\MediaLibrary\File;


class Post extends Model implements HasMedia
{

    use HasMediaTrait;

    protected $fillable = [
        'title',
        'perex',
        'published_at',
        'enabled',

    ];


    protected $dates = [
        'published_at',
        'created_at',
        'updated_at',

    ];

    protected $appends = ['resource_url'];

    /* ************************ ACCESSOR ************************* */

    public function getResourceUrlAttribute()
    {
        return url('/admin/posts/'.$this->getKey());
    }



    public function registerMediaCollections()
    {
        $this->addMediaCollection('cover');

        $this->addMediaCollection('gallery');

        $this->addMediaCollection('pdf');

    }

    public function registerMediaConversions(Media $media = null)
    {
        $this->addMediaConversion('cover')
              ->width(368)
              ->height(232)
              ->sharpen(10);
    }


}

here my form-elements.blade.php

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('title'), 'has-success': this.fields.title && this.fields.title.valid }">
    <label for="title" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.post.columns.title') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <input type="text" v-model="form.title" v-validate="'required'" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('title'), 'form-control-success': this.fields.title && this.fields.title.valid}" id="title" name="title" placeholder="{{ trans('admin.post.columns.title') }}">
        <div v-if="errors.has('title')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('title') }}</div>
    </div>
</div>

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('perex'), 'has-success': this.fields.perex && this.fields.perex.valid }">
    <label for="perex" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">{{ trans('admin.post.columns.perex') }}</label>
        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
        <div>
            <wysiwyg v-model="form.perex" v-validate="''" id="perex" name="perex" :config="mediaWysiwygConfig"></wysiwyg>
        </div>
        <div v-if="errors.has('perex')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('perex') }}</div>
    </div>
</div>


<div class="form-check row" :class="{'has-danger': errors.has('enabled'), 'has-success': this.fields.enabled && this.fields.enabled.valid }">
    <div class="ml-md-auto" :class="isFormLocalized ? 'col-md-8' : 'col-md-10'">
        <input class="form-check-input" id="enabled" type="checkbox" v-model="form.enabled" v-validate="''" data-vv-name="enabled"  name="enabled_fake_element">
        <label class="form-check-label" for="enabled">
            {{ trans('admin.post.columns.enabled') }}
        </label>
        <input type="hidden" name="enabled" :value="form.enabled">
        <div v-if="errors.has('enabled')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('enabled') }}</div>
    </div>
</div>

@if ($mode === 'create')
          @include('brackets/admin-ui::admin.includes.media-uploader', [
              'mediaCollection' => app(App\Models\Post::class)->getMediaCollection('gallery'),
              'label' => 'Gallery of photos'
          ])
          @include('brackets/admin-ui::admin.includes.media-uploader', [
              'mediaCollection' => app(App\Models\Post::class)->getMediaCollection('pdf'),
              'label' => 'PDF appendix'
          ])
      @else
          @include('brackets/admin-ui::admin.includes.media-uploader', [
             'mediaCollection' => $post->getMediaCollection('gallery'),
             'media' => $post->getThumbs200ForCollection('gallery'),
             'label' => 'Gallery of photos'
         ])
          @include('brackets/admin-ui::admin.includes.media-uploader', [
              'mediaCollection' => $post->getMediaCollection('pdf'),
              'media' => $post->getThumbs200ForCollection('pdf'),
              'label' => 'PDF appendix'
          ])

@endif

and inside media-uploader.blade.php vendor/brackets/admin-ui/resources/views/admin/includes/media-uploader.blade.php I see this code:

<div class="card-header">
	@if($mediaCollection->isImage())
		<i class="fa fa-file-image-o"></i>
	@else
		<i class="fa fa-file-o"></i>
	@endif
	
	@if(isset($label))
		{{ $label }}
	@endif

	@if($mediaCollection->getMaxNumberOfFiles())
		<small>{{ trans('brackets/admin-ui::admin.media_uploader.max_number_of_files', ['maxNumberOfFiles' => $mediaCollection->getMaxNumberOfFiles()]) }}</small>
	@endif
	@if($mediaCollection->getMaxFileSize())
		<small>{{ trans('brackets/admin-ui::admin.media_uploader.max_size_pre_file', ['maxFileSize' => number_format($mediaCollection->getMaxFileSize()/1024/1024, 2)]) }}</small>
	@endif

	@if($mediaCollection->isPrivate())
		<a class="pull-right" data-toggle="tooltip" data-placement="top" title="{{ trans('brackets/admin-ui::admin.media_uploader.private_title') }}"> <i class="fa fa-lock" aria-hidden="true"></i></a>
	@endif
</div>

<media-upload
		ref="{{ $mediaCollection->getName() }}_uploader"
		:collection="'{{ $mediaCollection->getName() }}'"
		:url="'{{ route('brackets/media::upload') }}'"
		@if($mediaCollection->getMaxNumberOfFiles())
			:max-number-of-files="{{ $mediaCollection->getMaxNumberOfFiles() }}"
		@endif
		@if($mediaCollection->getMaxFileSize())
			:max-file-size-in-mb="{{ round(($mediaCollection->getMaxFileSize()/1024/1024), 2) }}"
		@endif
		@if($mediaCollection->getAcceptedFileTypes())
			:accepted-file-types="'{{ implode($mediaCollection->getAcceptedFileTypes(), '') }}'"
		@endif
		@if(isset($media) && $media->count() > 0)
			:uploaded-images="{{ $media->toJson() }}"
		@endif
></media-upload>

my composer:

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.2",
        "brackets/craftable": "^5.0",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "^6.0",
        "laravel/tinker": "^1.0"
    },
    "require-dev": {
        "brackets/admin-generator": "^5.0",
        "facade/ignition": "^1.4",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^3.0",
        "phpunit/phpunit": "^8.0"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/"
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ]
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

getThumbs200ForCollection does not exist anyway! but I get this error now:

error:

rapgithub on Sep 16, 2019

You have commented out the use Brackets\Media\HasMedia\HasMediaCollectionsTrait;. What is the reason? It is required as in previous versions.

dejwCake on Sep 16, 2019