How to preview image file after it is selected, and before uploading on Laravel Nova 4

Question

I would like to know how to preview the image after it is selected, and before submitting the form on Laravel Nova 4?

# App/Nova/Image.php

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function fields(NovaRequest $request)
{
    return [
        ID::make()->sortable(),
        Image::make('image')->disk('s3')->path('s3-uploads/event_images')->acceptedTypes('image/*'),                      
    ];
}

Is it possible to execute custom javascript on a Laravel Nova Form that detects when the image file is selected and inserts a preview in the form? Or is there a simpler / recommended way to do it?

Thank you

Answer 1

Dear you can use packages or create custom filed about package I will recommend some package:

• https://novapackages.com/packages/ajhaupt7/image-upload-preview
• https://novapackages.com/packages/r64/nova-image-cropper
• https://github.com/ebess/advanced-nova-media-library
• https://novapackages.com/packages/classic-o/nova-media-library
• https://novapackages.com/packages/ebess/advanced-nova-media-library