<FileUpload> wraps `ember-file-upload`'s file-queue helper for triggered uploads. Yields the queue so you can compose any trigger UI. Pair with <UploadButton> for a ready-made trigger.

`<FileUpload>`

<FileUpload> is a thin wrapper around ember-file-upload's file-queue helper. It exposes a hidden file input and yields the queue so you can compose any trigger you like — a button, a panel, a drag area.

For a ready-made button trigger, use <UploadButton> (covered below).

Basic Usage

<FileUpload
  @name='avatar'
  @accept='image/*'
  @onFileAdded={{this.handleFile}}
  as |queue|
>
  <Button
    @icon='upload'
    @text='Upload avatar'
    {{on 'click' queue.selectFile}}
  />
</FileUpload>

@action async handleFile(file) {
  // file is an ember-file-upload File instance
  // call file.upload(url) or your own upload service
}

The yielded queue is the FileQueue instance — useful for triggering selection programmatically and tracking upload state.

Arguments

Argument	Type	Description
`@name`	string	Queue name (used to disambiguate multiple queues)
`@accept`	string	MIME type filter (e.g. `image/*`, `.pdf`)
`@hidden`	boolean	Whether the underlying `<input type="file">` is hidden (default `true`)
`@disabled`	boolean	Disable the input
`@inputClass`	string	Extra classes on the input
`@labelClass`	string	Extra classes on the wrapping `<label>`

Callbacks

Argument	Signature	Description
`@onFileAdded`	`(file)`	Called when a file is added to the queue
`@onFileRemoved`	`(file)`	Called when a file is removed
`@onUploadStarted`	`(file)`	Called when an upload starts
`@onUploadSucceeded`	`(file, response)`	Called on successful upload
`@onUploadFailed`	`(file, error)`	Called on upload failure

Yielded Block

The yielded queue has these key properties (from ember-file-upload):

Property	Description
`queue.selectFile`	Modifier — attach to a clickable element to open the picker
`queue.files`	Array of files in the queue

`<UploadButton>`

For a ready-made trigger button, use the sibling <UploadButton> component (template-only, at addon/components/upload-button.hbs):

<UploadButton
  @name='avatar'
  @accept='image/*'
  @onFileAdded={{this.handleFile}}
/>

It renders a <Button> styled trigger that opens the file picker on click. Same @-args as <FileUpload>.

Real-World Examples

{{! Single file upload with status }}
<FileUpload
  @name='logo'
  @accept='image/*'
  @onFileAdded={{this.uploadLogo}}
  as |queue|
>
  <a tabindex='0' class='btn btn-default'>
    {{#if queue.files.length}}
      <Spinner @size='xs' />
      Uploading…
    {{else}}
      <FaIcon @icon='upload' class='mr-1' />
      Upload logo
    {{/if}}
  </a>
</FileUpload>

{{! Inside a form group }}
<InputGroup @name='Profile photo'>
  <UploadButton
    @name='photo'
    @accept='image/*'
    @onFileAdded={{this.uploadPhoto}}
  />
</InputGroup>

Source

File	Description
`addon/components/file-upload.hbs`	Template (template-only)
`addon/components/upload-button.hbs`	Sibling — ready-made trigger button (template-only)

Wraps ember-file-upload.

FileUpload

On this page