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

How to make a file upload app in React

Add Answer

Green Team answered on March 30, 2022 Popularity 9/10 Helpfulness 3/10

answer How to make a file upload app in React

related upload file in react

related how to upload file with button react

How to make a file upload app in React

Comment

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import axios from 'axios';

const FileUpload = () => {
  const onDrop = useCallback(async (acceptedFiles) => {
    const file = acceptedFiles[0];
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('http://your_server_ip:5000/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      console.log('File uploaded successfully:', response.data);
    } catch (error) {
      console.error('Error uploading file:', error.message);
    }
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div>
      <div {...getRootProps()} style={dropzoneStyle}>
        <input {...getInputProps()} />
        {isDragActive ? <p>Drop the file here...</p> : <p>Drag 'n' drop a file here, or click to select a file</p>}
      </div>
    </div>
  );
};

const dropzoneStyle = {
  border: '2px dashed #cccccc',
  borderRadius: '4px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer',
};

function App() {
  return (
    <div className="App">
      <h1>File Upload App</h1>
      <FileUpload />
    </div>
  );
}

export default App;

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: file-upload javascript

Link to this answer
Share Copy Link

Contributed on Oct 21 2023

Green Team

0 Answers Avg Quality 2/10

Closely Related Answers

upload file in react

Comment

const upload = (e) => {
	console.warn(e.target.files)
	const files = e.target.files
	const formData = new FormData()
	formData.append('img', files[0])
	fetch('http://127.0.0.1:8000/api/store', {
		method: 'POST',
		body: formData,
	}).then((resp) => {
		resp.json().then((result) => {
			console.warn(result)
		})
	})
}
return(<div>
	<h1>Upload File in React js</h1>
	<input type='file' onChange={(e) => upload(e)} name='img' />
</div>)

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: file

Link to this answer
Share Copy Link

Contributed on May 24 2022

Abhishek

0 Answers Avg Quality 2/10

how to upload file with button react

Comment

document.getElementById('buttonid').addEventListener('click', openDialog);

function openDialog() {
  document.getElementById('fileid').click();
}

<input id='fileid' type='file' hidden/>
<input id='buttonid' type='button' value='Upload MB' />

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: button bu

Link to this answer
Share Copy Link

Contributed on Mar 30 2022

Victorious Vendace

0 Answers Avg Quality 2/10

How to make a file upload app in React

Contents

More Related Answers

How to make a file upload app in React

Closely Related Answers

upload file in react

how to upload file with button react

Grepper

Documentation

Social

Legal

Contact

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