Display file name after selecting it-CodePudding

I want to create a button on my site that will allow the user to upload a file from their device (computer, phone).

I have already made this button and it opens a window where you can select a file.

But I ran into a problem: I would like to display the name of this file on the page (example below).

(I highlighted the desired result in green)

I have this component highlighted in orange:

   export default function BoxForChoiceFile() {
        return (
            <Card sx={styles.CommonStyle}>
                <SelectFileButton></SelectFileButton>
            </Card>
        );
    }

And in the BoxForChoiceFile component there is a button for choosing a file

    export default function SelectFileButton() {

    const fileInput = useRef();
    const selectFile = () => {
        fileInput.current.click();
    }

    return (
        <div>
            <input type="file" style={{ "display": "none" }} ref={fileInput} />
            <Button onClick={selectFile} className='btn btn-primary' sx={styles.DispositionBottom}>
                <span>Upload</span>
            </Button>
        </div>
    )
}

CodePudding user response：

In addition to what Alberto Anderick Jr answered, this is how you can pass the file name from the child component to the father component and show it below SelectFileComponent, in your BoxForChoiceFile :

export default function BoxForChoiceFile() {
    const [fileName, setFileName] = useState("");
    return (
        <div>
            <Card sx={styles.CommonStyle}>
                <SelectFileButton setFileName={setFileName} />
            </Card>
            <h5>{fileName}</h5>
        </div>
    );
}

and in your SelectFileComponent:

export default function SelectFileButton(props) {
    const {setFileName} = props;
    const [file, setFile] = useState(null);

    const fileInput = useRef();
    const selectFile = () => {
        fileInput.current.click();
    };

    const updateName = () => {
        setFile(fileInput.current.files[0]);
        setFileName(fileInput.current.files[0]?.name);
    }

    return (
        <div>
            <input type="file" style={{ display: "none" }} ref={fileInput} onChange={updateName} />
            <button onClick={selectFile} className="btn btn-primary">
                <span>Upload</span>
            </button>
        </div>
    );
}

CodePudding user response：

This is an example of how you can capture the name of the file selected into a state:

import { useRef, useState } from "react";

export default function SelectFileButton() {
  const [fileName, setFileName] = useState("");

  const fileInput = useRef();
  const selectFile = () => {
    fileInput.current.click();
  };

  const updateName = () => {
    setFileName(fileInput.current.files[0]?.name);
  }

  return (
    <div>
      <input type="file" style={{ display: "none" }} ref={fileInput} onChange={updateName} />
      <button onClick={selectFile} className="btn btn-primary">
        <span>Upload</span>
      </button>
      <h5>{fileName}</h5>
    </div>
  );
}

This code can definitely be improved depending on your case, but it should give you what you want.