CodeinWP CodeinWP

Filestack: A File Uploader and Powerful APIs to Deliver and Transform App Content

The following is a sponsored article for Filestack, a file uploader service with powerful APIs to deliver and transform files to your apps.

If you’re building an app that requires a lot of user-generated content and media that needs to be processed, tagged, filtered, or otherwise manipulated in real-time, you definitely want a solution that’s fast and seamless and doesn’t get in the way of your app’s primary functionality.

Filestack

Filestack is a service you’ll want to consider. Here’s what Filestack offers:

  • A beautiful file uploader that’s easy to integrate into your app and connects to popular storage services
  • On-the-fly image transforms and file conversion via URL parameters
  • Secure and reliable content delivery
  • Powerful AI-based Intelligence tagging and scanning

Let’s take a closer look at some of these features so you’ll know if Filestack is a good fit for your product’s platform.

Filestack’s File Uploader

Filestack Upload is a file uploader for your app that can drastically improve how your app handles file picker functionality. And notably:

Filestack Upload gives you the same upload technology used by internet giants without the struggle of having to maintain it.

Due to concerns with security, privacy, and performance, this is definitely the kind of app feature you don’t want to build from scratch. Having a secure and reliable service that’s easy to integrate is a huge plus for getting file upload functionality working and bug-free.

Once you’ve signed up for an account, you can choose from one of three File Picker implementations: Web, iOS, and Android. Your account will give you access to your own private API key that you can use to start integrating Filestack’s features. The file pickers increase your app’s file upload speeds by up to 3.6 times. In addition to local file uploads, the file pickers integrate with many popular services, including:

  • Dropbox
  • Google Drive
  • OneDrive
  • GitHub
  • Facebook
  • Instagram
  • Google Photos
  • Box

Filestack’s service includes something called Intelligent Ingestion that guarantees upload success 99.99% of the time.

If you’re building a web app, the Filestack docs show you how to integrate a JavaScript file picker, which is part of Filestack’s open-source SDK. You can try out a live example in the JSFiddle demo below:

Notice the easy-to-use UI, along with the integrations options shown on the left side of the file picker (Dropbox, Instagram, etc). This is just one example but the file picker is fully customizable according to your app’s needs.

If you try uploading a local image to the demo page, you can see a demonstration of the image manipulation features available to the user. These include ability to crop, rotate, and decorate the image with a simple circle background/frame.

Cropping an Image with Filestack's File Uploader

When files are uploaded, Filestack’s CDN ensures the files are accessible on mobile or desktop, with no need to fret over file quality or any other device-specific constraints.

Filestack’s Processing Engine

Another solid feature offered by Filestack’s service is their processing engine that allows you to use the Filestack API to transform files either in real time or via custom workflows.

For example, any image that’s uploaded can be manipulated via simple changes in the file URL to make the necessary transformations in real time.

Filestack's URL API

As an example files are stored in Filestack’s CDN using a URL that looks like this:

https://cdn.filestackcontent.com/pdn7PhZdT02GoYZCVYeF

Note that this example doesn’t include an API key. Your real-world examples would use the URL format shown in the image above, which includes the API key.

Once the file is live, it can then be transformed using URLs like the following:

https://cdn.filestackcontent.com/resize=width:400/pdn7PhZdT02GoYZCVYeF
https://cdn.filestackcontent.com/resize=width:500/sepia=tone:80/polaroid/pdn7PhZdT02GoYZCVYeF
https://cdn.filestackcontent.com/resize=width:500/rotate=deg:180/pdn7PhZdT02GoYZCVYeF

Note the different values used to resize, rotate, add special effects, and so forth. Filestack’s documentation covering the Processing API provides more info on what’s possible with transformations.

Notably, these on-the-fly transformations have no effect on the original image. This means you can use the API to programmatically build all the different image sizes you need for your app – which might include thumbnails, different sizes for responsive images, user-edited images, and more.

Filestack SDKs for integrating with different languages

Filestack’s service includes SDKs for integrating with JavaScript, Angular, React, PHP, Ruby, Python, and Java. Whatever language you’re using, you’ll have access to callbacks, webhooks, and more for doing whatever your app requires.

Filestack’s Intelligence Technology and Workflows

One of the most powerful parts of Filestack’s service is their Intelligence engine. This technology uses state-of-the-art machine learning that allows you to automatically and programmatically organize and tag your images based on various factors.

Tagging Images in Filestack

Here are some of the features of the Intelligence engine:

  • Object Recognition – Allows you to auto-tag images based on objects detected. For example, a photo with a young child playing baseball could be auto-tagged with terms like bat, ball, child, sports, etc.
  • Image Sentiment – This enables you to auto-detect emotions expressed in an image (e.g. happy/sad people)
  • Explicit Content Detection – Easily protect users from NSFW images and videos by filtering based on an SFW Boolean returned in the API call
  • Optical Character Recognition – This powerful feature allows you to extract text from images, including from both handwritten and printed characters
  • Copyright Detection – Lets you detect whether an image is copyright protected or not; if it is protected, details such as purchase link, photographer name, etc. are returned in the API call
  • Video Intelligence – Uses automatic video-tagging that improves your website’s SEO

All of these intelligence features can be used as part of Filestack Workflows. This no-code feature lets you build your own streamlined content tasks to automate how uploaded files are handled. Some examples of how Workflows might be used along with Filestack Intelligence include:

  • An education-related app that allows students to upload assignments in different file formats. The content is automatically scanned for viruses, plagiarism, NSFW content, and items are tagged accordingly.
  • A social networking app that scans and tags posts and bio photos to filter out or tag content that’s found to be against community guidelines, infringes on copyright, contains NSFW content, etc.
  • A personal finance app that allows documents to be uploaded by users. Files can be automatically converted to different formats for storage purposes. Receipts and other scanned content can be automatically converted to editable text format.

That’s just a small sampling of what’s possible. With Workflows, you can automate just about any set of tasks into a single API call for an easy-to-maintain and streamlined process.

Try Filestack’s File Uploader and More

Whether it’s the file uploader, the CDN, the Intelligence engine and more — Filestack is packed with powerful features and I was only able to scratch the surface of what’s possible in this review. The documentation is pretty extensive and might require a little patience while getting to know many of the features, but the team at Filestack will be more than happy to assist you to get up and running with any of products on the Filestack platform.

You can sign up for the free plan that allows up to 1GB of view/download bandwidth per month along with 500 uploads, 1,000 transformations, and up to 1GB storage on their CDN (your own external storage integration is no charge).

Web Tools Weekly

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).