New Release: Transformation UI and File Picker Unified with One API Call, Improved Accessibility, and More!

Exciting news, Filestack users! We’ve just released a major update that takes the Filestack File Picker and Transformation UI to new heights.

What can you expect? We’ve integrated the Transformation UI with File Picker so you can use both tools from a single interface initialized with one API call. Moreover, This release enhances the Transformation UI by adding preset image enhancements, alt text for uploads, and portrait crop options. Furthermore, we have refined the mobile user experience to make transforming your files on the go smoother than ever. Additionally, we’ve addressed identified glitches and limitations across various operating systems and browsers. Accessibility features have been enhanced, including adding alt text to uploaded files.

The result? A Filestack Transformation UI that is now more user-centric, reliable, and versatile than ever before. Get ready to unlock new levels of efficiency and creativity in your file management and transformation workflows. Read on to discover all the ways this release elevates the Filestack experience.

Add Enhance Presets To Transformation UI

For image processing, the Filestack API provides various ‘Enhance’ options.

• auto
• vivid
• beautify
• beautify_plus
• fix_dark
• fix_noise
• fix_tint
• outdoor
• fireworks

However, these options were only accessible via manual API calls. In this release, we introduced a new ‘Enhance’ tab in the Transformation UI that lists all the available ‘Enhance’ presets. This allows users to apply these enhancements with a single click, offering real-time previews and making the transformation process more intuitive. With this update, users can now easily enhance their images with a variety of preset options, saving time and effort in achieving the desired visual effects.

This feature streamlines image processing and improves workflow efficiency. For more details, visit the Filestack API documentation.

Add Portrait Crop to Transformation UI

One of the key enhancements in this release is adding a dedicated “Portrait Crop” feature to the Filestack Transformation UI. This new functionality addresses a common pain point for users – the need to easily crop images to a standard portrait aspect ratio for use as profile pictures or social media posts.

Previously, the Transformation UI offered various crop options but lacked a preset specifically tailored for portrait-oriented images. This meant users had to manually adjust the crop area to achieve the desired 9:16 aspect ratio, which was time-consuming and often resulted in suboptimal cropping.

With the new “Portrait Crop” feature, users can now quickly and easily crop their images to the perfect dimensions for profile pictures and mobile-friendly social media posts. The preset aspect ratio ensures that the cropped image will fit seamlessly on platforms like LinkedIn, Instagram, and Facebook, without unsightly stretching or cropping.

Key Benefits:

• Streamlined Workflow: Users can now crop images to the optimal portrait aspect ratio with a single click, saving time and effort in the file preparation process.
• Consistent Branding: The standardized portrait crop ensures that profile pictures and social media posts maintain a cohesive, professional look across all platforms.
• Mobile-Friendly Formatting: Portrait-oriented images are better suited for mobile viewing, providing an enhanced user experience on the go.

Real-World Use Cases:

• Professional Profiles: Easily crop headshots and portraits to the perfect size for LinkedIn, Twitter, and other professional networking platforms.
• Social Media Posts: Quickly format images for Instagram, Facebook, and other social media channels that favor portrait-oriented content.
• Company Branding: Ensure a consistent, polished look for employee profile pictures and other portrait-oriented brand assets.

The ‘Portrait Crop’ option is now available within the existing crop features in the Transformation UI. This preset aspect ratio of 9:16 is optimized for portrait-oriented images. Users can click and drag the crop area to customize the size while maintaining the 9:16 aspect ratio. As adjustments are made, a real-time preview of the cropped image is displayed.

By introducing the “Portrait Crop” feature, Filestack is empowering users to streamline their file management and transformation workflows, while delivering a more intuitive and accessible experience across different platforms and use cases.

Integrate Transformations UI with Picker

This release introduces a significant enhancement that allows developers to initialize the Filestack Picker and Transformations UI in a single API call, with unified configuration options. This streamlined integration delivers several benefits:

• Simplified Implementation: Developers can now set up the Picker and Transformations UI with fewer lines of code, reducing the complexity of the integration process. This makes it easier to implement a cohesive file management workflow for users.
• Improved Usability: By combining the Picker and Transformations UI, users can now enjoy a more seamless experience when uploading and editing files. After selecting files using the Picker, they can immediately access the powerful transformation tools, without the need to navigate between separate interfaces.
• Increased Efficiency: The unified configuration options allow developers to manage the settings for both the Picker and Transformations UI from a single location. This reduces the maintenance overhead and ensures a consistent user experience across the application.

How it works:

To utilize the Transformation UI for editing uploaded images, activate the “Transformations UI” plugin from the marketplace and set the transformationsUI option to true during File Picker initialization.

const apikey = "YourAPIKey"

const client = filestack.init(apikey);

const options = {

    transformationsUI: true,

};

client.picker(options).open();

 

After users upload images using the Filestack Picker, they can click the “Edit Image” button to access the Transformations UI, which offers a more comprehensive set of editing tools than the previous crop, circle, and rotate features.

Once changes are saved, users will have the option to revert changes or upload the modified image to the configured storage.

This feature ensures the integration meets the diverse needs and preferences of various users and development teams.

Improved Uploaded Images Accessibility

In addition to the seamless integration between the Transformations UI with the File Picker, this release also focuses on enhancing the accessibility of the uploaded images through the Filestack File Picker. Users can now add alternative text (alt text) while uploading image and video files, ensuring that the content is accessible to those with visual impairments.

How it works:

• While uploading image or video files, “Alt Text” is displayed under the uploaded file thumbnail with a Pen icon beside it.
• Clicking on the Pen icon will display an input to enter an alt text.
• Clicking on the arrow will apply the alt text field and close the edit field UI.
• Clicking on the “X” icon reverts any changes and hides the edit field UI.
• The input field has a maximum of 50 characters.
• Text will ellipsis past 20 characters when not in edit view.
• On hover, a tooltip will be displayed containing the full alt text so the user can read it.

The Alt text will be stored alongside the file metadata, although it will not be exposed through our CDN requests at this time.

This feature ensures compliance with accessibility standards, improving the user experience for individuals using screen readers.

Why Filestack?

With Filestack, you can easily manage all your file management requirements with our powerful APIs. Whether you need to upload, transform, or deliver content, we’ve got you covered. Our adaptable infrastructure handles billions of uploads, transformations, and downloads every month, ensuring exceptional performance for users worldwide. Our mission is to provide an excellent experience for our customers and their users.

If you have not yet tried Filestack, start your free trial now.

Unlocking Productivity with Filestack’s Improved File Management Tools

This Filestack release delivers a lot of enhancements that elevate the user experience across the Filestack File Picker and Transformation UI. Key improvements include:

• New “Enhance” presets that make it easy to apply image adjustments with a single click.
• A dedicated “Portrait Crop” feature for quickly formatting images to the optimal aspect ratio for social media and profiles
• Seamless integration between the File Picker and Transformation UI, allows users to upload and edit files in a single, streamlined workflow.
• Improved accessibility through the ability to add alt text to uploaded images and videos

These updates demonstrate Filestack’s commitment to continuously refining its platform based on user feedback. The result is a more intuitive, reliable, and versatile set of file management tools that empower users to work more efficiently and creatively. With Filestack, teams can unlock new levels of productivity and deliver high-quality content across various digital channels.

Don’t miss out on these powerful new features—update your Filestack to the latest release today and experience the difference!