Custom properties - TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

[dvorakvaclav]

Hello,

I am facing the same issue mentioned in #288 when saving resource with new image with filled custom properties. When custom properties are not filled, everything works fine. Can anyone help? Thanks

Model:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Partner extends Model implements HasMedia
{
    use InteractsWithMedia;

    const MEDIA_LOGO = 'logo';

    protected $guarded = [];
    
    public function registerMediaCollections(): void
    {
        $this->addMediaCollection(self::MEDIA_LOGO);
    }
}

Resource:

Images::make('Logos', \App\Models\Partner::MEDIA_LOGO)
    ->rules('nullable')
    ->customPropertiesFields([
        Text::make('URL', 'url'),
    ]),

Error:

"TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.
    at http://127.0.0.1:8000/nova-api/scripts/media-lib-images-field:2:187335
    at Proxy.forEach (<anonymous>)
    at Proxy.fill (http://127.0.0.1:8000/nova-api/scripts/media-lib-images-field:2:186802)
    at http://127.0.0.1:8000/vendor/nova/app.js?id=352142bf8c8417d0a082d18681d3234b:1:919324
    at e.exports (http://127.0.0.1:8000/vendor/nova/vendor.js?id=469a2eb2ac0a02b4147b36a36a3c39c1:2:909411)
    at e.exports (http://127.0.0.1:8000/vendor/nova/vendor.js?id=469a2eb2ac0a02b4147b36a36a3c39c1:2:941060)
    at http://127.0.0.1:8000/vendor/nova/app.js?id=352142bf8c8417d0a082d18681d3234b:1:919307
    at e.exports (http://127.0.0.1:8000/vendor/nova/vendor.js?id=469a2eb2ac0a02b4147b36a36a3c39c1:2:909411)
    at e.exports (http://127.0.0.1:8000/vendor/nova/vendor.js?id=469a2eb2ac0a02b4147b36a36a3c39c1:2:941060)
    at http://127.0.0.1:8000/vendor/nova/app.js?id=352142bf8c8417d0a082d18681d3234b:1:919286"

[thettler]

The Issue appears if you try to add a new Image and edit the Custom Properties directly.

advanced-nova-media-library/resources/js/components/CustomProperties.vue

Line 35 in 2d7151d

image: JSON.parse(JSON.stringify(this.modelValue)),

This line takes the image object and clones it into the Custom Properties component. By using the JSON parse/stringify the Blob in the file property gets casted to a normal object. this then triggers the error.

An easy fix would be to use the Lodash Clone functionality, or even better to just emit the custom properties and add them in the Gallery.vue to the corresponding images.

I am sure i can quickly cook up a PR with the lodash clone fix. I do not know if the other solution has any drawbacks i do not know about. Feel free to contact me if you would like to see a PR with this Solution though @ebess

[CosmicodeStudio]

@ebess Can you accept this?

[SchwartzN]

Hello @ebess can you accept this pull request ?

[aurelien-ci]

Hello @ebess can you accept this ? It solves the problem for me

[aurelien-ci]

Thank you !