The following are some examples and explanations on how the picker and its many parameters can be used in combination to create a variety of results and behaviors.
The V3 picker has only one pick method and its behavior can be configured with easily readable parameters. The default behavior of V3 is to always store a copy of the selected file. This eliminates the likelihood that your Filestack links will break because the file being selected was moved or deleted from where it existed online. It is still possible to generate symbolic links with V3 and we will demonstrate that on this page in the next example.
storeTo object and its parameters, you can set specific instructions for how your files should be stored. If you don't include any
storeTo parameters, then the defaults for your Filestack account will be used.
Symbolic links can only be generated when selecting files from online sources. In the V3 picker you have to specify that these are the types of links that you want to generate by using the
preferLinkOverStore parameter. If this parameter is set to true and you select a file from your desktop or mobile device, then the file is being stored and is not a symbolic link.
The default behavior of the picker is to upload one file at a time since maxFiles defaults to 1 file.
Have users upload a maximum of 3 Image files. Users can still choose to upload less than 3 files.
The V3 picker has a minFiles parameter which prevents users from uploading before they have reached the minimum number of files set. If you set both maxFiles and minFiles, you can guarantee that an exact number of files is uploaded. The minFiles parameter can also ensure that a user uploads at least a certain amount of files. This is not possible in the V2 picker.
The V3 picker is able to accept a mix of mimetypes and extensions. This is not possible in V2
hideWhenUploading: true along with
startUploadingWhenMaxFilesReached: true will hide the picker immediately after a file is selected, because 1 files is the default.
hideWhenUploading: true will make it so that the picker will be hidden while the upload happens in the background. The picker will not be hidden until after the user clicks upload. Since
uploadInBackground is on by default, to show the true effect of hideWhenUploading, background uploading is disabled in this example.
Use the maxSize parameter to prevent users from uploading files that are too big
The onFileSelected callback allows you to contruct your own logic and even customize your own errors. onFileSelected can be used for much more than just enforcing certain file sizes.
This is not possible in V2. You would need to list out all the mimetypes or extensions you want to allow in order to prevent specific file types from being selected. With onFileSelected you can tell the picker to accept all image types except for PNG.
If you combine the upload progress output with the
hideWhenUploading parameter, you could build and display your own progress meters for uploads. Progress events fire on every XHR progress event, but these progress events will not fire while background uploads are happening. So you will need
uploadInBackground: false in your code as well.
When the cropping tool loads, if you have set the
aspectRatio parameter, you will not be able to expand or contract the crop area beyond the specified ratio. For example, a 16/9 ratio will restrict the crop area to a short, wide rectangle.
One of the new transformations available by default in the latest v3 release is circle cropping.
Using onFileSelected you can manipulate the name of the file being uploaded before the upload starts. Currently this only works with files selected from your local device. We are working to add support for cloud sources like instagram and google drive.