ReactJS: How to send multiple files in server (Laravel)

Question

I'm new in ReactJS and my backend is laravel and I have problem regarding inserting multiple files to the database, however if i use only the single upload (inserting one file to the database it's working for me.).

PROBLEM: regarding inserting multiple files in the database.

GOAL: To insert multiple files to the database

I have here

FORMDATA:

const formData = new FormData();
formData.append('myFile', this.state.image);

RESPONSE:

axios.post('/api/save_gallery_album_image', formData).then(response => {
                console.log(response);
            }).catch(error => (error.response));

OnChange:

handleChangeImage(e){
    this.setState({
        image:e.target.files[0]
    })

    // console.log(e.target.files);
}

JSX:

<label>Image</label>
<div className="custom-file">
<input type="file" 
name="image"
multiple
onChange={this.handleChangeImage}
className="custom-file-input form-control" 
accept="image/x-png,image/gif,image/jpeg" 
id="file_selected"/>
<label className="custom-file-label" htmlFor="validatedCustomFile">Choose file...</label>
</div>

Server side Controller:

public function save_gallery_album_image(Request $request)
{
    $multiple_gallery_file_upload = $request->file('myFile');
    $titleValue = $request->get('titleValue');
    $pageValue = $request->get('pageValue');
    $now = new DateTime();

    if($request->hasFile('myFile'))
    {
        foreach($multiple_gallery_file_upload as $myfiles)
        {
            $uniqueid=uniqid();
            $original_name=$request->file('myFile')->getClientOriginalName(); 
            $size=$request->file('myFile')->getSize();
            $extension=$request->file('myFile')->getClientOriginalExtension();

            $name=$uniqueid.'.'.$extension;
            $path=$request->file('myFile')->storeAs('public',$name);

            DB::insert('INSERT INTO album_category (cid,image,created_at) VALUES (?,?,?) ',[

                $titleValue,
                $name,
                $now


            ]);

        }

        return response()->json('Input Saved');
    }


}

<input> elements name attribute needs to be formatted like this: <input name="images[]" multiple/> then you can access it in laravel:$images = $request->file('images'); if($request->has('images'){//loop through foreach($images as $image){$image->} — user3647971
– user3647971, Commented Oct 19, 2018 at 1:13
Why some one gives down to my question? is their need to improve? — DevGe
– DevGe, Commented Oct 19, 2018 at 7:35
You can refer to this question to solve your problem: <stackoverflow.com/questions/55596514/…> — Israel Obanijesu
– Israel Obanijesu, Commented Apr 9, 2019 at 17:01

Sanat Gupta · Accepted Answer · 2019-05-07 09:29:29Z

1

I am facing the same problem I have fixed like this I hope it's helpful for you.

put this code on the right place and check it's working to upload multiple images Thanks.

<form>
<input name="product_image" type="file" multiple onChange={e => this.HandleProductImage(e)}/>
<button type="submit" onClick={e =>this.submitForm(e)}>
</form>


HandleProductImage = e => {
    this.setState({
      product_image: e.target.files
    });
  };

submitForm = e => {
     const product = new FormData();
     if (this.state.product_image) {
        for (const file of this.state.product_image) {
          product.append("image", file);
        }
      }
    //then use your API to send form data
}

answered May 7, 2019 at 9:29

Sanat Gupta

1,1641 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bonbon42 · Accepted Answer · 2018-10-20 14:14:48Z

I guess you should request multiple time as files existed using loop.

When you request array of files in multipart form, the multipart form don't include all of your files. So you should send upload requests separately.

After check the comment, I added some sample code.

OnChange:

handleChangeImage(e) {
  // Set file list
  let files = e.target.files;
  files.map((file) => {
    // make diffent formData per each file and request.
    let formData = new FormData();
    formData.append('myFile', file);
    axios.post('/api/save_gallery_album_image', formData)
      .then(response => {
        console.log(response);
      }).catch(error => (error.response));
  });
}

If you want to save multiple files in one request, I think you should also change your server-side codes.

For now, your server might save just one file per one request.

Collectives™ on Stack Overflow

ReactJS: How to send multiple files in server (Laravel)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related