Laravel 8 Multiple Image Upload and store in mysql - Stack Overflow|江阴雨辰互联

I need to store image in DB and folder , but my code store only one image and I want to store multiple image . I use Laravel 8.

This is my controller

public function store(Request $request)
{
  $request->validate([
    'brand' => 'required|string|max:255',
    'model' => 'required|string|max:255',
    'type' => 'required|string',
    'status' => 'required|string',
    'location' => 'required|string',
    'seats' => 'required|integer',
    'year' => 'required|integer',
    'color' => 'required|string',
    'automatic' => 'required|string',
    'fuel_type' => 'required|string',
    'description' => 'nullable|string',
    'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // Proverava svaku    sliku
]);

// Prvo kreiramo vozilo u bazi
$vehicle = Vehicle::create($request->only([
    'brand', 'model', 'type', 'status', 'location', 'seats', 'year', 'color', 'automatic', 'fuel_type', 'description'
]));

// Proveravamo da li su slike poslate
if ($request->hasFile('images')) {
    foreach ($request->file('images') as $image) {
        // Pravimo folder sa ID-om vozila
        $folderPath = 'vehicles/' . $vehicle->id;
        $imagePath = $image->store($folderPath, 'public');

        // Čuvamo svaku sliku u bazi
        VehicleImage::create([
            'vehicle_id' => $vehicle->id,
            'path' => $imagePath, // Koristi ispravno ime kolone
        ]);
    }
}


return redirect()->route('admin.vehicles.vehicles')->with('success', 'Vozilo uspešno kreirano!');
}

and this is blade.php

<div class="card">
    <div class="card-header">
        <h3>Detalji vozila</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.vehicles.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="brand">Brand</label>
                <input type="text" name="brand" class="form-control" value="{{ old('brand') }}">
                @error('brand') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="model">Model</label>
                <input type="text" name="model" class="form-control" value="{{ old('model') }}">
                @error('model') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="type">Tip vozila</label>
                 <select name="type" class="form-control">
               <option value="Economy class" {{ old('type') == 'Economy class' ? 'selected' : '' }}>Economy class</option>
                    <option value="Standard" {{ old('type') == 'Standard' ? 'selected' : '' }}>Standard</option>
                    <option value="SUV" {{ old('type') == 'SUV' ? 'selected' : '' }}>SUV</option>
                    <option value="Lux" {{ old('type') == 'Lux' ? 'selected' : '' }}>Lux</option>
                    <option value="Convertibles" {{ old('type') == 'Convertibles' ? 'selected' : '' }}>Convertibles</option>
                     <option value="Van" {{ old('type') == 'Van' ? 'selected' : '' }}>Van</option>
                      </select>
                @error('type') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="status">Status</label>
                <select name="status" class="form-control">
                    <option value="Available" {{ old('status') == 'Available' ? 'selected' : '' }}>Available</option>
                    <option value="Reserved" {{ old('status') == 'Reserved' ? 'selected' : '' }}>Reserved</option>
                    <option value="In use" {{ old('status') == 'In use' ? 'selected' : '' }}>In use</option>
                    <option value="In maintenance" {{ old('status') == 'In maintenance' ? 'selected' : '' }}>In maintenance</option>
                    <option value="Repairing the vehicle" {{ old('status') == 'Repairing the vehicle' ? 'selected' : '' }}>Repairing the vehicle</option>
                </select>
                @error('status') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="location">Lokacija</label>
                <input type="text" name="location" class="form-control" value="{{ old('location') }}">
                @error('location') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

           

            <div class="form-group">
                <label for="seats">Broj sjedišta</label>
                <input type="number" name="seats" class="form-control" value="{{ old('seats') }}">
                @error('seats') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="year">Godina</label>
                <input type="number" name="year" class="form-control" value="{{ old('year') }}">
                @error('year') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="color">Boja vozila</label>
                <input type="text" name="color" class="form-control" value="{{ old('color') }}">
                @error('color') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="automatic">Mjenjač</label>
                <select name="automatic" class="form-control">
                    <option value="Manual " {{ old('automatic') == 'Manual' ? 'selected' : '' }}>Manual</option>
                    <option value="Automatic" {{ old('automatic') == 'Automatic' ? 'selected' : '' }}>Automatic</option>
                    
                </select>
                @error('automatic') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="fuel_type">Gorivo</label>
                <input type="text" name="fuel_type" class="form-control" value="{{ old('fuel_type') }}">
                @error('fuel_type') <span class="text-danger">{{ $message }}</span> @enderror
            </div>


            <div class="form-group">
                <label for="description">Opis</label>
                <textarea name="description" class="form-control">{{ old('description') }}</textarea>
                @error('description') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

          
<div class="form-group">
    <label for="images">Slike</label>
    <input type="file" name="images[]" class="form-control" id="imageInput" multiple>
    @error('images') <span class="text-danger">{{ $message }}</span> @enderror
    <div id="imagePreview" class="mt-3 d-flex flex-wrap"></div>
</div>

            <button type="submit" class="btn btn-primary">Kreirajte vozilo</button>
        </form>
    </div>
</div>

<script>
   document.getElementById('imageInput').addEventListener('change', function(event) {
        let imagePreview = document.getElementById('imagePreview');

        for (let file of event.target.files) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let imageContainer = document.createElement('div');
                imageContainer.style.position = "relative";
                imageContainer.style.display = "inline-block";
                imageContainer.style.marginRight = "10px";

                let imgElement = document.createElement('img');
                imgElement.src = e.target.result;
                imgElement.style.width = "150px";
                imgElement.style.height = "100px";
                imgElement.style.objectFit = "cover";
                imgElement.style.border = "1px solid #ddd";
                imgElement.style.borderRadius = "5px";

                let closeButton = document.createElement('span');
                closeButton.innerHTML = "&times;";
                closeButton.style.position = "absolute";
                closeButton.style.top = "5px";
                closeButton.style.right = "5px";
                closeButton.style.backgroundColor = "red";
                closeButton.style.color = "white";
                closeButton.style.borderRadius = "50%";
                closeButton.style.width = "20px";
                closeButton.style.height = "20px";
                closeButton.style.display = "flex";
                closeButton.style.justifyContent = "center";
                closeButton.style.alignItems = "center";
                closeButton.style.cursor = "pointer";
                closeButton.style.fontSize = "16px";
                
                closeButton.addEventListener('click', function() {
                    imageContainer.remove();
                });

                imageContainer.appendChild(imgElement);
                imageContainer.appendChild(closeButton);
                imagePreview.appendChild(imageContainer);
            };
            reader.readAsDataURL(file);
        }
    });
</script>

To find solution to multiple image store in db and folder

I need to store image in DB and folder , but my code store only one image and I want to store multiple image . I use Laravel 8.

This is my controller

public function store(Request $request)
{
  $request->validate([
    'brand' => 'required|string|max:255',
    'model' => 'required|string|max:255',
    'type' => 'required|string',
    'status' => 'required|string',
    'location' => 'required|string',
    'seats' => 'required|integer',
    'year' => 'required|integer',
    'color' => 'required|string',
    'automatic' => 'required|string',
    'fuel_type' => 'required|string',
    'description' => 'nullable|string',
    'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // Proverava svaku    sliku
]);

// Prvo kreiramo vozilo u bazi
$vehicle = Vehicle::create($request->only([
    'brand', 'model', 'type', 'status', 'location', 'seats', 'year', 'color', 'automatic', 'fuel_type', 'description'
]));

// Proveravamo da li su slike poslate
if ($request->hasFile('images')) {
    foreach ($request->file('images') as $image) {
        // Pravimo folder sa ID-om vozila
        $folderPath = 'vehicles/' . $vehicle->id;
        $imagePath = $image->store($folderPath, 'public');

        // Čuvamo svaku sliku u bazi
        VehicleImage::create([
            'vehicle_id' => $vehicle->id,
            'path' => $imagePath, // Koristi ispravno ime kolone
        ]);
    }
}


return redirect()->route('admin.vehicles.vehicles')->with('success', 'Vozilo uspešno kreirano!');
}

and this is blade.php

<div class="card">
    <div class="card-header">
        <h3>Detalji vozila</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.vehicles.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="brand">Brand</label>
                <input type="text" name="brand" class="form-control" value="{{ old('brand') }}">
                @error('brand') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="model">Model</label>
                <input type="text" name="model" class="form-control" value="{{ old('model') }}">
                @error('model') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="type">Tip vozila</label>
                 <select name="type" class="form-control">
               <option value="Economy class" {{ old('type') == 'Economy class' ? 'selected' : '' }}>Economy class</option>
                    <option value="Standard" {{ old('type') == 'Standard' ? 'selected' : '' }}>Standard</option>
                    <option value="SUV" {{ old('type') == 'SUV' ? 'selected' : '' }}>SUV</option>
                    <option value="Lux" {{ old('type') == 'Lux' ? 'selected' : '' }}>Lux</option>
                    <option value="Convertibles" {{ old('type') == 'Convertibles' ? 'selected' : '' }}>Convertibles</option>
                     <option value="Van" {{ old('type') == 'Van' ? 'selected' : '' }}>Van</option>
                      </select>
                @error('type') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="status">Status</label>
                <select name="status" class="form-control">
                    <option value="Available" {{ old('status') == 'Available' ? 'selected' : '' }}>Available</option>
                    <option value="Reserved" {{ old('status') == 'Reserved' ? 'selected' : '' }}>Reserved</option>
                    <option value="In use" {{ old('status') == 'In use' ? 'selected' : '' }}>In use</option>
                    <option value="In maintenance" {{ old('status') == 'In maintenance' ? 'selected' : '' }}>In maintenance</option>
                    <option value="Repairing the vehicle" {{ old('status') == 'Repairing the vehicle' ? 'selected' : '' }}>Repairing the vehicle</option>
                </select>
                @error('status') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="location">Lokacija</label>
                <input type="text" name="location" class="form-control" value="{{ old('location') }}">
                @error('location') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

           

            <div class="form-group">
                <label for="seats">Broj sjedišta</label>
                <input type="number" name="seats" class="form-control" value="{{ old('seats') }}">
                @error('seats') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="year">Godina</label>
                <input type="number" name="year" class="form-control" value="{{ old('year') }}">
                @error('year') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="color">Boja vozila</label>
                <input type="text" name="color" class="form-control" value="{{ old('color') }}">
                @error('color') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="automatic">Mjenjač</label>
                <select name="automatic" class="form-control">
                    <option value="Manual " {{ old('automatic') == 'Manual' ? 'selected' : '' }}>Manual</option>
                    <option value="Automatic" {{ old('automatic') == 'Automatic' ? 'selected' : '' }}>Automatic</option>
                    
                </select>
                @error('automatic') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="fuel_type">Gorivo</label>
                <input type="text" name="fuel_type" class="form-control" value="{{ old('fuel_type') }}">
                @error('fuel_type') <span class="text-danger">{{ $message }}</span> @enderror
            </div>


            <div class="form-group">
                <label for="description">Opis</label>
                <textarea name="description" class="form-control">{{ old('description') }}</textarea>
                @error('description') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

          
<div class="form-group">
    <label for="images">Slike</label>
    <input type="file" name="images[]" class="form-control" id="imageInput" multiple>
    @error('images') <span class="text-danger">{{ $message }}</span> @enderror
    <div id="imagePreview" class="mt-3 d-flex flex-wrap"></div>
</div>

            <button type="submit" class="btn btn-primary">Kreirajte vozilo</button>
        </form>
    </div>
</div>

<script>
   document.getElementById('imageInput').addEventListener('change', function(event) {
        let imagePreview = document.getElementById('imagePreview');

        for (let file of event.target.files) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let imageContainer = document.createElement('div');
                imageContainer.style.position = "relative";
                imageContainer.style.display = "inline-block";
                imageContainer.style.marginRight = "10px";

                let imgElement = document.createElement('img');
                imgElement.src = e.target.result;
                imgElement.style.width = "150px";
                imgElement.style.height = "100px";
                imgElement.style.objectFit = "cover";
                imgElement.style.border = "1px solid #ddd";
                imgElement.style.borderRadius = "5px";

                let closeButton = document.createElement('span');
                closeButton.innerHTML = "&times;";
                closeButton.style.position = "absolute";
                closeButton.style.top = "5px";
                closeButton.style.right = "5px";
                closeButton.style.backgroundColor = "red";
                closeButton.style.color = "white";
                closeButton.style.borderRadius = "50%";
                closeButton.style.width = "20px";
                closeButton.style.height = "20px";
                closeButton.style.display = "flex";
                closeButton.style.justifyContent = "center";
                closeButton.style.alignItems = "center";
                closeButton.style.cursor = "pointer";
                closeButton.style.fontSize = "16px";
                
                closeButton.addEventListener('click', function() {
                    imageContainer.remove();
                });

                imageContainer.appendChild(imgElement);
                imageContainer.appendChild(closeButton);
                imagePreview.appendChild(imageContainer);
            };
            reader.readAsDataURL(file);
        }
    });
</script>

To find solution to multiple image store in db and folder

Share Improve this question edited Feb 12 at 2:54 Paul T. 4,95212 gold badges47 silver badges63 bronze badges asked Feb 11 at 11:07 pape 2495 silver badges17 bronze badges

You have used id=imageInput, where is it in your code? Don't you need to use <input type=”file” name=”files[]” multiple> – Ankit Jindal Commented Feb 11 at 13:53
Format code correctly – Starship Remembers Shadow Commented Feb 12 at 1:04

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

First modify the way you show the errors for the images field:

`<input type="file" name="images[]" id="imagesInput" multiple>
@if ($errors->has('images.*'))
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->get('images') as $error_message)
                <li>{{ $error_message }}</li>
            @endforeach
        </ul>
    </div>
@endif`

Then in the controller test like this after validating:

  $nr=0;
            if ($request->hasFile('images.*')) {
                foreach ($request->file('images.*') as $image) {
                  $nr++;  
                }
            }
            return 'Passed validation '.$nr;

Then replace $nr++; with your code for one image.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745216216a4617036.html

Laravel 8 Multiple Image Upload and store in mysql - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

Laravel 8 Multiple Image Upload and store in mysql - Stack Overflow

1 Answer 1

相关推荐