Html Question posted in
Some basic documentation can be found here.

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

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). Below is a visual example to get you started.

before upload:

enter image description here

after upload:

enter image description here

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"
Tags:

2

Answers


  1. 0

    The easiest way to do this is to simply overlay the input over your visualisation of it, since the input does nothing but select a file and display that feedback. You can easily mimick this behaviour as such in pure HTML, CSS and a little bit of javascript:

    document.querySelectorAll( '.file-input' ).forEach(fileInputWrapper => {
  
  const text = fileInputWrapper.querySelector( 'span' );
  const input = fileInputWrapper.querySelector( 'input' );
    
  input.addEventListener( 'change', event => {
      
    if( input.files.length === 1 ) text.textContent = input.files[0].name;
    else if( input.files.length > 1 ) text.textContent = `${input.files.length} files selected`;
    else input.textContent = 'Please, choice file';
    
  })
  
})
    .file-input {
  display: flex;
  position: relative;
  align-items: center;
}
.file-input input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.file-input span {
  padding: 10px;
}
    <div class="file-input">
  <input multiple type="file" />
  <span>Please, choice file</span>
  <button>Any Text</button>
</div>
    Login or Signup to reply.
  2. 0

    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-9/12 mx-auto bg-gray-800 text-white rounded-sm">
      <label htmlFor="file" className="cursor-pointer">
        <div className="flex items-center justify-between p-2">
          <div>{asset ? asset : "Please, choice file"}</div>
          <div className="bg-gray-400 gap-1.6 px-2 flex  items-center font-normal border-2 border-black">
            <span>Any text</span>
          </div>
        </div>
        <input
          id="file"
          type="file"
          className="hidden"
          onChange={handleAsset}
        />
      </label>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search