How to make Image Preview with Session retaining the image

Level 122

Don't tag people for their input as this puts off all the other great helpers on this site.

Where does that message come from and where do you see it?

Level 1

@Snapey oh am sorry will not do it again I get the error below the input field image its a validation error I guess as I dont have such custom message for image "Image failed to upload"

Snapey

Level 122

you are not using any upload javascript?

Level 1

@Snapey NO just a simple file reader code for previewing image nothing to worry over there as it wont have much in it.

Snapey

Level 122

try with various sizes of file

Level 1

@Snapey I tried but the issue is same for all either less than 500 kb or more than that also, also my upload_max_size & post_max_size is 512M so I think nothing to worry for that too as well

Level 1

I tried this as well but the result is same

$imagePath = null;
if ($request->hasFile('image')) {
    $file = $request->file('image');
    $imageValidator = Validator::make(['image' => $file], [
        'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:500'
    ]);

    if ($imageValidator->passes()) {
        $filename = 'temp_' . bin2hex(random_bytes(10)) . '.' . $file->getClientOriginalExtension();
        $file->move(public_path('uploads/temp'), $filename);

        $fileHash = md5($filename);
        $request->session()->put('pending_upload_' . $fileHash, $filename);
        $request->session()->put('pending_upload_hash', $fileHash);

        $imagePath = $filename;
    } else {
        return redirect()->back()->withErrors($imageValidator)->withInput();
    }
}


$validator = Validator::make($request->all(), [
    'bird_name' => 'required|string|unique:birds,bird_name',
    'image_alt_tag' => 'required|string|unique:birds,bird_alt_tag',
    'status' => 'required|in:1,2'
]);

if ($validator->fails()) {
    return redirect()->back()->withErrors($validator)->withInput();
}

Level 11

@rchakrabarty

The issue you're encountering is likely due to the fact that the image validation is being performed twice: once in the separate $imageValidator and again in the main $validator. When the main $validator runs, it checks the image field again, and if it fails, it adds the error message "Image failed to upload."

To fix this, you need to ensure that the image validation is only performed once, and that the image is not re-validated if it has already been validated and uploaded to the temporary location. Here’s how you can adjust your code:

Remove the image validation from the main validator: Since you are validating the image separately, you don't need to include it in the main validator.
Only validate the image if it hasn't been validated and uploaded yet: Check if the image has already been uploaded and validated by checking the session.

$validator = Validator::make($request->all(), [
           'bird_name' => 'required|string|unique:birds,bird_name',
           'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:500',
           'image_alt_tag' => 'required|string|unique:birds,bird_alt_tag',
           'status' => 'required|in:1,2'
       ]);

       if ($request->hasFile('image')) {
           $file = $request->file('image');
           
           // Validate image separately for size and type
           $imageValidator = Validator::make(['image' => $file], [
               'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:500',
           ]);

Level 1

@jsanwo64 If I will use this then suppose if bird_name will have error but user have uploaded the image, image will not come to the preview as bird_name has error so it will stop there and further will not let the image to get uploaded to temp folder

Level 11

@rchakrabarty

more like this

public function store(Request $request)
{
    // Remove 'image' validation from the main validator
    $validator = Validator::make($request->all(), [
        'bird_name' => 'required|string|unique:birds,bird_name',
        'image_alt_tag' => 'required|string|unique:birds,bird_alt_tag',
        'status' => 'required|in:1,2'
    ]);

    // Check if the image has already been uploaded and validated
    $fileHash = $request->session()->get('pending_upload_hash');
    $fileName = $request->session()->get('pending_upload_' . $fileHash);

    if (!$fileName && $request->hasFile('image')) {
        $file = $request->file('image');
        
        // Validate image separately for size and type
        $imageValidator = Validator::make(['image' => $file], [
            'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:500',
        ]);

        // If the image is valid, upload it to a temporary location for preview
        if (!$imageValidator->fails()) {
            $filename = 'temp_' . bin2hex(random_bytes(10)) . '.' . $file->getClientOriginalExtension();
            $file->move(public_path('uploads/temp'), $filename);

            // Store the filename in the session for preview
            $fileHash = md5($filename);
            $request->session()->put('pending_upload_' . $fileHash, $filename);
            $request->session()->put('pending_upload_hash', $fileHash);
        } else {
            // If the image is invalid, clear any pending image preview
            $request->session()->put('pending_upload_hash', null);
            return redirect()->back()->withErrors($imageValidator)->withInput();
        }
    }

    // Stop if validation fails
    if ($validator->fails()) {
        return redirect()->back()->withErrors($validator)->withInput();
    }

    try {
        $fileHash = $request->session()->get('pending_upload_hash');
        $fileName = $request->session()->get('pending_upload_' . $fileHash);

        DB::beginTransaction();

        $bird = new Bird();
        $bird->bird_name = $request->bird_name;
        $bird->bird_img = $fileName;
        $bird->bird_alt_tag = $request->image_alt_tag;
        $bird->status = $request->status;
        $bird->created_by = Auth::user()->id;
        $bird->created_at = now();
        $bird->save();

        if ($fileName && File::exists(public_path('uploads/temp/' . $fileName))) {
            $finalPath = public_path('website/bird/' . $fileName);

            if (!File::exists(public_path('website/bird'))) {
                File::makeDirectory(public_path('website/bird'), 0755, true);
            }

            File::move(public_path('uploads/temp/' . $fileName), $finalPath);

            $request->session()->forget('pending_upload_' . $fileHash);
            $request->session()->forget('pending_upload_hash');
        }

        DB::commit();

        return redirect()->route('staffAdmin.listBird')->with('success', 'Bird Added Successfully.');
    } catch (\Exception $exp) {
        DB::rollBack();
        return redirect()->back()->withInput()->with('error', $exp->getMessage());
    }
}

Level 1

@jsanwo64 This will not solve my issue as well as I need all errors to be shown at a time, like what you gave will give the error of image separate and bird_name separate

Level 11

@rchakrabarty Try the suggestion i gave with a different image format or remove png from the validation rule and try uploading a png image to verify it works.

You most likely will get the error if you do then there is no need to validate twice like you did in your code

Level 1

@jsanwo64 Nah its not working to my requirements ser I am getting the error of "Image failed to upload"

Level 11

@rchakrabarty Show the code that is not working. The controller

Level 1

@jsanwo64 I have given already that store code blade javascript has nothing to do with it as its a validation error, and I haven't used anything i blade and javascript file

Level 11

@rchakrabarty Swap your code with this and try again. This should solve the issue

Level 11

public function store(Request $request)
{
    // Remove 'image' validation from the main validator
    $validator = Validator::make($request->all(), [
        'bird_name' => 'required|string|unique:birds,bird_name',
        'image_alt_tag' => 'required|string|unique:birds,bird_alt_tag',
        'status' => 'required|in:1,2'
    ]);

    // Check if the image has already been uploaded and validated
    $fileHash = $request->session()->get('pending_upload_hash');
    $fileName = $request->session()->get('pending_upload_' . $fileHash);

    if (!$fileName && $request->hasFile('image')) {
        $file = $request->file('image');
        
        // Validate image separately for size and type
        $imageValidator = Validator::make(['image' => $file], [
            'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:500',
        ]);

        // If the image is valid, upload it to a temporary location for preview
        if (!$imageValidator->fails()) {
            $filename = 'temp_' . bin2hex(random_bytes(10)) . '.' . $file->getClientOriginalExtension();
            $file->move(public_path('uploads/temp'), $filename);

            // Store the filename in the session for preview
            $fileHash = md5($filename);
            $request->session()->put('pending_upload_' . $fileHash, $filename);
            $request->session()->put('pending_upload_hash', $fileHash);
        } else {
            // If the image is invalid, clear any pending image preview
            $request->session()->put('pending_upload_hash', null);
            return redirect()->back()->withErrors($imageValidator)->withInput();
        }
    }

    // Stop if validation fails
    if ($validator->fails()) {
        return redirect()->back()->withErrors($validator)->withInput();
    }

    try {
        $fileHash = $request->session()->get('pending_upload_hash');
        $fileName = $request->session()->get('pending_upload_' . $fileHash);

        DB::beginTransaction();

        $bird = new Bird();
        $bird->bird_name = $request->bird_name;
        $bird->bird_img = $fileName;
        $bird->bird_alt_tag = $request->image_alt_tag;
        $bird->status = $request->status;
        $bird->created_by = Auth::user()->id;
        $bird->created_at = now();
        $bird->save();

        if ($fileName && File::exists(public_path('uploads/temp/' . $fileName))) {
            $finalPath = public_path('website/bird/' . $fileName);

            if (!File::exists(public_path('website/bird'))) {
                File::makeDirectory(public_path('website/bird'), 0755, true);
            }

            File::move(public_path('uploads/temp/' . $fileName), $finalPath);

            $request->session()->forget('pending_upload_' . $fileHash);
            $request->session()->forget('pending_upload_hash');
        }

        DB::commit();

        return redirect()->route('staffAdmin.listBird')->with('success', 'Bird Added Successfully.');
    } catch (\Exception $exp) {
        DB::rollBack();
        return redirect()->back()->withInput()->with('error', $exp->getMessage());
    }
}

Level 1

@jsanwo64 It wont sir it will be in the same rotation image validation will not come up with all other validations sir I have tried this as well, what will happen in this case is if image and bird_name both will have errors then only image will trigger then again you need to submit to get the bird_name error

Level 11

Try this lets see @rchakrabarty

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Validator;

public function store(Request $request)
{
    // Validate required fields except the image
    $validator = Validator::make($request->all(), [
        'bird_name' => 'required|string|unique:birds,bird_name',
        'image_alt_tag' => 'required|string|unique:birds,bird_alt_tag',
        'status' => 'required|in:1,2'
    ]);

    if ($validator->fails()) {
        return redirect()->back()->withErrors($validator)->withInput();
    }

    // Check session for pending uploaded image
    $fileHash = $request->session()->get('pending_upload_hash');
    $fileName = $request->session()->get('pending_upload_' . $fileHash);

    // Process new image upload if not in session
    if (!$fileName && $request->hasFile('image')) {
        $file = $request->file('image');

        // Validate image separately
        $imageValidator = Validator::make(['image' => $file], [
            'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:500',
        ]);

        if ($imageValidator->fails()) {
            return redirect()->back()->withErrors($imageValidator)->withInput();
        }

        // Store temporary file
        $fileName = 'temp_' . bin2hex(random_bytes(10)) . '.' . $file->getClientOriginalExtension();
        $file->move(public_path('uploads/temp'), $fileName);

        // Save filename in session
        $fileHash = md5($fileName);
        $request->session()->put('pending_upload_' . $fileHash, $fileName);
        $request->session()->put('pending_upload_hash', $fileHash);
    }

    try {
        DB::beginTransaction();

        // Create a new bird record
        $bird = new Bird();
        $bird->bird_name = $request->bird_name;
        $bird->bird_img = $fileName;
        $bird->bird_alt_tag = $request->image_alt_tag;
        $bird->status = $request->status;
        $bird->created_by = Auth::id();
        $bird->created_at = now();
        $bird->save();

        // Move image to final directory if exists
        if ($fileName && File::exists(public_path('uploads/temp/' . $fileName))) {
            $finalPath = public_path('website/bird/' . $fileName);

            File::ensureDirectoryExists(public_path('website/bird'), 0755, true);
            File::move(public_path('uploads/temp/' . $fileName), $finalPath);

            // Clear session
            $request->session()->forget(['pending_upload_' . $fileHash, 'pending_upload_hash']);
        }

        DB::commit();

        return redirect()->route('staffAdmin.listBird')->with('success', 'Bird Added Successfully.');
    } catch (\Exception $exp) {
        DB::rollBack();
        return redirect()->back()->withInput()->with('error', $exp->getMessage());
    }
}

Level 11

@rchakrabarty
Changes made

Used File::ensureDirectoryExists() to avoid redundant checks.
Ensured validation logic is clear and concise.
Properly handled session cleanup for failed uploads.
Used Auth::id() instead of Auth::user()->id.

Also, if there seems to be an error, you will need to show the following codes;

The form The controller and also the error returned

Level 1

@jsanwo64 It will be same sir I can't show errors separately in this case if the errors in bird_name will happen then it will not wait for image it will simply redirect back with bird_name error