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

customization

Froala, a popular rich text editor, just got even better with its latest update. Froala V4.3+ now supports the Filestack File Picker as a new option for uploading images, videos, and files.

The Filestack File Picker offers a user-friendly interface that improves the uploading file experience. By integrating Filestack, Froala users can now leverage its robust file management capabilities to simplify the entire upload process, delivering a much smoother experience for their users.

One of the advantages of Filestack File Picker is its many customization options, such as restricting file types and setting upload size limits. In this article, we’ll dive into some of the customization options available to Froala users when integrating the Filestack File Picker.

By leveraging these powerful features, you can create a truly seamless and intuitive file management workflow within your Froala-powered applications, taking the user experience to new heights.

How Can I Customize The File Picker Within the Froala Editor?

To start using Filestack File Picker for file uploading within the Froala editor, you have to include its scripts and stylesheet files within your project and configure the filestackOptions.filestackAPI option with a valid API key which you can get from Filestack DevPortal for free.

Here’s an example of what your HTML code might look like:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,
            maximum-scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet"
            type="text/css" />
              <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

    </head>
    <body>
        <div id="froala-editor"> </div>
        <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
         <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
  <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
  <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
        
        <script>
                new FroalaEditor("div#froala-editor",{
                  filestackOptions{
                    filestackAPI: 'yourAPIKey',
                  }
                });
        </script>
        </body>
</html>

To customize the File Picker, you can add your custom configuration to the filestackOptions.pickerOptions option. In this case, the Froala initialization code would be similar to:

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        transformationsUI: true
      }
    }
  });

Customization Options

Restrict File Types

You can restrict the file types that users can upload by setting the accept option within the  filestackOptions.pickerOptions configuration. For example, to only allow image files, you can use accept: 'image/*'. You can also specify multiple file types by providing an array, such as accept: ['image/*', 'video/*', 'application/pdf']. This ensures that users can only upload the file types that are relevant to your application, enhancing the overall user experience. The formats that you can assign through this option are:

  • .pdf <- accept PDF files.
  • image/jpeg <- any MIME type commonly known by browsers
  • image/* <- accept all types of images
  • video/* <- accept all types of video files
  • audio/* <- accept all types of audio files
  • application/* <- accept all types of application files
  • text/* <- accept all types of text files
  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        accept: ['image/*', 'video/*']
      }
    }
  });

If you need to restrict other file types, you can use the acceptFn option which allows you to provide a custom function to determine which files are accepted. This gives you full control over the file type validation process.

The acceptFn has two parameters:

  • PickerFileMetadata
  • PickerAcceptFnOptions

And you have to return the Promise<string> .

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        acceptFn: (file, options) => {
           return options.mimeFromMagicBytes(file.originalFile).then((res) => { // we can check mimetype from magic bytes
             //console.log(options.mimeFromExtension(file.originalFile.name)); // or check extension from filestack extensions database
             // throw new Error('Cannot accept that file') // we can throw exception to block file upload
             // return Promise.reject('Cannot accept that file'') // or reject a promise
             return Promise.resolve();
           });
        }
      }
    }
  });

By leveraging the acceptFn, Froala users can ensure that only the appropriate files are uploaded, maintaining the integrity and consistency of the content within their Froala-powered applications. This level of customization empowers them to tailor the file upload experience to their specific needs, enhancing the overall user experience.

Restrict File Size

You can also set upload size limits using the maxSize option within the filestackOptions.pickerOptions configuration. This allows you to restrict the maximum file size that users can upload, helping to manage storage and bandwidth constraints. For example, to set a 10MB limit, you can use maxSize: 10 * 1024 * 1024. This ensures that users cannot upload files that exceed your specified size limit, improving the overall file management process.

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        maxSize: 10 * 1024 * 1024
      }
    }
  });

By setting appropriate size limits, you can ensure that the file upload process aligns with your application’s requirements and provides a seamless user experience.

Restrict Allowed Image Dimensions

You can also set accepted image dimensions using the imageDim option within the filestackOptions.pickerOptions configuration. This allows you to specify the exact width and height for uploaded JPEG, PNG, and BMP images, ensuring that they meet your application’s requirements.

Local and cropped images will be resized (upscaled or downscaled) to the specified dimensions before uploading. The original height to width ratio is maintained. To resize all images based on the width, set [width, null], e.g. [800, null]. For the height set [null, height], e.g. [null, 600].

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        imageDim: [800, 600]
      }
    }
  });

This helps maintain visual consistency and quality within your Froala-powered content.

Instead, if you prefer to give your users some freedom, you can use imageMax and imageMin options where imageMax allows you to set the maximum allowed dimensions. Images bigger than the specified dimensions will be resized to the maximum size while maintaining the original aspect ratio.

imageMin allows you to set the minimum allowed image dimensions. Images smaller than the specified size will be upscaled to the minimum size while maintaining the original aspect ratio.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        imageMax: [1800, 1600],
        imageMin: [800, 600],

      }
    }
  });

This gives users more flexibility while still ensuring the images meet your application’s requirements. By leveraging these options, you can strike a balance between maintaining visual consistency and providing users with a more open file upload experience.

Restrict Upload Number

You can also restrict the number of files that users can upload at once by setting the maxFiles option within the filestackOptions.pickerOptions configuration. This helps you manage the upload process and ensure that users don’t overwhelm your application with too many files at once. For example, to limit the number of files to 5, you can use maxFiles: 5. 

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         maxFiles: 5,
         
      }
    }
  });

Additionally, you can set the minimum number of files that users must upload at once by setting the minFiles option within the filestackOptions.pickerOptions configuration. This can be useful if your application requires a certain number of files to be uploaded together, such as multiple images for a product listing. For example, to require at least 3 files to be uploaded, you can use minFiles: 3.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         maxFiles: 5,
         minFiles: 3
      }
    }
  });

By setting both maxFiles and minFiles, you can strike a balance between providing flexibility and maintaining control over the file upload process, ensuring that your Froala-powered application meets your specific requirements.

By default, the upload process didn’t start until the user hit the “Upload“ button. If you want to start uploading automatically when maxFiles is hit, set the startUploadingWhenMaxFilesReached option to true.

Restrict Concurrency Upload Number

You can also restrict the number of concurrent file uploads by customizing the concurrency option within the filestackOptions.pickerOptions configuration, which is by default set to 4. This allows you to control the maximum number of files that can be uploaded simultaneously, preventing your application from being overwhelmed and ensuring a smooth upload experience. By setting an appropriate value for concurrency, you can balance the need for efficient file uploads with the available resources and bandwidth of your application.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         concurrency: 2,
      }
    }
  });

 

Restrict Video Resolution

You can also restrict the video resolution of uploaded files using the videoResolution option within the filestackOptions.pickerOptions configuration. This allows you to specify the maximum width and height for video files to one of these values “320×240”, “640×480” or “1280×720”, ensuring that they meet your application’s requirements. By default, it is "640x480". By setting appropriate limits, you can optimize storage, bandwidth, and playback performance, while maintaining the desired visual quality for your Froala-powered content.

 

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         videoResolution: "1280x720",
      }
    }
  });

 

Customize Upload Sources

You can also specify the upload sources that users can choose from by setting the fromSources option within the filestackOptions.pickerOptions configuration. This allows you to restrict the file selection to specific sources, such as local device storage, cloud storage providers, or social media platforms. For example, to only allow users to upload files from their local device and Google Drive, you can use fromSources: ['local_file_system', 'google_drive']. This helps streamline the file upload process and ensures that users can only access the file sources that are relevant to your application. Valid ones are:

  • local_file_system – Default
  • url – Default
  • imagesearch – Default
  • facebook – Default
  • instagram – Default
  • googledrive – Default
  • dropbox – Default
  • webcam – Uses device menu on mobile. Not currently supported in Safari and IE.
  • video – Uses device menu on mobile. Not currently supported in Safari and IE.
  • audio – Uses device menu on mobile. Not currently supported in Safari and IE.
  • box
  • github
  • gmail
  • googlephotos
  • onedrive
  • onedriveforbusiness
  • customsource – Configure this in your Filestack Dev Portal.
  • unsplash

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         fromSources: ['local_file_system', 'google_drive'],
      }
    }
  });

Cleaning JPEG Image EXIF

You can also configure Filestack to automatically remove EXIF data from JPEG images during the upload process. This can be useful for reducing the file size and ensuring that sensitive metadata, such as location information, is not inadvertently included in the uploaded images. To enable this feature, you can set the cleanupImageExif option within the filestackOptions.pickerOptions configuration to true.

 

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         cleanupImageExif: true,
      }
    }
  });

 

This option also offers the ability to keep image orientation by assigning it to an object and setting a keepOrientation property to true. Moreover, you can keep image color profiles by setting keepICCandAPP property to true.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         cleanupImageExif: {
           keepOrientation: true,
           keepICCandAPP: false
         },
      }
    }
  });

By doing so, you can streamline the file upload process and maintain better control over the data being stored in your Froala-powered application.

Enable Transformation UI

You can also enable the Transformation UI to allow users to perform advanced image editing, including filters and overlay text, alongside basic operations like cropping and rotating, directly in the file picker. To enable this feature, you can set the transformationsUI option within the filestackOptions.pickerOptions configuration to true.

This provides users with a more robust file editing experience, allowing them to customize their uploads before they are sent to your application.

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        transformationsUI: true
      }
    }
  });

Conclusion

In this article, we’ve explored the powerful customization options available when integrating the Filestack File Picker into your Froala-powered applications. By leveraging features like file type restrictions, upload size limits, image dimension controls, and more, you can create a truly seamless and intuitive file management workflow for your users.

These customization capabilities empower Froala users to tailor the file upload experience to their specific needs, ensuring the integrity and consistency of the content within their applications. As we continue to explore the Filestack integration in future articles, we’ll cover File Picker events and the user interface customization options.

To get started, sign up for a free Filestack account today and start enhancing your Froala-powered applications with a truly customized file upload experience. With Filestack’s robust file management capabilities and Froala’s industry-leading rich text editing features, you can take your content creation and management to new heights.

 

Posted on November 15, 2024

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

Visit Profile

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

file uploading

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

Froala Release

Froala Editor 4.3.1: Transforming Your Content Creation Experience with Refined Pasting and More

Image transformation UI

Explore The Transformation Options within The Froala New File Uploading Tool