How to append multiple imagein FormData?

Can you show us some more code? How are the file variables being created?

There you go

		    let file = $('#inputProjectImage').prop('files')[0];
                    let file1 = $('#inputProjectImage1').prop('files')[0];
                    let file2 = $('#inputProjectImage2').prop('files')[0];
                    let file3 = $('#inputProjectImage3').prop('files')[0];
                    let file4 = $('#inputProjectImage4').prop('files')[0];
                    let file5 = $('#inputProjectImage5').prop('files')[0];
                    let file6 = $('#inputProjectImage6').prop('files')[0];
                    let file7 = $('#inputProjectImage7').prop('files')[0];
                    let file8 = $('#inputProjectImage8').prop('files')[0];
                    let file9 = $('#inputProjectImage9').prop('files')[0];
                    let file10 = $('#inputProjectImage10').prop('files')[0];

So you have 11 inputs numbered through 1 to 10 and one without a number.

<input type="file" id="inputProjectImage1">

And you are trying to append them to the form? What happens if you console.log the file1, file2, etc to the console, does it have the value you expect?

Yes, I have 11 files from 0-10. Only the first file response me the image name. The rest of them doesn't. It says internal server error in console.

From the first file: public/t9ual5OZrSzZBl3HUNtYQvpYxq2h7tEpXEPXAJN5.png

From the second file: Failed to load resource: the server responded with a status of 500 (Internal Server Error)

First File Input Field can have multiple attribute. So, that user can select multiple files.

<input type="file" id="files" name="files[]" accept="image/*" multiple/>

Then, Form Data append would be something like this.

let formData = new FormData();
let files = $('#files').prop('files');
for(let i = 0 ; i < files.length ; i++){
	formData.append('files[]', files[i]);
}

Then, Laravel Backend would be:

request()->validate([
        'files.*' => 'mimes:jpeg,png,jpg,gif,svg',
]);
// Laravel/PHP will automatically create list of request with [] in it

if(request()->has('files')){
        foreach (request()->file('files') as $file) {
            $name = (string) Str::uuid() . '.' . $file->extension();
            $file->storeAs('upload', $name);
        }
}

I agree with @niush - I feel like this would be a better approach for you to take for multiple file upload, unless there is a reason you are keeping each file separate.

Whats confusing me, is you say the first has a response of the file name, and then you have a second response. So it sounds like you are making multiple requests to upload these files, whereas you are setting this up so you can upload the files at the same time?

If not, the error 500 should have left something in your log files as to the reason for the error. I would take a look there.

I wanted to make the file separate is because I wanted to add the functionality to edit the specific image.

Thanks, NUISH. Let me try!

Hei @niush I have tried that a long time. It didn't work. I have no idea why. Each time I hit the save button it says

The GET method is not supported for this route. Supported methods: POST.

But my route and Axios both have the post method. Route:

Route::post('/addproject', 'ProjectController@addproject')->middleware('loginMiddleware');

Axios

       axios.post('/addproject', formData,config).
                    then(function (response) {
                        alert(response.data);
                        console.log(response.data);
                        if (response.data == 1) {
                 		//
                        } else {
                               //
                        }

Can you have a look where is the wrong? The input:

                    <input type="file" id="files" name="files[]"  accept="image/*" multiple/>

The method:

               function addProject() {
                    let formData = new FormData();
                    let files = $('#files').prop('files');
                    for(let i = 0 ; i < files.length ; i++){
                        formData.append('files[]', files[i]);
                    }
                    let config = {headers:{
                        'content-type':'multipart/form-data'
                        }
                    }
                    axios.post('/addproject', formData,config).
                    then(function (response) {
                        alert(response.data);
                        console.log(response.data);
                        if (response.data == 1) {
                            alert('Project has been added!');

                        } else {
                            alert('Project failed to add!');
                        }
                    }).catch(function () {

                    });
                }

In the controller:

 function addproject(Request $request)
    {
        $addProjectImage = $request->file('files');
        foreach ($addProjectImage as $file) {
            return $name = (string)Str::uuid() . '.' . $file->extension();
            $file->storeAs('public', $name);
        }

But still, file doesn't store. No matter the Public path or upload path.

That look fine and should be working. Make sure there are not any extra /addproject elsewhere with GET method. Otherwise it looks good. May be a php artisan cache:clear and php artisan route:clear might help.

Already tried. It didn’t work. What else can I do?