Click to upload or drag and drop

(up to 5 MB)

• empty.txt

  text/plain

  0 Bytes

Edit props

Props

Close

---

Multiple files Accept Max size (bytes)

Features

• 🗂️ Drag and drop support
• 📎 Multiple file support
• ✨ File type validation
• 📏 File size limits

Usage

Builder

<script lang="ts">
  import { FileUpload } from "melt/builders";

  const fileUpload = new FileUpload();
</script>

<input {...fileUpload.input} />
<div {...fileUpload.dropzone}>
  {#if fileUpload.isDragging}
    Drop files here
  {:else}
    Click to upload or drag and drop
  {/if}
</div>

Component

<script lang="ts">
  import { FileUpload } from "melt/components";
</script>

<FileUpload>
  {#snippet children(fileUpload)}
    <input {...fileUpload.input} />
    <div {...fileUpload.dropzone}>
      {#if fileUpload.isDragging}
        Drop files here
      {:else}
        Click to upload or drag and drop
      {/if}
    </div>
  {/snippet}
</FileUpload>

API Reference

Constructor Props

The props that are passed when calling

new FileUpload()

new FileUpload()

export type FileUploadProps<Multiple extends boolean = false> = {
  /**
   * The currently selected files.
   */
  selected?: MaybeMultiple<File, Multiple>;

  /**
   * Callback fired when selected files change
   */
  onSelectedChange?: (files: Multiple extends true ? Set<File> : File | undefined) => void;

  /**
   * Whether to accept multiple files
   * @default false
   */
  multiple?: MaybeGetter<Multiple | undefined>;

  /**
   * The accepted file types. Can be a MIME type, a MIME group, or a file extension.
   * Separate multiple types with a comma.
   * @example 'image/jpeg'
   * @example 'image/*'
   * @example '.png, .jpg, .jpeg'
   */
  accept?: MaybeGetter<string | undefined>;

  /**
   * Maximum file size in bytes
   * @default undefined
   */
  maxSize?: MaybeGetter<number | undefined>;

  /**
   * Whether the file upload is disabled
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;

  /**
   * Custom validate fn. Will be called together with the original validation,
   * which takes into account the `accept` and `maxSize` props.
   */
  validate?: (file: File) => boolean;

  /**
   * Callback fired when a file fails validation
   */
  onError?: (error: FileUploadError) => void;

  /**
   * Callback fired when a file is accepted
   */
  onAccept?: (file: File) => void;
};

export type FileUploadProps<Multiple extends boolean = false> = {
  /**
   * The currently selected files.
   */
  selected?: MaybeMultiple<File, Multiple>;

  /**
   * Callback fired when selected files change
   */
  onSelectedChange?: (files: Multiple extends true ? Set<File> : File | undefined) => void;

  /**
   * Whether to accept multiple files
   * @default false
   */
  multiple?: MaybeGetter<Multiple | undefined>;

  /**
   * The accepted file types. Can be a MIME type, a MIME group, or a file extension.
   * Separate multiple types with a comma.
   * @example 'image/jpeg'
   * @example 'image/*'
   * @example '.png, .jpg, .jpeg'
   */
  accept?: MaybeGetter<string | undefined>;

  /**
   * Maximum file size in bytes
   * @default undefined
   */
  maxSize?: MaybeGetter<number | undefined>;

  /**
   * Whether the file upload is disabled
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;

  /**
   * Custom validate fn. Will be called together with the original validation,
   * which takes into account the `accept` and `maxSize` props.
   */
  validate?: (file: File) => boolean;

  /**
   * Callback fired when a file fails validation
   */
  onError?: (error: FileUploadError) => void;

  /**
   * Callback fired when a file is accepted
   */
  onAccept?: (file: File) => void;
};

Methods

The methods returned from

new FileUpload()

new FileUpload()

• clear

  () => void

  () => void

  Clears the currently selected files
• remove

  (file: File) => void

  (file: File) => void

  Removes a file from the selection

Properties

The properties returned from

new FileUpload()

new FileUpload()

• multiple

  Multiple

  Multiple
• accept

  string | undefined

  string | undefined
• maxSize

  number | undefined

  number | undefined
• disabled

  boolean

  boolean
• isDragging

  boolean

  boolean
• selected

  SelectionStateValue<File, Multiple>

  SelectionStateValue<File, Multiple>

  Gets the currently selected files
• dropzone

  {
    readonly "data-melt-fileupload-dropzone": ""
    readonly "data-dragging": "" | undefined
    readonly "data-disabled": "" | undefined
    readonly ondragenter: (e: DragEvent) => void
    readonly ondragleave: (e: DragEvent) => void
    readonly ondragover: (e: DragEvent) => void
    readonly ondrop: (e: DragEvent) => void
    readonly onclick: () => void
  }

  {
    readonly "data-melt-fileupload-dropzone": ""
    readonly "data-dragging": "" | undefined
    readonly "data-disabled": "" | undefined
    readonly ondragenter: (e: DragEvent) => void
    readonly ondragleave: (e: DragEvent) => void
    readonly ondragover: (e: DragEvent) => void
    readonly ondrop: (e: DragEvent) => void
    readonly onclick: () => void
  }

  The dropzone element, where you can drag files into, or click to open the file picker.
• input

  {
    readonly "data-melt-fileupload-input": ""
    readonly id: string
    readonly type: "file"
    readonly accept: string | undefined
    readonly multiple: Multiple
    readonly style: "display: none;"
    readonly disabled: boolean
    readonly onchange: (e: Event) => void
  }

  {
    readonly "data-melt-fileupload-input": ""
    readonly id: string
    readonly type: "file"
    readonly accept: string | undefined
    readonly multiple: Multiple
    readonly style: "display: none;"
    readonly disabled: boolean
    readonly onchange: (e: Event) => void
  }

  The hidden file input element.
• trigger

  {
    readonly "data-disabled": "" | undefined
    readonly onclick: () => void
  }

  {
    readonly "data-disabled": "" | undefined
    readonly onclick: () => void
  }

  An optional trigger element, which can be used to open the file picker.