[4.1][WIKI] How to use image mutator inside Repeatable field

[iMokhles]

So Repeatable it's an amazing field but i had issue with image field inside it of how to save image path or even override the mutator function of it so after a simple research i was able to fix it like that.

Repeatable Field Setup

            [   // repeatable
                'name'  => 'images',
                'label' => 'Images',
                'type'  => 'repeatable',
                'fields' => [
                    [
                        'name'    => 'image',
                        'type'    => 'image',
                        'label'   => 'Image'
                    ],
                    [
                        'label' => 'Big Image',
                        'name' => 'is_big',
                        'type' => 'checkbox',
                    ],
                ],
            ]

Repeatable Field Mutator

    public function setImagesAttribute($value)
    {
        $images = json_decode($value, true);
        if (count($images)) {
            foreach ($images as &$jsonInfo) {
                $image = $jsonInfo['image'];
                if (Str::startsWith($image, 'data:image')) {
                    $newImage = $this->setImageMutator($image);
                    $jsonInfo['image'] = $newImage;
                }
            }
            $this->attributes['images'] = json_encode($images);
        }
        
    }

Image Setter same as documentation with some comments to serve my need

    public function setImageMutator($value) {
        // or use your own disk, defined in config/filesystems.php
        $disk = 'cloud_disk';
        // destination path relative to the disk above
        $destination_path = "cloud/media/uploads";

        // if the image was erased
//        if ($value==null) {
//            // delete the image from disk
//            \Storage::disk($disk)->delete($this->{$attribute_name});
//
//            // set null in the database column
//            $this->attributes[$attribute_name] = null;
//        }

        // if a base64 was sent, store it in the db
        if (Str::startsWith($value, 'data:image'))
        {
            // 0. Make the image
            $image = \Intervention\Image\Facades\Image::make($value)->encode('jpg', 90);

            // 1. Generate a filename.
            $filename = md5($value.time()).'.jpg';

            // 2. Store the image on disk.
            \Storage::disk($disk)->put($destination_path.'/'.$filename, $image->stream());

            // 3. Delete the previous image, if there was one.
//            \Storage::disk($disk)->delete($this->{$attribute_name});

            // 4. Save the public path to the database
            // but first, remove "public/" from the path, since we're pointing to it
            // from the root folder; that way, what gets saved in the db
            // is the public URL (everything that comes after the domain name)
            $public_destination_path = Str::replaceFirst('public/', '', $destination_path);
            return $public_destination_path.'/'.$filename;
        }
    }

Images saved in database like that

And also uploaded and saved to my disk correctly

Hope it helps someone and hope it make sense, any suggests for improvements.

[tabacitu]

Thanks a lot @iMokhles for sharing this! Could you please copy-paste the code too @iMokhles , not only the screenshots? That way people will be be easier for people to use, just copy-paste. You know we're all lazy 😆

I wonder if/how we can make it even easier for people to use this, without having to do this workaround... Food for thought.

[iMokhles]

@tabacitu added the code copyable too,
the only issue here is we need a solution to remove the file from the disk
as you can see i commented out the code used to delete previous image
for now i really didn't work a lot on it i just made this workaround quickly in a small project i may check it again later to add some improvements and solutions for the issue above.