So I am trying to upload images for a project where each image can have its own description or caption. I am trying to do this through the project creation form. Now, everything works except that I am getting duplicate entries in the project_images table because of the nested foreach loop, take a look at the summarised structure of the code Please, specifically the logic in the storProject method if anyone can help I will be forever grateful. Thank you.
I am using Laravel with Livewire.
Project Model
public function up()
{
Schema::create('projects', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('user_id');
$table->foreign('user_id')->references('id')->on('users');
$table->string('title');
$table->integer('budget');
$table->string('proposed_by');
$table->string('executed_by');
$table->string('status')->nullable();
$table->integer('progress_indicator')->nullable();
$table->date('starting_date');
$table->date('completion_date')->nullable();
$table->string('cover_image')->nullable();
$table->mediumText('body')->nullable();
$table->timestamps();
});
}
Project_images Model
public function up()
{
Schema::create('project_images', function (Blueprint $table) {
$table->id();
$table->string('images');
$table->string('caption')->nullable();
$table->UnsignedBigInteger('project_id');
$table->foreign('project_id')->references('id')->on('projects')->onDelete('cascade');
$table->timestamps();
});
}
The Form
<x-slot name="content">
<x-errors />
<div class="space-y-8 divide-y divide-gray-200 mt-10">
<form method="#" enctype="multipart/form-data">
@if ($projectImages)
Images Preview:
<div class="flex flex-row m-8 ">
@foreach ($projectImages as $key => $projectImage)
<div class="flex flex-col gap-3">
<img width="100%" src="{{ $projectImage->temporaryUrl() }}">
<x-input placeholder="Caption"
wire:model.defer="captions.{{ $key }}" />
</div>
@endforeach
</div>
@endif
</div>
<label class="inline-block mb-2 text-gray-500">Upload
Projects Images</label>
<div class="flex items-center justify-center w-full">
<label
class="flex flex-col w-full h-32 border-2 border-dashed hover:bg-gray-500 hover:border-gray-300">
<div class="flex flex-col items-center justify-center pt-7">
<p class="pt-1 text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
Select a photo</p>
</div>
<input wire:model="projectImages" type="file" multiple class="opacity-0" />
</label>
</div>
<x-textarea wire:model.lazy="body" label="Body" placeholder="write your article" />
</form>
</div>
</x-slot>
<x-slot name="footer">
@if ($projectId)
<div class="flex items-center gap-x-3 justify-end">
<x-button wire:click="CancelConfirmation" label="Cancel" flat />
<x-button type="submit" wire:click="updateProject" label="Update" wire:loading.attr="disabled"
primary />
</div>
@else
<div class="flex items-center gap-x-3 justify-end">
<x-button wire:click="CancelConfirmation" label="Cancel" flat />
<x-button type="submit" wire:click="storeProject" label="Create" wire:loading.attr="disabled"
primary />
</div>
@endif
</x-slot>
</x-jet-dialog-modal>
The Project Component
public function storeProject()
{
$this->validate([
'title' => 'required',
'status' => 'required',
'budget' => 'required',
'proposedBy' => 'required',
'executedBy' => 'required',
'startingDate' => 'required',
'completionDate' => 'required',
'progressIndicator' => 'required',
'body' => 'required',
'image' => 'image|max:1024|nullable'
]);
$image_name = $this->image->getClientOriginalName();
$this->image->storeAs('public/photos', $image_name);
$project = new Project();
$project->user_id = auth()->user()->id;
$project->title = $this->title;
$project->status = $this->status;
$project->budget = $this->budget;
$project->proposed_by = $this->proposedBy;
$project->executed_by = $this->executedBy;
$project->starting_date = Carbon::create($this->startingDate);
$project->completion_date = Carbon::create($this->completionDate);
$project->progress_indicator = $this->progressIndicator;
$project->body = $this->body;
$project->cover_image = $image_name;
$project->save();
foreach ($this->projectImages as $projectImage) {
$image_name = $projectImage->getClientOriginalName();
$projectImage->storeAs('public/photos', $image_name);
foreach ($this->captions as $caption) {
$projectImages = new ProjectImages();
$projectImages->project_id = $project->id;
$projectImages->images = $image_name;
$projectImages->caption = $caption;
$projectImages->save();
}
}
$this->notification()->success(
$title = 'Success',
$description = 'Project Created Successfully'
);
$this->reset();
}