Customize the HTML <input> element with type="file"

Issue

On the site (written in React), in one of the fields it is possible for the user to select a file from their computer and accordingly see the path (file name).

I implemented this field using HTML input with type="file"...

         <div className="inline-flex w-full justify-between">
          <input
            id="fileInput"
            onChange={chooceFile}
            type="file"
            className={clsxm(
              'w-full text-sm',
              'text-[#FFFFFF] file:float-right file:mr-0 file:text-[#FFFFFF]',
              'file:bg-[grey]',
              'file:px-3 file:text-xs',
              'file:font-medium '
            )}
          />
        </div>

...and with your help I would like to customize this field. In this regard, I have two related questions:

1. How to change the default label on the button from "Choose File" to "Any text"
2. How to change the default label when no file is selected from "No file chosen" to "Please, choice file"

Solution

Here's how to do it in React using tailwind

import { useState } from "react";

export default function Home() {
  const [asset, setAsset] = useState("");

  const handleAsset = (e) => {
    setAsset(e.target.files[0].name);
  };

  return (
    <div className="w-6/12 mx-auto bg-gray-800 text-white rounded-sm">
      <div className="flex items-center justify-between p-2">
        <h3 className="text-white">{asset ? asset : "Please, choice file"}</h3>
        <label htmlFor="file" className="cursor-pointer">
          <div className="bg-gray-400 gap-1.6 px-2 flex  items-center font-normal border-2 border-black">
            <span>Any text</span>
          </div>
          <input
            id="file"
            type="file"
            className="hidden"
            onChange={handleAsset}
          />
        </label>
      </div>
    </div>
  );
}

Answered By - X8inez