I just want to create simple file upload component on react. It will be something simple that after select the file and submit the upload button, it will give a massage with filename like "You uploaded fileName.txt". I have tried search so many sources but it's mostly more than I need, that would be great if anyone could help me about it. Thank you!

CodePudding user response：

You can detect file selection using the onChange event listener, and you can access the name of the selected file via e.target.files which returns all of the files which have been selected, we'll take the first selected file and store its name value inside a state called selectedFileName. during render we'll check if the selectedFileName state has value, we'll display it inside a p tag.

import React, { useState } from 'react';

export const App = () => {
  const [selectedFileName, setSelectedFileName] = useState('');
  const [displayFileName, setDisplayFileName] = useState(false);
  const submitFile = () => setDisplayFileName(true);
  const handleFileSelect = e => {
    const selectedFile = e.target.files[0];
    setDisplayFileName(false);
    setSelectedFileName(selectedFile?.name);
  };
  return (
    <div>
      <input
        type='file'
        accept='*'
        name='fileSelect'
        onChange={handleFileSelect}
      />
      {displayFileName ? (
       <p>{ selectedFileName?`You Uploaded '${selectedFileName}'`:"Please select a file!"}</p>
      ) : (
        <button value='Submit' onClick={submitFile}>
          Submit File
        </button>
      )}
    </div>
  );
};