Site icon Filestack Blog

Using Filestack Transformations in a Modern UI

At Filestack, our mission is to create a complete toolkit for content processing that evolves with the needs of developers. We’ve built a series of use case specific tools and APIs including file uploads (1.8B uploads to date), transformations (27B content processing operations in 2019), intelligence and delivery which can all be tied together with Filestack Workflows (nearly 100K tasks executed since launch). 

Thousands of customers have embraced our toolset as the go-to service that makes file handling easy. We have processed and delivered to the tune of over 5 petabytes of content worldwide this year.

Today we’re expanding that toolkit with the introduction of our new Transformations UI. Whether you’re looking for an Aviary alternative or wanting to equip your users with Adobe Photoshop level image transformations, you can do just that. The Filestack Transformations UI allows you to give your customers the power of a heavy duty photo editing with a lightweight, in-app experience. 

This modern UI was created to give developers another critical content tool to build into their applications. The UI allows their customers to apply filters, adjust image sizes, crop, rotate and apply many other image transformations that users have come to know and love. 

What were once only available as URL-based server side transformations for developers are now accessible to your customers as in-application client side transformations. The best part for developers is that our stunning UI and our low-code, mobile friendly solution is all built in for you as a part of the Filestack offering.

Image Manipulation

With the new Transformations UI, developers can give their users the ability to crop and rotate images, apply filters, access transformations parameters that only your developers controlled, like resizing height and width, flipping images vertically or horizontally. Like all other Filestack features the UI can be implemented into your application with a few lines of code. 

const <span style="font-weight: 400;">transformUI</span><span style="font-weight: 400;"> = </span><span style="font-weight: 400;">new</span><span style="font-weight: 400;"> FilestackTransform();</span>

<span style="font-weight: 400;">transformUI.setConfig({})</span>

<span style="font-weight: 400;">transformUI.setSource(</span><span style="font-weight: 400;">'https://cdn.filestackcontent.com/IT4r9XmlSzS1lm45SYh9'</span><span style="font-weight: 400;">);</span>

<span style="font-weight: 400;">transformUI.open(source).then((</span><span style="font-weight: 400;">transformedFile</span><span style="font-weight: 400;">) => {</span>

<span style="font-weight: 400;"> </span><span style="font-weight: 400;">//do something with the result</span>

<span style="font-weight: 400;">});</span>

The Transformations UI offers a variety of transformations that allow customers to customize their image exactly how they want before they ever upload.   

Image Filters

Often time, user images need fine tuning before they’re loaded into your app. Whether that’s inverting colors, adjusting saturation levels or sharpening an image, there is an array of modifications your customers may want to make to enhance their images. 

Check out the complete list of modifications that are at your customers’ fingertips with the Filestack Transformations UI.

Stylized Custom Text

Sometimes your image needs some text. We’ve included the power to add custom stylized text to any image before its loaded into your application. With full control over the font family, size, color opacity and overall style of the text added to an image.

Here are a few ways customers are already using the Filestack Transformations UI. 

Personalized Profile Images

Personalization is at the center of many user tools. As a user is uploading an image into project management or even communication applications, they’re going to want to perfect their image before displaying it for the world to see. 

With Filestack Transformations, allow your users to make modifications before they’re uploaded into your project management or communication app.

Image Transformations for Print

No ones knows the importance of image transformations like Print companies. With the Transformations UI, Print companies will be able to offer their customers the ability to adjust and personalize their most unforgettable before they ever consider how they’d like them printed.  

Whether digital or print, it’s crucial that images undergo proper transformation to fit a web or photobook page. 

Join the thousands of other customers who have taken advantage of transforming images with the #1 file handling service for developers and sign up for a free account with us to get started.

Exit mobile version