Attach images to product variants when creating a new product Laravel

Tags: , , ,



i’m having difficulty attaching images to variants when creating new products. for example a product A with

variant A1
color blue
size small
images img1, img2

variant A2
color blue
size medium
image img3 img4

when I save this to the database, img1, img2, img3, img4 goes to both variant A1 and A2 instead of each variant to have its own images. How do I solve this?

here is my controller

public function variants(Request $request)
    {

        $data = $request->all();
        foreach($data['title'] as $key => $value){
          if(!empty($value)){
              $attribute = new AppVariant;
              $attribute->title  = $value;
              $attribute->size = $data['size'][$key];
              $attribute->color = $data['color'][$key];
              $attribute->save();

              $attributeID = $attribute->id;

              if($request->hasFile('image')){

                $store_file = [];
                $files = $request->file('image');
                foreach ($files as $file) {
                    $images = $file->store('public/photos');

                    $store_file[] = [
                        'filename' =>  $images,
                        'variant_id' =>  $attributeID
                    ];
                }
                ProductsPhoto::insert($store_file);
            }
          }

        }

    }

Blade file

<form  method="POST" action="{{ route('product.post') }}" enctype="multipart/form-data">
        @csrf
    @foreach($ColorSizes as $ColorSize)
            <div >
                <input type="text" name="color[]" value="{{$ColorSize->colorname}}">
                <span><input type="text" name="size[]" value="{{$ColorSize->sizename}}"></span>
             <input type="text" name="title[]" id="title"  value="" placeholder="Enter Title" required/>
             <span><input type="file" class="form-control" id="image" name="image[]" multiple/>
                </span>
            </div>
            @endforeach
<button type="Submit" id="btn" class="btn btn-primary">Submit</button>
</form>

Answer

You need to group your form controls so that when they are submitted, you know which images go with each product.

How can I group form elements

Change your blade to something like this

@foreach($ColorSizes as $ColorSize)
        <div >
            <input type="text" name="color[{{$loop->iteration}}]" value="{{$ColorSize->colorname}}">
            <span><input type="text" name="size[{{$loop->iteration}}]" value="{{$ColorSize->sizename}}"></span>
         <input type="text" name="title[{{$loop->iteration}}]" id="title"  value="" placeholder="Enter Title" required/>
         <span><input type="file" class="form-control" id="image" name="image[{{$loop->iteration}}][]" multiple/>
            </span>
        </div>
@endforeach

Then your PHP would change to something like this.

 public function variants(Request $request)
    {

        $data = $request->all();
        foreach($data['title'] as $key => $value){
          if(!empty($value)){
              $attribute = new AppVariant;
              $attribute->title  = $value;
              $attribute->size = $data['size'][$key];
              $attribute->color = $data['color'][$key];
              $attribute->save();

              $attributeID = $attribute->id;

              if($request->hasFile("image.{$key}")){

                $store_file = [];
                // Get the correct file array based on key                    
                $files = $request->file("image.{$key}.*");
                foreach ($files as $file) {
                    $images = $file->store('public/photos');

                    $store_file[] = [
                        'filename' =>  $images,
                        'variant_id' =>  $attributeID
                    ];
                }
                ProductsPhoto::insert($store_file);
            }
          }

        }

    }

Also, I didn’t test this PHP so you might have to debug this line a little $files = $request->file('image.'.$key); to make sure it gets you the correct file array.



Source: stackoverflow