loop on upload images error:The file "x.jpg" was not uploaded due to an unknown error

Viewed 15

I am using a form to upload photo gallery which should upload main gallery image and upload images to the same gallery in the same time.

I am using JQuery to append two fields one to upload the images and the other for the image name.

Here is my blade file

<form action="{{ route('add.new.album') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-body">
                        <h5 class="form-section">
                            <i class="ft-user"></i> Album information
                        </h5>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="album_name">Album name</label>
                                    <input class="form-control" id="album_name" type="text" placeholder="Album name" name="album_name">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label for="main_image">Main image</label>
                                <input class="form-control" id="main_image" type="file" name="main_image">
                            </div>
                        </div>

                        <h5 class="form-section mt-3"><i class="ft-user"></i> Add at last one image</h5>
                        <div class="row input-form">
                            <div class="col-sm-5">
                                <label for="images_1">Image</label>
                                <input class="form-control" id="images_1" type="file" name="images[]">
                            </div>
                            <div class="col-sm-5">
                                <div class="form-group">
                                    <label for="image_names_1">Name</label>
                                    <input class="form-control" id="image_names_1" type="text" placeholder="Image name" name="image_names[]">
                                </div>
                            </div>
                            <div class="col-sm-2 mt-4">
                                <input class="btn btn-primary" id="add_more" type="button" value="Add more +">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 mt-5">
                                <input class="btn btn-success" type="submit" value="Save Album">
                            </div>
                        </div>
                    </div>
                </form> 

and here is my JQuery

<script>
        $(document).ready(function () {
            let addButton = $('#add_more');
            let wrapper = $('.input-form');
            let fieldHTML = '<div class="mt-2">' +
                '<div class="row"> <div class="col-sm-5"> <div class="form-group"> <label for="images">Image</label><input class="form-control" id="images_2" type="file" name="images[]" /></div></div>' +
                '<div class="col-sm-5"> <div class="form-group"> <label for="image_names">Name</label><input class="form-control" type="text" name="image_names[]" /></div></div>' +
                '<a href="javascript:void(0);" class="remove_button btn btn-danger col-sm-1 mt-4">remove</a></div></div>';
            let x = 1;
            // Add fields
            $(addButton).click(function () {
                x++;
                $(wrapper).append(fieldHTML);
            });
            // Remove fields
            $(wrapper).on('click', '.remove_button', function (e) {
                e.preventDefault();
                $(this).parent('div').remove();
                x--;
            });
        });
    </script>

And here is my controller

public function store(Request $request) {
        $input = $request->all();
        if ($request->file('main_image')) {
            $file     = $request->file('main_image');
            $filename = date('YmdHi').$file->getClientOriginalName();
            $file->move(public_path()."/album-images/", $filename);
            $input['main_image'] = $filename;
        }
        $album = Album::create([
            'album_name' => $input['album_name'],
            'main_image' => $input['main_image'],
        ]);

        $fileNames = [];

            foreach ($request->file('images') as $image) {
                foreach ($request->image_names as $name) {
                    $imageName=$image->getClientOriginalName();
                    $image->move(public_path().'/album-images/', $imageName);
                    $fileNames[] = $imageName;
                }
            }
            $images = json_encode($fileNames);
            (new AlbumPhoto())->create([
                'album_id'    => $album->id,
                'images'      => $images,
                'image_names' => $name,
            ]);


        return redirect()->route('album');
    }

when I try to upload one more images on the loop it gives error

The file "x.png" was not uploaded due to an unknown error.

the error is pointing to this line $image->move(public_path().'/album-images/', $imageName);

1 Answers

I have found a good solution for this point in my controller.

Here what I changed in my controller

$photo_names = [];
        foreach ($request->image_names as $name) {
            $photo_names[] = $name;
        }
        foreach ($request->file('images') as $key => $value) {
            $image_name = $value->getClientOriginalName();
            $value->storeAs('public/album-images', $image_name);
            $photo_album              = new AlbumPhoto();
            $photo_album->album_id    = $album->id;
            $photo_album->images      = $image_name;
            $photo_album->image_names = $photo_names[$key];
            $photo_album->save();
        }

I couldn't be the best solution but it worked it out!

Related