Suppose we want to insert a Product with multiple features.

  • products table: id, name, price
  • product_galleries table: id, product_id, image_path

We want a form where the user can add multiple images dynamically for each product.

Step 1: Database Tables

Migration for products

Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->decimal('price', 10, 2);
$table->timestamps();
});

Migration for product_galleries

Schema::create('product_galleries', function (Blueprint $table) {
$table->id();
$table->foreignId('product_id')->constrained('products')->onDelete('cascade');
$table->string('image_path');
$table->timestamps();
});

Run migrations:

php artisan migrate

Step 2: Models and Relationships

Product.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
protected $fillable = ['name', 'price'];

public function galleries()
{
return $this->hasMany(ProductGallery::class);
}
}

ProductGallery.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class ProductGallery extends Model
{
protected $fillable = ['product_id', 'image_path'];

public function product()
{
return $this->belongsTo(Product::class);
}
}

Step 3: Blade Form with jQuery Dynamic Fields

<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<label>Product Name:</label>
<input type="text" name="name" required>
<label>Price:</label> <input type="number" step="0.01" name="price" required> <div id="gallery-wrapper"> <div class="gallery-item"> <input type="file" name="images[]" required> </div> </div> <button type="button" id="add-gallery">Add More Images</button> <button type="submit">Save Product</button> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $('#add-gallery').click(function(){ $('#gallery-wrapper').append(` <div class="gallery-item"> <input type="file" name="images[]" required> <button type="button" class="remove-gallery">Remove</button> </div> `); }); $(document).on('click', '.remove-gallery', function(){ $(this).closest('.gallery-item').remove(); }); }); </script>

✅ This allows the user to add/remove multiple images dynamically.

Step 4: Controller Logic

namespace App\Http\Controllers;

use App\Models\Product;
use App\Models\ProductGallery;
use Illuminate\Http\Request;

class ProductController extends Controller
{
public function create()
{
return view('products.create');
}

public function store(Request $request)
{
$request->validate([
'name' => 'required|string',
'price' => 'required|numeric',
'images.*' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
]);

// Insert into products table
$product = Product::create([
'name' => $request->name,
'price' => $request->price,
]);

// Insert multiple images
if($request->hasFile('images')){
foreach($request->file('images') as $image){
$path = $image->store('product_images', 'public');
$product->galleries()->create([
'image_path' => $path,
]);
}
}

return redirect()->back()->with('success', 'Product and Gallery images added successfully!');
}
}

Step 5: Routes

use App\Http\Controllers\ProductController;

Route::get('/products/create', [ProductController::class, 'create'])->name('products.create');
Route::post('/products/store', [ProductController::class, 'store'])->name('products.store');

Step 6: How It Works

  • User enters product name & price.
  • User adds multiple images dynamically using jQuery.

On form submission:

  • Product is saved in the products table.
  • All uploaded images are stored in storage/app/public/product_images.
  • Each image is inserted into product_galleries with product_id.

 

Categorized in:

Laravel,