File Upload

The File Upload component allows users to upload one or multiple files from their local device to a web application. It provides a user-friendly interface for attaching documents, images, or other types of files as part of form submissions. The component is customizable, supporting various file types, size limits, and even batch uploads, making it versatile for a wide range of use cases. Whether for uploading personal data or sharing project files, this component is a key part of modern web interactions.

<label
  for="file-upload-id"
  class="gi-text-md gi-mb-1 gi-block gi-mb-2">
  Upload File
</label>
<input
  id="file-upload-id"
  class="
    xs:gi-text-md
    gi-text-sm
    gi-leading-10
    xs:!gi-leading-5
    gi-p-[3px]
    gi-max-w-[100%]
    gi-border-transparent
    gi-flex-initial
    gi-ml-[-5px]
    gi-border-sm
    gi-border-solid
    gi-box-border
    gi-focus-state-outline
    gi-focus-state-border
    gi-z-1
  "
  type="file"
  name="file"
  accept="*/*"
/>

{{ govieFileUpload({
  "id": "file-upload-id",
  "label": {
    "content": "Upload File",
    "for": "file-upload-id"
  },
  "hint": {
    "content": ""
  },
  "error": {
    "content": ""
  }
}) }}

import { FileUpload } from "@govie-ds/react";

<FileUpload
  accept="*/*"
  error={{
    text: ''
  }}
  hint={{
    text: ''
  }}
  id="file-upload-id"
  label={{
    htmlFor: 'file-upload-id',
    text: 'Upload File'
  }}
/>

When to use this component

• When users need to upload one or more files (e.g., documents, images, etc.) from their local device to your system.
• When form submissions require attachments, such as resumes, profile pictures, or reports.
• In scenarios where users need to manage or update existing files by uploading new versions.
• If your application supports bulk or batch file uploads for user convenience.
• When allowing users to interact with cloud storage by uploading files directly.

When not to use this component

• When users are only expected to input text or structured data (e.g., forms with text fields or dropdowns).
• If the file size is extremely large and uploading is not feasible; consider alternative methods like cloud sharing links.
• When files are not required or relevant to the action being performed by the user (e.g., simple registration forms).
• When you're using drag-and-drop file management without traditional file upload buttons (unless the upload is supplemental).
• In cases where inline file previews and edits are the primary user interaction, rather than uploading files.