images in repeatable field saving as base64, would like to save in storage

[semiplay]

I have a repeatable field, and it has images. It all works fine, except the images are being saved as base64 to the database, and I'd like to direct them to a storage location. This works fine outside the repeatable, but if I try to put 'withFiles' => true into a repeatable, I then get an error on save:
json_decode(): Argument #1 ($json) must be of type string, array given

Is there a parameter I am missing to make the image in a repeatable upload to storage, or do I need to use a callback?

Thanks!!!

========================================================

This subfield works and uploads base64:
[
'label' => 'Image 3',
'name' => 'image3',
'type' => 'image',
'crop' => true, // set to true to allow cropping, false to disable
'aspect_ratio' => 1, // omit or set to 0 to allow any aspect ratio
'wrapper' => ['class' => 'form-group col-md-4'],
],

But this subfield does not and throws the error:

[
'name' => 'Image 3',
'label' => 'image3',
'type' => 'image',
'withFiles' => true,
'disk' => 'sop',
'crop' => true, // set to true to allow cropping, false to disable
'aspect_ratio' => 1,
'wrapper' => ['class' => 'form-group col-md-4'],
],

[karandatwani92]

Hey @semiplay I tried to recreate and it worked for me with the following code:

Model

protected $casts = [
        'json' => 'json',
    ];

Controller

CRUD::field([
            'name'  => 'json',
            'label' => 'IMAGES WITH TEXT',
            'type'  => 'repeatable',
            'subfields' => [ // also works as: "fields"
                [
                    'name'    => 'text',
                    'type'    => 'text',
                    'label'   => 'TEXT',
                    'wrapper' => ['class' => 'form-group col-md-4'],
                ],
                [
                    'name'    => 'image',
                    'type'    => 'image',
                    'label'   => 'IMAGE',
                    'crop' => true,
                    'aspect_ratio' => 1,
                    'withFiles' => [
                        'disk' => 'public', // the disk where file will be stored
                        'path' => 'uploads', // the path inside the disk where file will be stored
                    ],
                    'wrapper' => ['class' => 'form-group col-md-4'],
                ],
            ],
            'reorder' => true, // show up&down arrows next to each row
        ]);

Table/Migration

Schema::create('testimonials', function (Blueprint $table) {
            $table->id();
            $table->json('json');
            $table->timestamps();
        });

Result

"[{\"text\":\"SAsa\",\"image\":\"uploads\\/kQNr94ssiuztwCVlOnSmVNFP388yXcViRUEZowsI.png\"}]"

Caution⚠️:

I received the same error only when the JSON field already had a base64 value stored by the previous field definition. So, Try the above on a new item/row/entry only.
👆@tabacitu should we consider this a bug?

[semiplay]

@karandatwani92 it works! Thank you so much!

[semiplay]

One more item I found - does this work for you with multiple images?

In my case, I have 3:

 [
                    'label' => 'Image 1',
                    'name' => 'image1',
                    'type' => 'image',
                    'crop' => true, // set to true to allow cropping, false to disable
                    'aspect_ratio' => 1, // omit or set to 0 to allow any aspect ratio
                    'wrapper' => ['class' => 'form-group col-md-4'],
                    'withFiles' => [
                        'disk' => 'sop', // the disk where file will be stored
                        'path' => 'steps', // the path inside the disk where file will be stored
                    ],
                ],

                [
                    'label' => 'Image 2',
                    'name' => 'image2',
                    'type' => 'image',
                    'crop' => true, // set to true to allow cropping, false to disable
                    'aspect_ratio' => 1, // omit or set to 0 to allow any aspect ratio
                    'wrapper' => ['class' => 'form-group col-md-4'],
                    'withFiles' => [
                        'disk' => 'sop', // the disk where file will be stored
                        'path' => 'steps', // the path inside the disk where file will be stored
                    ],
                ],
                [
                    'label' => 'Image 3',
                    'name' => 'image3',
                    'type' => 'image',
                    'crop' => true, // set to true to allow cropping, false to disable
                    'aspect_ratio' => 1, // omit or set to 0 to allow any aspect ratio
                    'wrapper' => ['class' => 'form-group col-md-4'],
                    'withFiles' => [
                        'disk' => 'sop', // the disk where file will be stored
                        'path' => 'steps', // the path inside the disk where file will be stored
                    ],
                ],

When I add the first image and save, works great. But if I try to add more than one, or come back and add more, I get the following error:
League\Flysystem\Filesystem::delete(): Argument #1 ($location) must be of type string, null given, called in /Users/markparis/Sites/bpsmartsop/vendor/laravel/framework/src/Illuminate/Filesystem/FilesystemAdapter.php on line 518

Any insights are appreciated!

[semiplay]

One more piece of info. I stepped it back to one image. Initially that works fine. But then if I go back and edit the step (leaving the image alone) then the database entry for the image stays the same, but it appears that the filesystem deletes the original image. And then the next time I go to view/edit the entry, the image is broken because the file was deleted. I can add another image, but if I go back and edit, it will delete that one as well.

I then went back to multiple images. Same behavior. If I add them the first time, it's good. But if I edit the record, it deletes the images.

[semiplay]

So it seems like the delete is firing every time, regardless of if it should. If I comment out the delete image (line 57) then it looks like images stay, and I can add or edit multiple images. That's not a fix, because sometimes images should be removed, but, it will get me through a demo I need to do.

\Backpack\CRUD\app\Library\Uploaders\SingleBase64Image

       $imagesToDelete = array_diff($previousRepeatableValues, $values);

        foreach ($imagesToDelete as $image) {
            //Storage::disk($this->getDisk())->delete($image);  ######## commented this line out
        }

[semiplay]

Ok, this seemingly works for now, starting at line 42 of \Backpack\CRUD\app\Library\Uploaders\SingleBase64Image

 foreach ($values as $row => $rowValue) {
            if ($rowValue) {
                if (Str::startsWith($rowValue, 'data:image')) {
                    $base64Image = Str::after($rowValue, ';base64,');
                    $finalPath = $this->getPath().$this->getFileName($rowValue);
                    Storage::disk($this->getDisk())->put($finalPath, base64_decode($base64Image));
                    $values[$row] = $previousRepeatableValues[] = $finalPath;

                    continue;
                } else { //***************Added this section
                    $values[$row] = $this->getPath().$rowValue; //add the correct path
                }//*********************End added section
            }
        }
        $imagesToDelete = array_diff($previousRepeatableValues, $values);
        foreach ($imagesToDelete as $image) {
            if(!is_null($image)){ //check for null ******************Added if clause to check for null
                Storage::disk($this->getDisk())->delete($image);
            } //**************************************************
        }