Filestack File Picker 4.0: Folder Uploads, Mini Uploader, Pause/Resume, and Seamless Branding 

Filestack File Picker 4.0, the latest version of the file handling service, introduces several new functionalities designed to improve the process to upload files and enhance developer control. This blog details these features: folder upload capability, a Mini Uploader option, pause and resume for file upload operations, and expanded CSS customization for integration into your app or web page. 

Key Takeaways

This release brings the following features to Filestack users:

1. Enable Folder Uploads: Allow users to upload entire folders, preserving their structure and displaying detailed upload progress, with options to handle errors and manage multiple folder uploads simultaneously.
2. Introduce a Mini Uploader: Provide a simplified, space-saving version of the File Picker that supports local file uploads, using the same API key as the default picker, and ensuring compatibility with Filestack transformations and workflows.
3. Implement Pause/Resume Uploads: Allow users to pause and resume uploads to manage connection issues and bandwidth usage efficiently, with clear status indicators and options to cancel uploads.
4. Customize CSS: Allow customers and developers to customize the File Picker’s appearance using Tailwind CSS, enabling them to select colors, icons, and shapes, or apply their own custom CSS for a seamless integration with their website design.

A Filestack account is required to utilize these features via an API key.

Let’s dive in and explore the key highlights:

Folder Uploads: Managing Multiple Files and Folders

The Web File Picker 4.0 introduces functionality for users to upload files by selecting an entire folder at once, directly from their local computer or connected device. This folder upload process is designed to preserve the original folder structure when the files and folders are uploaded.

Users can initiate a folder upload through various methods:

• Utilizing their operating system’s standard file explorer interface (e.g., Finder on a Mac or File Explorer on a Microsoft Windows system) to locate and select the desired folder.
• Employing a drag and drop action to drag files or an entire folder from their desktop and drop it directly onto the File Picker element within a supported web browser such as Google Chrome or Mozilla Firefox.

This folder upload capability also extends to common cloud storage services, allowing users to upload files and folders from their existing accounts. Supported platforms include:

• Google Drive
• AWS S3
• Microsoft Azure This functionality includes the ability to upload shared files to which users have access rights within these cloud services.

When a file or folder is designated for upload, File Picker 4.0 provides immediate feedback. The interface displays details such as the total size of the folder and the exact number of files it contains. As the upload of potentially many files within the folder progresses, the interface dynamically updates to show the count of files successfully uploaded and the cumulative data volume transferred (typically in megabytes). Each file name within the folder is processed.

The system incorporates error handling for these folder uploads. If an individual file encounters an upload issue, a message detailing the error is presented. Users are then given options, such as retrying the upload for that specific file or continuing with the remaining files and folders. A hierarchical tree-view of the uploaded content will visually distinguish any file that failed. Users should be aware of any file size limit associated with their Filestack account, as this impacts transfers of large files, big files, or large video files.

Furthermore, File Picker 4.0 supports the concurrent upload of multiple folders. Users can initiate several folder uploads simultaneously and monitor their status, with options to filter by states like “completed” or “error.” This is particularly useful when handling numerous documents. Upon successful upload, the service typically provides a link for access to the stored file on Filestack’s secure servers. This approach helps save time for users managing many files

Mini Uploader: Compact and Powerful

File Picker 4.0 includes the Mini Uploader, a distinct display mode optimized for user interface contexts where screen space is limited. This version primarily facilitates local file uploads, allowing users to select as many files as configured from their computer or device to upload files.

The Mini Uploader utilizes the same Filestack API key as the standard File Picker instance associated with your account. This ensures correct attribution of uploads and compatibility with Filestack’s existing features, such as:

• File transformation capabilities (allowing, for example, images to be edited post-upload).
• Configured Filestack workflows.

Developers activate this mode by setting the miniUploader option to true in the File Picker’s JavaScript configuration. This initializes a condensed picker version using existing settings. Further configuration allows specifying whether the Mini Uploader accepts single or multiple file uploads.

Despite its reduced visual footprint, the Mini Uploader provides essential feedback during upload operations, including file information and status alerts or error messages. This makes it suitable for developers who need to add a file uploader interface within constrained areas of a web page or app, such as embedded forms or sidebars, without sacrificing core functionality. Uploaded files are stored securely on the configured cloud storage.

Pause and Resume Uploads: Enhanced Control Over File Transfers

File Picker 4.0 incorporates a pause and resume capability for file upload operations. This feature provides users with enhanced control when they want to upload files, particularly under conditions such as unstable network connections or when managing bandwidth for large files or big files.

A user can interrupt an active upload by initiating a pause command through the File Picker interface. The upload process for that file or folder will halt. The upload can be resumed later from the exact point it was paused, preventing loss of progress. This functionality is beneficial for:

• Handling intermittent connectivity.
• Optimizing bandwidth usage by temporarily deferring an upload.

The File Picker provides clear status indicators to reflect the current state of the upload. These states include:

• “uploading”
• “paused”
• “resumed”
• “completed”
• “error”

Users have controls to pause, resume, or cancel each active transfer. All uploads, including paused and resumed ones, are conducted over secure connections to the cloud, where documents and other files are stored.

Customizable CSS: Aligning with Your Brand Identity

File Picker 4.0 provides developers with expanded options to create a customized visual appearance for the File Picker interface, allowing its styling to align with the design language of the hosting website or web app.

Developers can modify the File Picker’s look and feel through two primary methods:

1. Tailwind CSS Integration: Utilize Tailwind CSS utility classes for adjustments to visual elements such as colors, icons, and component shapes.
2. Custom CSS Support: Apply their own custom CSS rules for more extensive or specific styling requirements, offering granular control over the File Picker’s aesthetic. For example, the file selection button’s color and font can be modified. The location and appearance of certain picker elements can be influenced by these custom styles.

An additional benefit in this latest version is a reduction in the CSS stylesheet size within the File Picker bundle. This optimization contributes to improved performance by potentially decreasing load times for the web page where the File Picker is rendered.

Summary of File Picker 4.0 Enhancements

The functionalities introduced in Filestack File Picker 4.0 provide developers with a more versatile set of tools for managing how users upload files. These key enhancements include:

• Comprehensive folder upload support for managing files and folders.
• A compact Mini Uploader for space-constrained interfaces.
• Pause and resume capability for file upload operations.
• Extensive CSS customization options.

How to Update to Filestack File Picker 4.0

For developers currently utilizing Filestack File Picker version 3, updating to version 4.0 is a straightforward process. To take advantage of the new features introduced in this release, you will need to update the script link in your code to point to the version 4 library.

For the latest 4.0 release, use the following script link:

https://static.filestackapi.com/filestack-js/4.0.0/filestack.min.js

Alternatively, if you prefer to always use the latest 4.x version, you can leverage the following dynamic script link:

https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js

This will ensure your integration is utilizing the most current version of the Filestack File Picker with all the latest enhancements.

For developers leveraging the Filestack SDK, you can update to the latest version through npm:

npm update filestack-js

Elevating the Filestack Experience

These features in the latest version of the Web File Picker service support a broad range of file handling scenarios. This includes the efficient transfer of large files, many files, or large video files, and the integration of the uploader into specific page layouts designed for various user device types. The File Picker is engineered for compatibility with common operating systems (e.g., Mac, Microsoft Windows) and browser environments (e.g., Google Chrome, Mozilla Firefox).

Each file selected by the user for upload is transferred to Filestack’s secure storage. Once stored, it can typically be accessed via a generated link. This process ensures that all documents and other assets are handled reliably. Developers can create sophisticated file upload experiences within their app using these features, with files originating from the user’s computer.

Lets take a few moments to update your codebase and elevate the file handling experience within your application or website.

Read More →