upload and send file to axios multipart

Long Loris answered on June 22, 2020 Popularity 10/10 Helpfulness 2/10

answer upload and send file to axios multipart

related upload multiple files axios

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 file javascript multipart send upload

Link to this answer
Share Copy Link

Contributed on Jun 22 2020

Long Loris

0 Answers Avg Quality 2/10

Closely Related Answers

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 axio

Link to this answer
Share Copy Link

Contributed on May 25 2022

Vu Nguyen

0 Answers Avg Quality 2/10

upload and send file to axios multipart

Contents

More Related Answers

upload and send file to axios multipart

Closely Related Answers

upload multiple files axios

Grepper

Documentation

Social

Legal

Contact

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