Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Adams_'s avatar

Adding captions or descriptions to multiple image upload in Laravel

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();
}
0 likes
1 reply
jlrdw's avatar

Normally I do not like storing any json, but for a small amount it's okay. Can you store an image together with a comment in a json field? I do not mean all images, just one image with a single comment in the related table.

Or relate a comment to an image id row. Probably several ways to do this.

Please or to participate in this conversation.