Sending multiple images from HTML INPUT tag using AJAX to Laravel Controller along with other data from outside the form

Question

$('#modal-save').on('click', function(event){
$.ajax({
    method: 'POST',
    url: urlEdit,
    data: {
        body: $('#post-body').val(),
        deletePhoto: deletePhoto,
        postId: postId,
         _token: token 
    }
})
.done(function(msg){
    $(postBodyElement).text(msg['new_body']);
    location.reload();
    $('#edit-modal').modal('hide');
});

});

What I am trying to do is edit a post. What happens is, an edit modals opens and previous data and photos are displayed to the user. If the user clicks on the delete button all the photos to that post are deleted.He can edit the text that will be updated in the database. Right now I am sending the data required to do this using ajax. Now I want to insert new photos to the that post. I have a multiple input tag in my html.

<input id="post-input" name="photos[]" class="post-input" type="file multiple accept='image/*,video/*' />

and my controller function looks something like this

 public function postEditPost(Request $request)
{
    $this->validate($request, [
        'body' => 'required'
    ]);
    $post = Post::find($request['postId']);
    if (Auth::user() != $post->user){
        return redirect()->back();
    }
    $photos = Photos::where('post_id', $request['postId'])->get();
    $deletePhoto =  $request['deletePhoto'];
    if($deletePhoto == 0){
        foreach($photos as $photo){
            $photo->delete();
        }
    }
  
    $post->body = $request['body'];
    $post->update();
    return response()->json(['new_body' => $post->body],200);
}

The two key parts are: headers: { 'content-type': 'multipart/form-data' }, and document.getElementById("create-game-file").files[0]. Also you will need to use FormData for what you are posting. — Kurt Friars
– Kurt Friars, Commented Jul 7, 2020 at 5:20

Kurt Friars · Accepted Answer · 2020-07-07 05:34:21Z

You will need something like the following:

HTML:

<input id="images-input" class="post-input" type="file" multiple accept='image/*' />

JS:

let data = new FormData();
let input = document.getElementById("images-input");

data.append('body', $('#post-body').val());
data.append('deletePhoto', deletePhoto);
data.append('postId', postId);
data.append('_token', token); 
data.append('images', input.files.map(function (image) {
    return image.file;
});

$.ajax({
    method: 'POST',
    url: urlEdit,
    headers: {
        'content-type': 'multipart/form-data',
    },
    data: data,
})

Controller:

public function postEditPost(Request $request)
{
    $this->validate($request, [
        ...
        'images' => ['nullable', 'array'], // Unless they are mandatory,
        'images.*' => ['image'],
    ]);

    $images = [];
    
    foreach ($request->input('images') as $key => $image) {
        $images[] = $request->file("images.$key");
    }
    ...
}

Now you have an array of UploadedFile objects, you can store them as you wish.

Collectives™ on Stack Overflow

Sending multiple images from HTML INPUT tag using AJAX to Laravel Controller along with other data from outside the form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related