@wmik/use-file-input

use-file-input

React based hooks for html file type inputs with drag and drop support.

Features

• 👀 Familiar API - Extends the Map API with minimal abstraction making it easy to use.
• 🖱️ Drag n Drop - Supports HTML Drag and Drop API.
• 🎛️ Configurable - Adjust settings to match your requirements.
• 💅 Headless - Build your own custom user interface to fit your style.

Installation

npm install @wmik/use-file-input

Example

function FileInputComponent() {
  const LABEL_TEXT_DEFAULT = 'Click or drag/drop files to upload';
  const LABEL_TEXT_HOVER = 'Drop files to upload';
  const PLACEHOLDER_TEXT = 'No files';

  let { fileInputRef, files, onFileInputChange } = useFileInput();
  let hasFiles = Array.from(files?.values() ?? [])?.length > 0;

  let styles = {
    container: {
      width: 400,
      height: 400,
      border: '1px dashed #dddccc'
    },
    label: {},
    input: {
      display: 'none'
    },
    list: {
      display: hasFiles ? 'block' : 'none'
    },
    placeholder: {
      display: !hasFiles ? 'block' : 'none'
    }
  };

  return (
    <main>
      <div
        style={styles.container}
        onDragOver={onFileInputDragOver}
        onDragStart={onFileInputDragStart}
        onDragLeave={onFileInputDragLeave}
        onDrop={onFileInputDrop}
      >
        <label
          htmlFor="files"
          style={styles.label}
          children={isDraggingOver ? LABEL_TEXT_HOVER : LABEL_TEXT_DEFAULT}
        />
        <input
          multiple
          id="files"
          type="file"
          name="files"
          ref={fileInputRef}
          style={styles.input}
          onChange={onFileInputChange}
        />
      </div>

      <ul style={styles.list}>
        {Array.from(files.values())?.map(file => (
          <li key={file?.name}>
            <span children={file?.name} />
            <button
              type="button"
              aria-roledescription="delete"
              onClick={() => files.delete(file)}
            >
              DELETE
            </button>
          </li>
        ))}
      </ul>

      <p style={styles.placeholder} children={PLACEHOLDER_TEXT} />
    </main>
  );
}

API

useFileInput

Creates a custom file input object.

Parameters (FileInputProps)

Property	Type	Description
id	function	Custom ID generator
ref	object	Custom React reference object

NOTE: * means it is required

Returns (FileInputHookObject)

Property	Type	Description
files	object	Map-like object for file cache I/O operations
{files}.get	function(key: string)	Method to get a file from the cache
{files}.set	function(file: File)	Method to add a file to the cache
{files}.delete	function(key: string)	Method to remove a file from the cache
{files}.has	function(key: string)	Method to check if an identifier exists in the cache
{files}.clear	function	Method to remove all files from the cache
{files}.keys	function	Method to list identifiers in the cache
{files}.values	function	Method to list files in the cache
{files}.entries	function	Method to list identifier-file pairs in the cache
fileInputRef	object	React referencing object for HTMLInputElement
isDraggingOver	boolean	Dragging state
onFileInputChange	function(event)	HTML change event handler
onFileInputDragStart	function(event)	HTML dragstart event handler
onFileInputDragLeave	function(event)	HTML dragleave event handler
onFileInputDragOver	function(event)	HTML dragover event handler
onFileInputDrop	function(event)	HTML drop event handler

License

MIT ©2025