File uploads made elegant

          
import { useFileInput } from '@wmik/use-file-input';
  
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 { 
    files,
    fileInputRef,
    isDraggingOver,
    onFileInputChange,
    onFileInputDragStart,
    onFileInputDragOver,
    onFileInputDragLeave,
    onFileInputDrop
   } = 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>
  );
}