A Simple Guide To Quickly Adding File Uploads To Your App With Filestack

Do you need to give your users the ability to upload files in your application? Are you looking for a simple and quick way to dramatically improve the user experience for file uploading, allowing users to not only upload directly from their hard drive but also integrated with the most popular social networks like Facebook or Instagram, commonly used storage solutions like Dropbox or Google Drive, and stock image providers like Unsplash? If so, Filestack is the ultimate solution for you!

In  this post, we will take a look at what Filestack can do to make file uploading work for your users in the best possible ways and how easy it is for you to set up in less than an hour.

Why is file upload important?

File uploads are essential for user productivity and many business services and applications, such as content management systems, healthcare portals, insurance websites, and messaging applications. Especially in this day and age of remote and distanced working, it is increasingly critical to ensure the security and ease of file uploads in order to provide the best user experience as well as protect against malicious actors.

For example, consider community-driven platforms such as social media websites and apps, where content is primarily user-generated. In these applications it is crucial to be able to manage the large numbers of uploads that users will be producing.

Another example would be for businesses that use internal collaboration systems for their employees. In this case, employees often need to support the uploading, sharing, and downloading of files. The easier the upload system is to use, the less training and help the employees will need to accomplish their work throughout the day, saving time and resources.

In all instances, files that are uploaded need to be analyzed for potential viruses or other malicious programs. So the method through which files are uploaded is extremely important!

What makes Filestack special?

Filestack provides users an “all-in-one” experience for uploading files anywhere and easily with a 99.99% success rate. Utilizing their powerful yet simple-to-use API, uploads, URL ingestion, and device integration are all made fast and easy. With as little as two lines of code, you can dramatically improve the look and performance of your file uploader, using the same upload technology that the internet giants use without the struggle of having to maintain it.

In a nutshell, here are some of the standout features of Filestack:

• Filestack provides a beautiful and customizable file uploader UI that make a file upload from any source painless and intuitive.
• The UI allows your users to upload files using drag and drop, copy and paste, or searching the computer’s hard drive.
• Users can connect to a multitude of popular services such as Facebook, Instagram, Google Drive, Dropbox, and more, to upload files directly.
• Users can also connect to their device cameras to instantly upload photos, videos, and audio files.
• Custom connections and integrations can also be created to broaden your users’ options even more.
• Once the file is selected, Filestack automatically generates a preview for the user to review.
• Filestack’s advanced infrastructure uploads files as much as almost four times faster than standard interfaces.

How to add file uploads to your app!

Filestack’s documentation is extensive yet easy to navigate, understand, and implement. Here, we will give a brief rundown of how easy it is to get started.

Sign up for an account

You can start with a free plan to try it out, which allows 500 uploads, 1GB of storage, and 1GB of bandwidth per month. From there, pricing plans range from $59 to $359 per month.

Create an application and API keys

Once your account is created, access your Developer portal and create an application. Each application is given a public and a secret API key, each of which is used to authenticate and authorize operations on your resources. Each application has configuration settings that apply only to it, allowing you to assign specific settings for each of your use cases.

Set up the File Picker

Start by including the JavaScript SDK UMD module in your code:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fstatic.filestackapi.com%2Ffilestack-js%2F3.x.x%2Ffilestack.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Configure the client with your API key:

const client = filestack.init(YOUR_API_KEY);
client.picker().open();

That’s it! It’s that simple! Of course, there are a variety of configurations you can add to your setup, but the default settings are quick and easy. For further information you can check out the documentation here.

Using the SDK with different languages

Filestack has client-side and server side SDKs, so you can use your language and application of choice. Choose from client-side apps such as JavaScript, React, Angular, Adaptive, and Swift, as well as server side languages such as Python, Ruby, Ruby on Rails, Go, PHP, and Java. More information can be found here.

Try Filestack in your next project

As you can see, it’s obvious why Filestack is the #1 developer service for file uploads. Not only is it the best service available, but Filestack will upgrade your user experience, security, and more, all in a quick, affordable, and easy to set up solution. While we can not recommend it enough, only you can decide what will work best for you and your projects, so be sure to check it out here next time you are working on a project that requires file uploads.