Problem with multiple image upload in laravel 8

I have to make an online shop website and I have to make multiple image uploads inside my product’s form and then display it as a slideshow in my view. I tried 5 tutorials or their concepts and nothing works. I’m so frustrated, so if you guys know anything, hit me up. I’m hoping to find simplest and straight-forward way to store images in database and display them. I’m not good in back-end stuff but I’m trying to learn the ropes.

If you wanna know what I’ve worked so far is i have two tables linked up which are images and foods. then, images table has a foreign key that will get id from the foods table. That will help the system to know which image is referring to which kind of food. Based on the tutorial that I’ve have tried so far and the best one I’ve tried, I got it uploaded in database but the filename only showed []. I’ve checked inside my public folder too, and I couldn’t find the files that I uploaded in there. I tried to display it on view and it throws a messed up error. I was really confused and stressed out just because of this function.

this is the code from my controller (getwelcome is my index):

public function getWelcome(Food $foods)
    {
        $data = Images::all();
        return view('welcome', compact('foods', 'data'));
    }

public function store(Request $request)
{

    $foods = new Food([
        'name'            =>  $request->get('name'),
        'description'     =>  $request->get('description'),
        'price'           =>  $request->get('price'),
        // column name => front-end name
    ]);
    $foods->save();

    
    if ($request->hasfile('filename')) {
        foreach ($request->file('filename') as $image) {
            $name = $image->getClientOriginalName();
            $image->move(public_path() . '/images/', $name); // folder path
            $data[] = $name;
        }
    }
    
    $Upload_model = new Images;
    $Upload_model->food_id = $foods->id;
    $Upload_model->filename = json_encode($data);
    $Upload_model->save();


    session()->flash('success', 'Food successfully added.');
    return redirect()->route('welcome');
}

image migration

Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('food_id');
            $table->String('filename');
            $table->timestamps();

            $table->foreign('food_id')
               ->references('id')
               ->on('food')
               ->onDelete('cascade');
});

in my view

@foreach($data as $image)
 @foreach(json_encode($image->filename)as $picture) 
    <div class="mySlides fade">
      <img src="{{ asset('/images'.$picture) }}" style="width:295px; height:295px">
    </div>
 @endforeach
@endforeach

Answer

Your mistake is calling json_encode in your view. The field is already a string, you need to “decode” it out of JSON into something PHP can use:

@foreach (json_decode($image->filename) as $image)

    ...{{ asset('images/'. $image) }}...

Advertisement

Answer