Filestack’s Latest Transformations UI with the File Picker in 2024

As of 2022, 2.5 quintillion bytes were created globally every day. A significant portion of this data consisted of uploads and transfers. File management solutions have grown in importance. Filestack, a leading name in file management, proved its competence. In 2024, it introduced the Transformations UI with the File Picker.

In this blog, we explain why transformation UIs are meaningful and describe the new features in Filestack’s latest update. You can follow a detailed manual to use it yourself. We will also guide you through creating a transformation UI app based on HTML, CSS, and JavaScript.

Let’s get started!

Key takeaways

• Find out what a transformation UI is. 
• Learn why it matters for business transformations. 
• This article explains changes introduced in Filestack’s 2024 Transformations UI. 
• It ccovers how to integrate the UI with the File Picker. 
• We will create a transformation UI app using HTML, CSS, and JS. 
• Understand why Filestack’s UI is an ideal choice. 
• Learn the operations the UI can perform. Use cases for transformation UIs are discussed.

What is a transformation UI?

A transformation UI helps us in modifying files like images, documents, or videos. It simplifies tasks like resizing, cropping, or rotating. It doesn’t require complex coding. The interface shows real-time results, so users can preview changes before saving. This makes file management faster and easier.

Transformation UIs are essential for web design, development, and digital media. They integrate with APIs to handle tasks quickly. Filestack provides API for easy integration into projects.

Features of Filestack’s transformation UI

Let’s explore the features of Filestack’s new release on transformation UI:

Integration with File Picker

Filestack’s Transformation UI is now connected with the File Picker. Users can handle both uploads and transformations from one interface. This is done with just one API call.

Preset Image Enhancements

The UI includes new preset image enhancements like auto, vivid, and beautify. These can be applied with one click. Real-time previews simplify the process.

New Portrait Crop Feature

The Portrait Crop feature allows cropping images to a 9:16 ratio. This is ideal for social media posts. It ensures images fit seamlessly on platforms like Instagram or Facebook.

Improved Mobile User Experience

Mobile functionality has been improved for easier file transformations. The interface is now more mobile-friendly.

Accessibility and Reliability Enhancements

Alt text is provided for accessibility. Bugs and glitches across browsers have been fixed, ensuring a better experience.

Integrating Filestack’s transformation UI into your web application

Filestack’s Transformation UI offers a simple way to edit images. It requires minimal coding. Users can apply filters, adjust size, and make other modifications easily.

Include the UMD Module and Styles:
Add the following script and stylesheet to your HTML.

<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>

<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

Prepare a Container for the Transformed Image:
Create a container to display the transformed image.

<div style="text-align:center;">

  <img id="result" style="width:600px" />

</div>

Initialize the Transformation UI:
Use your Filestack API key and an image URL. This initializes the Transformation UI and shows the result.

const tr = new FilestackTransform('API_KEY');

tr.open(FILE_URL).then(res => {

  document.getElementById('result').src = res;

});

It is important to highlight the new change implemented by Filestack in the latest transformation UI. You can now access it via following method:

const apikey = "YourAPIKey"

const client = filestack.init(apikey);

const options = {

    transformationsUI: true,

};

client.picker(options).open();

Let’s build an app and show you how the above steps work. 

Getting the API key

The first step in the integration process is to obtain an API key. Sign up for a new account on Filestack and go to your dashboard. You’ll find the API key in the top right corner. Next, confirm that the API key is functioning properly. You can do it through the Postman API testing tool. 

Let’s build our application. 

Building a transformation UI app by using HTML, CSS, and JavaScript

Follow the steps given below to build a transformation UI app:

1. HTML Structure

The HTML defines the structure of the webpage. It includes the main elements like the upload button, image preview, and download button.

HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Filestack Uploader</title>

    <!-- Filestack Library -->

    <script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>

</head>

<body>




    <!-- Overlay for background dimming -->

    <div class="overlay"></div>




    <!-- Uploader card -->

    <div class="uploader-card">

        <h1>Upload Your File</h1>

        <!-- Upload Button -->

        <button id="uploadButton">Choose File</button>




        <!-- Image preview -->

        <div id="imagePreview">

            <img id="uploadedImage" src="" alt="Uploaded Image">

        </div>




        <!-- Download button -->

        <button id="downloadButton">Download Transformed Image</button>

    </div>




</body>

</html>

 

Explanation:

The overlay div adds a dimmed background for better readability.

The uploader-card contains the main functionality. It holds the upload button, image preview, and the download button.

2. CSS Styling

CSS is used to style the webpage. It controls the layout and appearance, making the page visually appealing and responsive. You can access the existing CSS styles through this GitHub repository. It is important to note that you can also customize the CSS styles. You can adjust them based on your project requirements. 

Here is the explanation for the existing CSS styles:

Explanation:

The body has a background image. The page is centered using Flexbox.

The .uploader-card is styled with a white, semi-transparent background. It has rounded corners and shadows for a modern look.

The buttons (#uploadButton and #downloadButton) have hover effects. They change color and move slightly when hovered over.

3. JavaScript (Filestack Integration)

JavaScript adds functionality to the file uploader. It handles the file selection, image preview, and download actions.

<script>

    // Replace 'YourAPIKey' with your actual Filestack API key

    const apikey = "Add-your-api-key";  

    const client = filestack.init(apikey);




    // Configuration for Filestack file picker

    const options = {

        transformationsUI: true,  // Enable transformations

        onUploadDone: (result) => {

            console.log(result);  // Log the result to check the structure




            // Check if filesUploaded array exists and has at least one file

            if (result && result.filesUploaded && result.filesUploaded.length > 0) {

                // Get the transformed image URL

                const transformedImageUrl = result.filesUploaded[0].url;




                // Display the image in the preview section

                const imagePreview = document.getElementById('imagePreview');

                const uploadedImage = document.getElementById('uploadedImage');

                uploadedImage.src = transformedImageUrl;

                imagePreview.style.display = 'block';




                // Show the download button

                const downloadButton = document.getElementById('downloadButton');

                downloadButton.style.display = 'inline-block';




                // Add event listener to download the file

                downloadButton.addEventListener('click', () => {

                    // Fetch the file as a blob

                    fetch(transformedImageUrl)

                        .then(response => response.blob())

                        .then(blob => {

                            const a = document.createElement('a');

                            const url = window.URL.createObjectURL(blob);

                            a.href = url;

                            a.download = 'transformed-image.jpg';  // Customize the file name

                            document.body.appendChild(a);

                            a.click();

                            window.URL.revokeObjectURL(url);  // Release the memory

                            document.body.removeChild(a);

                        })

                        .catch(error => console.error('Error downloading the image:', error));

                });

            } else {

                console.error("Upload result did not contain the expected file data.");

            }

        }

    };




    // Open the Filestack file picker on button click

    document.getElementById('uploadButton').addEventListener('click', () => {

        client.picker(options).open();

    });

</script>

 

Explanation:

Filestack Integration

We initialize the Filestack client with an API key. This enables file uploading.

Image Display

After the file is uploaded, the URL is retrieved and displayed in the imagePreview.

Download Feature

The downloadButton is activated after the upload. Clicking the button triggers the file download using the image URL.

Here is the workflow of our project:

• HTML defines the structure of the transformations UI. It includes the upload button, image preview, and download button.
• CSS styles the page, ensuring it looks good on both large and small screens. It also adds hover effects to the buttons.
• JavaScript handles the file upload, image display, and download functionality. It connects to Filestack and manages interactions on the page.

Output

When you run the app, you get the output of your transformations UI as under:

Click on the Choose File button:

Add your image from the desired location. You will see something like this:

Click on the pen icon next to the “ALT TEXT” and set the alt text of the image:

Next, you can click on the Edit button. It will open the transformation UI, where you can enhance the image as follows:

Apart from the above enhancements, you can also add an overlay image as follows:

You can save the image and click on download to save it on your computer:

Here is the final image:

Conclusion

The Transformations UI in Filestack’s latest version, released in 2024 with the File Picker, is outstanding. It enables developers to optimize image management and editing. The step-by-step interface allows users to upload images, transform them, and download them effortlessly. For this reason, it is fairly the best option for both web and mobile applications.

Portrait resizing and preset image modifications give the images a more advanced touch and creativity. Usability in the mobile context has also been improved to enable smoother interaction. Also, with the APIs, it is possible to integrate them simply and quickly. Filestack has made JavaScript image editing easier than before.

FAQs

Why choose Filestack’s transformation UI?

Choose Filestack’s transformation UI for its ease of use, flexibility, and powerful features.

What operations can we perform through Filestack’s transformation UI?

You can resize, crop, rotate, and apply filters to images using Filestack’s Transformation UI.

How much does Filestack’s transformation UI cost?

Filestack’s transformation UI integrates along with the Filestack Python file picker. The basic plan starts at $69 per month. 

What are the real-world use cases of transformation UIs?

Transformation UIs simplify image editing, resizing, and cropping for web development and digital media.

Integrate transformation UI with your file picker today – Sign up at Filestack now!

Read More →