Docs

Robodog: File Picker API

Show a modal UI that allows users to pick files from their device and from the web. It uploads files to Transloadit for processing.

const resultPromise = transloadit.pick({
  params: {
    auth: { key: '' },
    template_id: ''
  }
})

resultPromise is a [Promise][promise] that resolves with an object:

  • successful - An array containing data about files that were uploaded successfully
  • failed - An array containing data about files that failed to upload
  • transloadit - An array of Assembly statuses
  • results - An array of results produced by the assembly, if waitForEncoding was used

options.target

DOM element or CSS selector to place the modal element in. document.body is usually fine in this case because the modal is absolutely positioned on top of everything anyway.

Transloadit

All the options to the Transloadit plugin are supported.

The Promise resolution value has a transloadit and results key.

result.transloadit contains an array of Assembly statuses. Assembly statuses are objects as described in the Transloadit documentation. There may be multiple Assembly statuses if the getAssemblyOptions option was used, because different files may be processed by different Assemblies.

result.results contains an array of results produced by the Assemblies. Each result has an assemblyId property containing the string ID of the Assembly that produced it, and a stepName property containing the string name of the Assembly step that produced it.

Restrictions

Set rules and conditions to limit the type and/or number of files that can be selected. Restrictions are configured by the restrictions option.

restrictions.maxFileSize

Maximum file size in bytes for each individual file.

restrictions.maxNumberOfFiles

The total number of files that can be selected. If this is equal to 1, users can only select a single file in system dialogs; else they can select multiple.

restrictions.minNumberOfFiles

The minimum number of files that must be selected before the upload.

restrictions.allowedFileTypes

Array of mime type wildcards image/*, exact mime types image/jpeg, or file extensions .jpg: ['image/*', '.jpg', '.jpeg', '.png', '.gif'].

If provided, the <input accept> attribute will be used for the internal file input field, so only acceptable files can be selected in the system file dialog.

Providers

Providers import files from third party services using Uppy Companion or from local sources like the device camera.

By default, the Picker will use Transloadit’s Uppy Companion servers for imports from third party service. You can self-host your own instances as well.

providers: []

Array of providers to use. Each entry is the name of a provider. The available ones are:

  • 'dropbox' – Import files from Dropbox using Uppy Companion.
  • 'google-drive' – Import files from Google Drive using Uppy Companion.
  • 'instagram' – Import files from Instagram using Uppy Companion.
  • 'url' – Import files from public Web URLs using Uppy Companion.
  • 'webcam' – Take photos and record videos using thee user’s device camera.

serverUrl: Transloadit.COMPANION

The URL to a Uppy Companion server to use.

serverPattern: Transloadit.COMPANION_PATTERN

The valid and authorised URL(s) from which OAuth responses should be accepted.

This value can be a String, a Regex pattern, or an Array of both.

This is useful when you have your Uppy Companion running on multiple hosts. Otherwise, the default value should do just fine.

serverHeaders: {}

Custom headers to send to Uppy Companion.

dropbox: {}

Specific options for the Dropbox provider.

googleDrive: {}

Specific options for the Google Drive provider.

instagram: {}

Specific options for the Instagram provider.

url: {}

Specific options for the URL provider.

webcam: {}

Specific options for the Webcam provider.

Caught a mistake or want to contribute to the documentation? Edit/fork this page directly on Github!