upload files in react using axios

Khadidja Arezki answered on May 14, 2022 Popularity 10/10 Helpfulness 10/10

answer upload files in react using axios

upload files in react using axios

Comment

import React from 'react';
import axios from 'axios';

const Form = () => {
  // a local state to store the currently selected file.
  const [selectedFile, setSelectedFile] = React.useState(null);

  const handleSubmit = (event) => {
    event.preventDefault()
    const formData = new FormData();
    formData.append("selectedFile", selectedFile);
    try {
      const response = await axios({
        method: "post",
        url: "/api/upload/file",
        data: formData,
        headers: { "Content-Type": "multipart/form-data" },
      });
    } catch(error) {
      console.log(error)
    }
  }

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0])
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileSelect}/>
      <input type="submit" value="Upload File" />
    </form>
  )
};

export default Form;

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: surajsharma.net

Tags: axios javascript upload using

Link to this answer
Share Copy Link

Contributed on May 14 2022

Khadidja Arezki

0 Answers Avg Quality 2/10

upload files in react using axios

Contents

More Related Answers

upload files in react using axios

Grepper

Documentation

Social

Legal

Contact

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