JavaScript File Upload: Processing Uploaded Files

Dozens of JavaScript file uploaders exist in the industry, but very few can meet your expectations. Generally, ease of handling uploaded files is a great advantage for a file uploader. Building and maintaining such a JavaScript file uploader is laborious. Thus, this is where the Filestack comes into play.

Filestack’s Processing Engine API offers many services that engage in file management. Hence, Filestack edits your uploaded files without implementing your logic. This is where the API of Filestack’s’ processing engine comes in to handle all your file logic. Moreover, Filestck OCR SDK allows you a great deal of ease in file management.

This post will additionally provide insights into the JavaScript file uploader service provided by Filestack.

What is Filestack Processing Engine API?

Filestack’s JavaScript file upload system also has a powerful processing engine. It allows developers to transform different files, including images, videos, and documents. It also provides insights into the contents of the files through its ML-based intelligence system.

Filestack allows you to transform your files in real-time by appending parameters to the URLs, asynchronously using the workflows. When you allow your users to transform images, use transformation UI. It will allow your user to manipulate their files with a great experience. Filestack’s transformation UI helps your users have an interface for the web and iOS to modify their images without touching any code.

Upon uploading your application files, Filestack stores them and makes them readily accessible over its CDN. With Filestack, you can modify each file’s URL by processing tasks, an option that changes the requested resource. A set of parameters is assigned with each task. Filestack’s API clients allow users programmatic access for constructing these transformation URLs.

Why use Filestack’s JavaScript file upload & processing API?

1. Filestack offers multiple SDKs from different languages and a framework to help you choose your own. You can plug it into your existing app and use the power of its API. It lets you create within the comfort of your primary programming language choice.

2. Ease of file handling is another benefit of Filestack. Building file handling applications from scratch and maintaining the system is always hazardous. Alternatively, plugging Filestack into your existing system lets you focus on the core issues of your app. It is helpful for projects and handles lots of image uploading and processing.

What can Filestack’s JavaScript file upload & processing engine do?

• Converts of PDF files to Word documents
• Improves the image resolution of your uploaded image
• Efficiently adds filters to images
• Converts PowerPoint files to images
• And much more!

Is the transformation process automated?

The answer is yes, because Filestack’s API engine gives you complete control over the files you want to convert. Thus, it offers to customize the conversion to match your actual needs. The underlying cause – it is highly extensible and programmable. You can use Filestack Workflows to automate your processes and ensures added security with webhooks.

How to use Filestack’s JavaScript file upload and processing API?

Automation with Workflows

For every developer, development time is precious, so they look for third-party apps that offer automation. Filestack offers workflows that can help automate your business with great ease.

These are the things you can automate with workflows:

• Transformations
• Advanced Transformations
• Image Tagging
• Video Tagging
• Image Captioning
• Image SFW
• Video SFW
• OCR 
• Copyright Detection
• Document Detection
• Virus & Malware Detection

In this case, plug your app with Filestack. It’s workflow adds additional logic within your app, resulting in process automation without having to create that logic from scratch.

How can Workflows API simplify the process?

The workflow feature of Filestack also allows you to chain tasks together to fit your specific requirement. File picker uploads a file, converts it, and then sends you a notification.

Webhooks

With Filestack, you can pair a workflow with a webhook and receive the job results as Webhooks are asynchronous.

Thus, you can provide a better user experience with this event asynchronous. For example, you can create custom error messages when any part of your app fails.

How to upload and process files with Filestack?

When you use forward slashes, processing tasks can be chained together in the same URL by separating them. Here all the tasks follow the rule of TASK=option: value. Note that option: value pairs are always comma separated. 

Here, our uploaded file has the following URL:

https://cdn.filestackcontent.com/pdn7PhZdT02GoYZCVYeF

Next, add and resize the task to the URL:

https://cdn.filestackcontent.com/resize=width:300/pdn7PhZdT02GoYZCVYeF

You then have the freedom to chain together as many tasks as you like, assuming their types logically follow. Next, the task in the URL, separated by a forwarding slash, executes in order. 

Next, let’s add more tasks to our image: sepia (with parameters) and polaroid like below:

https://cdn.filestackcontent.com/resize=width:300/sepia=tone:80/polaroid/pdn7PhZdT02GoYZCVYeF

Click here for photographs used in the tutorial and to learn more.

Transformation sources

Processing requests can be executed either by a Filestack Handle, a Filestack Storage Alias, or a Public URL. 

Filestack Handle

You will receive a unique URL pointing to Filestack CDN when you upload any file. Basically, the handle is the unique identifier of the file in the Filestack system. You can use it when you interact with the Processing Engine:

https://cdn.filestackcontent.com/resize=width:400/HANDLE

Filestack Storage Alias

Filestack storage alias is also a premium feature that suits files not uploaded through Filestack. Additionally, you can use it with any of our supported cloud storage providers. 

https://cdn.filestackcontent.com/API-KEY/resize=width:400/src://STORAGE_ALIAS

Public URL

You can use a public URL, but to use external URLs with the Processing Engine, you might prepend your tasks with an API key:

https://cdn.filestackcontent.com/API-KEY/resize=width:400/URL

For further information regarding tasks and their parameters, use the Processing API References.

That’s all!

Are you ready to boost your uploading and transformation app with Filestack?

In short, Filestack Transformation API applies immediate transformations to any image at any URL in an intuitive and easy-to-integrate way. Thus, that ensures that images are adjusted and corrected the moment users upload them.

All in all, to start transforming millions of images without adding or maintaining any extra infrastructure, sign up with Filestack now.