Common Picker Examples

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.

Pick with Store Options

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.

Using the 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.

Generate Symbolic Links

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.

Force Users to Upload Exactly 3 images.

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.

Hide Picker When User Clicks Upload

Setting 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.

Prevent users from uploading certain types of files

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.

Log Upload Progress

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.

Set Crop Area Ratio

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.

Change File Name on Upload

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.