Customizing Filestack File Picker: the New Froala File Uploading Option – Part 2

Imagine a JavaScript tool – where it can effortlessly handle upload, store, and process your files with a few lines of code. That’s the power of Filestack, a file management tool that has processed over 1 billion files and counting.

Filestack now has official integration with Froala, offering many customization options that allow developers to create a truly seamless and intuitive file uploading process within the Froala editor tailored for your users.

We explored some of the Filestack File Picker customization options available to developers before. In this second part of the series, we will explore additional customization options related to events, uncovering how you can customize the file uploading experience from start to finish – from the moment the user opens the picker to handle the successful (or failed) upload.

Let’s delve into these customization features that help you create a smooth and intuitive file management workflow within your Froala-powered applications, significantly improving user experience.

Key Takeaways:

1. Filestack provides a range of customization options and events that allow developers to create a highly responsive and tailored file picker experience within Froala-powered applications.
2. The onOpen event can be used to enhance the user experience when the File Picker UI mounts, such as displaying a custom loading indicator or updating the UI.
3. The onFileSelected event enables developers to validate selected files, reject files that don’t meet certain criteria, and even modify the file name if needed.
4. The onFileCropped event provides metadata about the cropped image, allowing developers to perform additional processing before inserting it into the Froala editor.
5. The onCancel event can be used to customize the user experience when file uploads are cancelled, ensuring the application remains responsive and user-friendly.
6. The onClose event triggers when the File Picker UI is exited, providing an opportunity to perform any necessary cleanup or additional actions.

Customize the File Picker Opening Experience

Filestack’s onOpen event triggers when the File Picker UI mounts. You can use this event to enhance the user experience. For example, you can display a custom loading indicator or update the UI to provide feedback.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onOpen: filepicker => {
                console.log(filepicker);
            }
        }
    }
});

The onOpen callback receives the PickerInstance interface, which provides the following methods:

• cancel() Cancels any ongoing uploads. This operation is idempotent and returns a Promise.

  new FroalaEditor("div#froala-editor", {
      filestackOptions: {
          filestackAPI: 'yourAPIKey',
          pickerOptions: {
              onOpen: PickerInstance => {
                  //Cancel picker uploads. 
                  PickerInstance.cancel();
              }
          }
      }
  });
  

• close() Closes the File Picker. This operation is idempotent and returns a Promise.

  new FroalaEditor("div#froala-editor", {
      filestackOptions: {
          filestackAPI: 'yourAPIKey',
          pickerOptions: {
              onOpen: PickerInstance => {
                  //Close the File Picker.
                  PickerInstance.close();
              }
          }
      }
  });
  

• open() Opens the File Picker. This operation is idempotent.
• crop(urls) Specifies a list of file URLs to open in the Picker for cropping.

  new FroalaEditor("div#froala-editor", {
  filestackOptions: {
          filestackAPI: 'yourAPIKey',
          pickerOptions: {
              onOpen: PickerInstance => {
                  const urls = [
                      'https://d1wtqaffaaj63z.cloudfront.net/images/fox_in_forest1.jpg',
                      'https://d1wtqaffaaj63z.cloudfront.net/images/sail.jpg',
                  ];
                  PickerInstance.crop(urls);
              }
          }
      }
  });
  

Leverage the onOpen event and the PickerInstance methods to create a more engaging user experience.

Handling User Selected Files

The onFileSelected event in Filestack triggers whenever a user selects a file. You can use this event to validate the selected file and, if necessary, reject the selection by throwing an error. The error message will be displayed to the user as an alert.

For example, you can reject files that exceed a certain size limit:

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileSelected: file => {
                if (file.size > 1000 * 1000) {
                    throw new Error('File too big, select something smaller than 1MB');
                }
            }
        }
    }
});

Developers can use this event to change the selected file name if it’s uploaded from the local source.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileSelected: file => {
                // It's important to return a new file by the end of this function.
                return { ...file, name: 'foo' };
            }
        }
    }
});

The onFileSelected event also supports asynchronous validation logic. You can return a Promise from the callback function and then resolve or reject the Promise as needed:

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileSelected: file => {
                return new Promise((resolve, reject) => {
                    // Do something async
                    resolve();
                    // Or reject the selection with reject()
                  });
            }
        }
    }
});

By leveraging the onFileSelected event, you can create a more robust and user-friendly file selection experience within your Froala-powered applications.

Handling Cropped Files

When a user uploads an image using the File Picker, Filestack displays a simple image editor. This editor allows the user to crop, circle crop, and rotate the image.

Filestack triggers the onFileCropped event when the user crops the image. This event provides an object with the file metadata, such as the file size. You can use this metadata to perform additional processing on the cropped image before inserting it into the Froala editor.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileCropped : (file) => {
                console.log(file.size);
            }
        }
    }
});

The onFileCropped event provides the necessary information to handle the cropped image, allowing you to integrate the cropping functionality seamlessly into your application’s workflow.

Customize User Experience When Files Get Cancelled

Filestack triggers the onCancel event when all uploads in the File Picker are cancelled. This event receives an object containing the file’s metadata.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onCancel: PickerUploadDoneCallback => {
                console.log(PickerUploadDoneCallback);
            }
        }
    }
});

Handling the onCancel event gives you the flexibility to customize the user experience when the file upload is interrupted, ensuring your application remains responsive and user-friendly. By providing feedback and handling the cancellation scenario, you can create a more engaging and intuitive file management workflow within your Froala-powered applications. This helps to enhance the overall user experience and ensure your users feel in control of the file upload process, even when they choose to cancel it.

Customize the File Picker Closing Experience

Filestack triggers the onClose event when the File Picker UI is exited.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onClose: () => {
                console.log('File Picker closed');
            }
        }
    }
});

Looking For Other Events?

Beyond the events mentioned, Filestack provides a range of other events such as onFileUploadCancel, onFileUploadFailed, onFileUploadFinished, onFileUploadProgress, onFileUploadStarted, onUploadDone, and onUploadStarted that you can leverage to customize the file uploading experience. Refer to the Filestack documentation for a comprehensive list of available options and their usage.

Conclusion

Filestack File Picker is a powerful tool for handling file uploads. Users appreciate its ease of use, support for various upload sources, dependability, and straightforward cloud storage integration. Filestack offers many customization options and events that allow developers to create a highly responsive and tailored file picker experience.

From validating file selections to handling cropped images and managing the overall file upload workflow, these events empower you to customize the user experience to your specific needs. Explore the full range of Filestack events and integrate them seamlessly into your application’s logic. This ensures a smooth and intuitive file management process for your users.

If you’re looking to enhance the file-uploading experience in your Froala-powered applications, try the Filestack integration today. Its robust set of customization features will help you create a seamless and user-friendly file management workflow.