Reference Source
import {FileUpload} from '@adobe/coral-spectrum'
public class | source

FileUpload

Expression Extends:

class FileUpload extends BaseFormField(BaseComponent(HTMLElement))

A FileUpload component that manages the upload process of multiple files. Child elements of FileUpload can be given special attributes to enable functionality:

  • [coral-fileupload-select]. Click to choose file(s), replacing existing files.
  • [coral-fileupload-dropzone]. Drag and drop files to choose file(s), replacing existing files.
  • [coral-fileupload-clear]. Click to remove all files from the queue.
  • [coral-fileupload-submit]. Click to start uploading.
  • [coral-fileupload-abort]. Click to abort all uploads.
  • [coral-fileupload-abortfile="filename.txt"]. Click to abort a specific file, leaving it in the queue.
  • [coral-fileupload-removefile="filename.txt"]. Click to remove a specific file from the queue.
  • [coral-fileupload-uploadfile="filename.txt"]. Click to start uploading a specific file.

See:

Example:

Markup
<coral-fileupload></coral-fileupload>
JS constructor
new Coral.FileUpload();

Member Summary

Public Members
public

MIME types allowed for uploading (proper MIME types, wildcard '*' and file extensions are supported).

public

The URL where the upload request should be sent.

public

Whether files should be uploaded asynchronously via XHR or synchronously e.g.

public

Whether the upload should start immediately after file selection.

public

Whether this field is disabled or not.

public

invalid: *

Inherited from BaseFormField#invalid.

public

Inherited from BaseFormField#labelledBy.

public

The HTTP method to use when uploading files asynchronously.

public

Whether more than one file can be chosen at the same time to upload.

public

Name used to submit the data in a form.

public

Array of additional parameters as key:value to send in addition of files.

public

Whether this field is readOnly or not.

public

Whether this field is required or not.

public

File size limit in bytes for one file.

public

Files to be uploaded.

public

This field's current value.

  • "" by default.

public

The names of the currently selected files.

Method Summary

Public Methods
public

abort(filename: String)

Abort upload of a given file or all files in the queue.

public

clear(filename: String)

Remove a file or all files from the upload queue.

public

upload(filename: String)

Uploads the given filename, or all the files into the queue.

Public Members

public accept: String source

MIME types allowed for uploading (proper MIME types, wildcard '' and file extensions are supported). To specify more than one value, separate the values with a comma (e.g. <input accept="audio/,video/,image/" />.

  • "" by default.
  • reflected

public action: String source

The URL where the upload request should be sent. When used within a <form> tag to upload synchronously, the action of the form is used. If an element is clicked that has a [coral-fileupload-submit] attribute as well as a [formaction] attribute, the action of the clicked element will be used. Set this property before calling Coral.FileUpload#upload to reset the action set by a click.

  • "" by default.
  • reflected

public async: Boolean source

Whether files should be uploaded asynchronously via XHR or synchronously e.g. within a <form> tag. One option excludes the other. Setting a new async value removes all files from the queue.

  • false by default.
  • reflected

public autoStart: Boolean source

Whether the upload should start immediately after file selection.

  • false by default.
  • reflected

public disabled: Boolean source

Whether this field is disabled or not.

  • false by default.
  • reflected

public invalid: * source

Inherited from BaseFormField#invalid.

public labelledBy: * source

Inherited from BaseFormField#labelledBy.

public method: String source

The HTTP method to use when uploading files asynchronously. When used within a <form> tag to upload synchronously, the method of the form is used. If an element is clicked that has a [coral-fileupload-submit] attribute as well as a [formmethod] attribute, the method of the clicked element will be used. Set this property before calling FileUpload#upload to reset the method set by a click. See FileUploadMethodEnum.

  • FileUploadMethodEnum.POST by default.
  • reflected

public multiple: Boolean source

Whether more than one file can be chosen at the same time to upload.

  • false by default.
  • reflected

public name: String source

Name used to submit the data in a form.

  • "" by default.
  • reflected

public parameters: Array<Object> source

Array of additional parameters as key:value to send in addition of files. A parameter must contain a name key:value and optionally a value key:value.

  • [] by default.

public readOnly: Boolean source

Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.

  • false by default.
  • reflected

public required: Boolean source

Whether this field is required or not.

  • false by default.
  • reflected

public sizeLimit: Number source

File size limit in bytes for one file. The value of 0 indicates unlimited, which is also the default.

  • reflected
  • 0 by default.

public uploadQueue: Array<Object> source

Files to be uploaded.

  • read-only
  • [] by default.

public value: String source

This field's current value.

  • "" by default.

public values: Array<String> source

The names of the currently selected files. When Coral.FileUpload#multiple is false, this will be an array of length 1.

Public Methods

public abort(filename: String) source

Abort upload of a given file or all files in the queue.

Params:

NameTypeAttributeDescription
filename String
  • optional

The filename of the file to abort. If a filename is not provided, all files will be aborted.

public clear(filename: String) source

Remove a file or all files from the upload queue.

Params:

NameTypeAttributeDescription
filename String
  • optional

The filename of the file to remove. If a filename is not provided, all files will be removed.

public upload(filename: String) source

Uploads the given filename, or all the files into the queue. It accepts extra parameters that are sent with the file.

Params:

NameTypeAttributeDescription
filename String
  • optional

The name of the file to upload.