CosminAndrei's avatar

Multiple images gallery

Hello. I'm trying to create an image gallery where I can add more photos at once. For now, I only managed to add one photo at a time. How could I write the code to be able to add more photos at the same time?

My controller :

public function index()
{
    $images_salons = SalonsImageGallery::get();
    return view('admin-panel.salons.salons',compact('images_salons'));
}



public function upload(Request $request)
{
    $this->validate($request, [
        'image_salons' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);


    $input['image_salons'] = time().'.'.$request->image_salons->getClientOriginalExtension();
    $request->image_salons->move(public_path('images/salons'), $input['image_salons']);
    SalonsImageGallery::create($input);


    return back()
        ->with('success','Image Uploaded successfully.');
}


public function destroy($id)
{
    SalonsImageGallery::find($id)->delete();
    return back()
        ->with('success','Image removed successfully.');
}

// My view code :

        <form action="{{ url('home/saloane') }}" class="form-image-upload" method="POST"
              enctype="multipart/form-data">


            @csrf


            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Oops!</strong> Au aparut cateva probleme in formularul tau!<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif


            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
            @endif


            <div class="row">
                <div class="col-md-10">
                    <strong>Image:</strong>
                    <input type="file" name="image_salons" class="form-control">
                </div>
                <div class="col-md-2">
                    <br/>
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
            </div>


        </form>


        <div class="row">
            <div class='gallery'>

                @if($images_salons->count())
                    @foreach($images_salons as $image)
                        <div class='box'>
                            <a class="thumbnail fancybox" rel="ligthbox" href="/images/salons/{{ $image->image_salons }}">
                                <img class="img-responsive" alt="" src="/images/salons/{{ $image->image_salons }}"/>
                            </a>
                            <form action="{{ url('home/saloane',$image->id) }}" method="POST">
                                <input type="hidden" name="_method" value="delete">
                                {!! csrf_field() !!}
                                <button type="submit" class="close-icon btn btn-danger">X</button>
                            </form>
                        </div>
                    @endforeach
                @endif

            </div>
        </div>
0 likes
11 replies
Sergiu17's avatar

Hi @cosminandrei. first of all, your input should be an array

<!-- note square brackets after image_salons -->
<input type="file" name="image_salons[]" class="form-control">

then, exactly your code wrapped in a foreach loop

$images = $request->input('image_salons'); // array

foreach($images as $image) {
    $input['image_salons'] =
    time() . '.' . $image->getClientOriginalExtension();

    $image->move(public_path('images/salons'), $input['image_salons']);

    SalonsImageGallery::create($input);
}
CosminAndrei's avatar

I wrote this code, but I still cannot select more images, and now this error appears in my view and it does not show my image.

https://imgur.com/a/OdV6B6N

public function upload(Request $request) {

    $this->validate($request, [
        'image_salons' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

    $images = $request->input('image_salons');

    foreach($images as $image) {
        $input['image_salons'] =
            time() . '.' . $image->getClientOriginalExtension();

        $image->move(public_path('images/salons'), $input['image_salons']);

        SalonsImageGallery::create($input);
    }

    return back()
        ->with('success','Imaginea a fost incarcata cu succes!');
}
Sergiu17's avatar

@cosminandrei yep, add multiple attribute to your input

<input type="file" name="image_salons[]" class="form-control" multiple>

also you have to change your validation rules

$this->validate($request, [
    'image_salons' => 'required'
    'image_salons.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
// this translates to:
// - image_salons filed is required
// - every item of image_salons array should be an image, max 2048 and jpeg, png, jpg, gif or svg format.

hope it helps, and will work without errors

CosminAndrei's avatar

Now i get this error. Maybe need to add if condition ?

https://imgur.com/a/V3mT49t

I tried this and error disappear, but now doesn't store images to folder and database and doesn't display them.

if (is_array($images)) {

        foreach ($images as $image) {

            $input['image_salons'] = time() . '.' . $image->getClientOriginalExtension();

            $image->move(public_path('images/salons'), $input['image_salons']);

            SalonsImageGallery::create($input);
        }
    }

Maybe is problem with view code?

            <div class="gallery">

                @if($images_salons->count())

                    @foreach($images_salons as $image)

                        <div class='box'>
                            <a class="thumbnail fancybox" rel="ligthbox" href="/images/salons/{{ $image->image_salons }}">
                                <img class="img-responsive" alt="" src="/images/salons/{{ $image->image_salons }}"/>
                            </a>
                            <form action="{{ url('home/saloane',$image->id) }}" method="POST">
                                <input type="hidden" name="_method" value="delete">
                                {!! csrf_field() !!}
                                <button type="submit" class="close-icon btn btn-danger">X</button>
                            </form>
                        </div>
                    @endforeach
                @endif

            </div>
Sergiu17's avatar

@cosminandrei try to debug a little bit

$images = $request->input('image_salons');

dd($images); // Here should be all the selected images
jlrdw's avatar

Have you looked into using intervention.

Sergiu17's avatar

OK, take small steps,

public function upload(Request $request) {
    dd($request->all());
}

If it doesn't include image_salons, check your HTML, check if it's the correct route

Sergiu17's avatar
Sergiu17
Best Answer
Level 60

@cosminandrei hmm, not sure it's null when your save to $images variable. ok

foreach($request->image_salons as $image) {
    // ...
}
CosminAndrei's avatar

@sergiu17 How can I contact you? I'm from Romania, i saw you are from Chisinau, maybe is easy to communicate via facebook or social media to find a solution?

Please or to participate in this conversation.