[Solved]-How to create an input formfield with button that uploads a file using react and javascript?-Reactjs

• <input type="file"/> also is a input. So you can use <label> tag and style it look like a button. In this case, I use image instead.

• I'm using hidden attribute to make the actual <input /> invisible.

          <input
            type="file"
            id="avatar"
            onChange={fileSelectedHandler}
            hidden
          />
          <label className={profileStyle.uploadLabel} htmlFor="avatar">
            <Image
              width="25px"
              height="25px"
              src="/icons/upload-image-icon.jpeg"
              alt="upload-avatar"
            />
          </label>

Here is what you want:

import React, { useState } from "react";

export const Upload = () => {
  const [filename, setFilename] = useState("");
  return (
    <>
      <input
        value={filename}
        type="text"
        style={{
          width: 200,
          height: 28,
          padding: 0,
          border: "1px solid #767676"
        }}
      />
      <input
        type="file"
        id="upload"
        hidden
        onChange={(e) => {
          // You have your file detail in e.tartget.files
          console.log(e.target.files[0]);
          setFilename(e.target.files[0].name);
        }}
      />
      <label
        htmlFor="upload"
        style={{
          width: 90,
          background: "#767676",
          color: "#fff",
          padding: 5
        }}
      >
        Browse
      </label>
    </>
  );
};

Check this Demo