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

oncebar's avatar

Inertiajs : Upload Multiple images

hi, i want to upload more than one image in my laravel-ineria-vue application

<template>
    <div class="newservice">
        <form @submit.prevent="submit" enctype="multipart/form-data">
            <div class="new__service__form">
                <div class="new__form__group new__group">
                    <span>الصور</span>
                    <input @input="form.gallery = $event.target.files[0]"
							type="file"
							multiple="multiple"
							accept="image/jpg, image/jpeg, image/png"
							/>
                    <p v-if="$page.props.errors.gallery">
						{{ $page.props.errors.gallery }}
					</p>
                </div>
                <div class="new__form__group">
                    <button type="submit">save</button>
                </div>
            </div>
        </form>
    </div>
</template>


<script setup>
    import {useForm} from "@inertiajs/inertia-vue3"

    let form = useForm({
        gallery: [],
    });

    let submit = () => {
        form.post('/admin/services/new');
    }
</script>


public function store(Request $request) {
        $request->validate([
            "gallery"      =>     "required",
        ]);

        if($request->hasfile('gallery')){
            $_images_ = array();
            foreach($request->file('gallery') as $imgs)
            {
                $imgs_newname = Str::random(8) . '.' . $imgs->getClientOriginalExtension();
                $imgs->move('image/service/',$imgs_newname);
                $_images_[] = $imgs_newname;
            }
        }

        $service__images  =  implode("-",$_images_);
        return $service__images;
    }

what's the problem?

0 likes
15 replies
vincent15000's avatar

Yes ... what's the problem ? You can only upload one file ? Do you have any error message ? Can you detail your problem please ?

christian-qode's avatar

@oncebar So, no image is uploaded at all? Please describe your problem detailled so we can understand the issue. Right now, it's not clear for me.

Please consider you're returning the image names imploded (instead of saving it to the database or something like that).

1 like
christian-qode's avatar

@oncebar go to 'Network' tab, you should see a request there when you press the submit button?

If you don't see any request at all, the problem is in the front-end of your application.

1 like
oncebar's avatar

@christian-qode i seet 2 requests

the first request with status = 200

and another request with status = 302

Request URL: http://127.0.0.1:8000/admin/services/new
Request Method: POST
Status Code: 302 Found
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
1 like
christian-qode's avatar

@oncebar Great, so the requests are executed and also with a 200 status.

If you open the 'Preview' tab of the 200 request you can see the information returned by Laravel. This will consist of both general information for Inertia as well as information about the request. Can you find anything interested here? Or, maybe the imploded list of uploaded images?

You can also add some debugging dd() to the store method to debug parts of your code. You can find the information in the 'Preview' or 'Response' tab in your console.

1 like
oncebar's avatar

@christian-qode request with status = 200

{component: "Dashboard/NewService", props: {errors: {}}, url: "/admin/services/new", version: ""}
component: "Dashboard/NewService"
props: {errors: {}}
errors: {}
url: "/admin/services/new"
version: ""

request with status = 302

failed to load response data: No content available because this request was redirected
1 like
oncebar's avatar

@christian-qode

dd(request->all());

array:4 [▼ // app\Http\Controllers\ServiceController.php:63
  "gallery" => Illuminate\Http\UploadedFile {#1126 ▼
    -test: false
    -originalName: "b_logo.jpg"
    -mimeType: "image/jpeg"
    -error: 0
    #hashName: null
    path: "C:\xampp\tmp"
    filename: "phpAD33.tmp"
    basename: "phpAD33.tmp"
    pathname: "C:\xampp\tmp\phpAD33.tmp"
    extension: "tmp"
    realPath: "C:\xampp\tmp\phpAD33.tmp"
    aTime: 2022-10-21 07:06:33
    mTime: 2022-10-21 07:06:33
    cTime: 2022-10-21 07:06:33
    inode: 5348024558417104
    size: 20320
    perms: 0100666
    owner: 0
    group: 0
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
    linkTarget: "C:\xampp\tmp\phpAD33.tmp"
  }
]
1 like
christian-qode's avatar
christian-qode
3 years ago
Best Answer
Level 8

@oncebar Thank you. As you can see the "Gallery" is an instance of "UploadedFile". Your script is expecting an array of UploadedFiles to loop over in the foreach loop.

The problem is:

             <input @input="form.gallery = $event.target.files[0]"

In this row, you override form.gallery with the first (key) file.

You should remove the key to pass through the full array of files.

              <input @input="form.gallery = $event.target.files"

If you change this, it wil work.

3 likes

Please or to participate in this conversation.