type: docs title: "Robodog: File Picker API" menu: "Robodog File Picker" permalink: docs/robodog/picker/ order: 1
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 successfullyfailed
- An array containing data about files that failed to uploadtransloadit
- An array of Assembly statusesresults
- An array of results produced by the assembly, if waitForEncoding
was usedoptions.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.
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.
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 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.companionUrl: Transloadit.COMPANION
The URL to a Uppy Companion server to use.
companionAllowedHosts: 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.
companionHeaders: {}
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.