Breaking News: Grepper is joining You.com. Read the official announcement!

upload multiple files axios

Vu Nguyen answered on June 22, 2020 Popularity 9/10 Helpfulness 5/10

answer upload multiple files axios

related upload and send file to axios multipart

upload multiple files axios

Comment

// silly note but make sure you're constructing files for these (if you're recording audio or video yourself)
// if you send it something other than file it will fail silently with this set-up 
let arrayOfYourFiles=[image, audio, video]
// create formData object
const formData = new FormData();
arrayOfYourFiles.forEach(file=>{
  formData.append("arrayOfFilesName", file);
});

axios({
  method: "POST",
  url: serverUrl + "/multiplefiles",
  data: formData,
  headers: {
    "Content-Type": "multipart/form-data"
  }
})
//some error handling

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: axios javascript upload

Link to this answer
Share Copy Link

Contributed on May 25 2022

Vu Nguyen

0 Answers Avg Quality 2/10

Closely Related Answers

upload and send file to axios multipart

Comment

-2

import React from 'react'
import axios, { post } from 'axios';

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }

  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then((response)=>{
      console.log(response.data);
    })
  }

  onChange(e) {
    this.setState({file:e.target.files[0]})
  }

  fileUpload(file){
    const url = 'http://example.com/file-upload';
    const formData = new FormData();
    formData.append('file',file)
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}



export default SimpleReactFileUpload

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: axios axio

Link to this answer
Share Copy Link

Contributed on Jun 22 2020

Long Loris

0 Answers Avg Quality 2/10

upload multiple files axios

Contents

More Related Answers

upload multiple files axios

Closely Related Answers

upload and send file to axios multipart

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.