Filestack new release: Enjoy Seamless Compatibility with Modern Frameworks

Filestack has always been dedicated to staying on the cutting edge of technology, and this new update demonstrates that commitment. We are thrilled to announce the latest release of Filestack, which improves compatibility for Webpack 5, React, and Angular. This release offers seamless integration and enhances the user experience of modern JS frameworks.

Let’s dive into the standout features and enhancements that make this release a must-have for developers.

What’s new

Enhanced Webpack 4 & 5 Compatibility

Using JS module bundlers, such as Webpack, is essential for developers, especially in big projects. It offers several benefits, such as

1. Code organization.
2. Dependency management.
3. Code optimization.
4. Code splitting.
5. Build automation.

Webpack 5 even comes with enhanced features, such as

• Better tree shaking.
• Persistent caching.
• Module Federation.
• Stricter validation.

That’s why we have worked hard to ensure our new release is fully compatible with both Webpack 4 and 5. This helps to eliminate compatibility issues and streamline your development process. This enhancement ensures smoother workflow and better performance for developers using these popular module bundlers.

Adding a new parameter for audio_codec in Filestack JS SDK

We are excited to announce that we have added a new parameter for audio_codec in our JavaScript SDK, which makes it easier and more convenient to customize and optimize media content for a better end-user experience in your JavaScript applications.

It is no secret that video and audio transformations are important in today’s digital landscape. These transformations provide several benefits, such as

• Optimizing file size
• Compatibility across devices
• Content customization
• Streaming and delivery optimization.

Therefore, Filestack comes in to simplify the process of video and audio transformations using the Video and Audio Processing API.

To convert a video file using Filestack, you need to send a video_convert request to the Filestack API with the desired conversion parameters. For example, to change the video width use

https://cdn.filestackcontent.com/video_convert=width:300/HANDLE

Where HANDLE is the unique identifier of the video file.

To simplify the use of Filestack features in the JavaScript code, the Filestack JS SDK is used. For example, to resize a video using the Filestack JS SDK, call the ‘videoConvert’ method

const myVideo = new filestack.Filelink(HANDLE, apikey).videoConvert({width: 300});

One of the important transformation features that Filestack provides is video transcoding. To transcode video you have to use the `audio_codec` parameter in the `video_convert` request.

https://cdn.filestackcontent.com/video_convert=audio_codec:<audio_codec>/HANDLE

audio_codec is available in the Filestack API to transcode video and audio files but it wasn’t available in the JS SDK.

In this release, we added this parameter to the VideoConvertParams, which means you can now use it through the JS SDK, like

const myVideo = new filestack.Filelink(HANDLE, apikey).videoConvert({audio_codec:<audio_codec>, width: 300});

Whether you are aiming for high-quality audio or trying to reduce the file size, this parameter allows you to choose the best codec for your specific needs, providing more flexibility and control over the conversion process. The supported codecs include:

• libmp3lame
• libvorbis
• libfdk_aac
• dib_ac3
• pcm_s16le
• mp2
• ac3
• eac3

This new feature opens up more possibilities for developers who use Filestack JavaScript SDK to customize and optimize their media content for a better end-user experience.

Support for React 18

Filestack React SDK, a wrapper on JavaScript SDK that enables integration with the Filestack service in only a few lines of code, now supports React 18. This means that React developers will have a smoother and more robust experience when integrating their apps with Filestack.

This update allows for seamless file uploads, transformation, delivery, and management, which can be integrated into your React app while enjoying the features that React 18 offers, such as:

• Concurrent rendering
• Automatic batching
• Suspense on the server
• Streaming server rendering
• New React hooks and APIs, such as useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect, createRoot, hydrateRoot, renderToPipeableStream, and renderToReadableStream.

Whether you need an overlay picker, inline picker, drop pane picker, or the flexibility to embed the picker directly within a specific container, the Filestack React SDK has you covered. It provides developers with four React components to easily display Filestack Filepicker in their application.

• Component to render basic Overlay Picker

<PickerOverlay apikey='YOUR_APIKEY'/>

• Component to render basic Inline Picker

<PickerInline apikey='YOUR_APIKEY'/>

• Component to render basic Drop Pane Picker

<PickerDropPane apikey='YOUR_APIKEY'/>

• Component to render picker directly and embed it inside a specific container

<PickerInline apikey='YOUR_APIKEY'><div className="your-container"></div></PickerInline>

Moreover, you can import the filestack-js Client to handle file transformation and other tasks Filestack provides

import { client } from 'filestack-react';

To use these components inside your app. first, install the Filestack React SDK using this command

npm install filestack-react

then import the necessary components and use them in your app as shown in the examples above.

import { PickerOverlay } from 'filestack-react';


<PickerOverlay

  apikey={YOUR_API_KEY}

  onSuccess={(res) => console.log(res)}

  onUploadDone={(res) => console.log(res)}

/>

You can customize the File Picker using the following properties:

Key	Type	Required	Default	Description
apikey	String	true		Filestack API key
clientOptions	Object	false		https://filestack.github.io/filestack-js/interfaces/clientoptions.html
pickerOptions	Object	false		https://filestack.github.io/filestack-js/interfaces/pickeroptions.html
@deprecated onSuccess	Function	false	result => console.log(result)	A function to be called after the action completed successfully.
onUploadDone	Function	false	result => console.log(result)	Called when all files have been uploaded
onError	Function	false	error => console.error(error)	A function to be called when an error occurs
onError	Function	false	error => console.error(error)	A function to be called when an error occurs

With this update, Filestack empowers React developers to enhance both their development process and the end-user experience.

Support for Angular 14

Angular SDK also received significant enhancements in this update. The Filestack Angular SDK now supports Angular 14, making it even easier for Angular developers to integrate Filestack into their applications.

This Angular SDK is a wrapper on Filestack JavaScript SDK that enables integration with the Filestack service in just a few lines of code.

Once installed into your application, you will be able to use the FilestackAngularModule,  which consists of

• FilestackService – wrapper for a filestack-js client class with added support for observables
• FilestackTransformPipe – Pipe for easily creating URL with transformations in your template
• PickerOverlayComponent – Filestack picker component that will open in overlay mode
• PickerInlineComponent – Filestack picker component that will open in a provided HTML container
• PickerDropPaneComponent – Filestack drop pane component that will open in a provided HTML container which can be also used independently if needed

To learn more about how to install and use the Angular SDK, consult the SDK documentation.

Why Filestack?

Filestack is a collection of tools and powerful APIs that enable customers to easily upload, transform, and deliver content. Our mission is to provide excellent experience to our customers and their users. Filestack’s powerful APIs enable customers to manage all their file management requirements efficiently. Filestack’s adaptable infrastructure manages billions of uploads, transformations, and downloads every month, offering exceptional performance for users worldwide.

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

Enhance Your File Management

The latest Filestack release is a significant step forward in equipping developers with powerful, efficient, and flexible file management tools compatible with modern front-end frameworks. With enhanced compatibility with Webpack 5, React 18, and Angular 14.2.10, developers can now leverage the full potential of Filestack in their applications. These new features, along with adding the audio_codec parameter in the JS SDK, offer developers greater control, flexibility, and ease of use in managing their media content. This not only improves the developer experience but also enhances the end-user experience by providing seamless and efficient media content delivery. As we continue to innovate and improve, we look forward to seeing the amazing applications you will build with Filestack.

Upgrade now to the latest Filestack release and enhance your web application development experience, and start enjoying the benefits of this long-awaited update.

Read More →