Filestack is a web service that completely handles file uploads for your app.
Let’s imagine a little web app together. The web app allows people to write reviews for anything they want. The give the review a name, type up their review, upload a photo, and publish it. Saving a name and text to a database is fairly easy, so the trickiest part about this little app is handling those photo uploads. Here’s just a few considerations:
- You’ll need to design a UI. What does the area look like that encourage folks to pick a photo and upload it? What happens when they are ready to upload that photo and interact? You’ll probably want to design that experience.
- You’ll likely want to support drag and drop, how is that going to work?
- You’ll probably want to show upload progress. That’s just good UX.
- A lot of people keep their files in Dropbox or other cloud services these days, can you upload from there?
- What about multiple files? Might make sense to upload three or four images for a review!
- Are you going to restrict sizes? The app should probably just handle that automatically, right?
That’s certainly not a comprehensive list, but I think you can see how every bit of that is a bunch of design and development work. Well, hey, that’s the job, right? It is, but the job is even more so about being smart with your time and money to make your app a success. Being smart here, in my opinion, is seriously looking at Filestack to give you a fantastic uploading experience, while you spend your time on your product vision, not already-solved problems.
With Filestack, as a developer, implementation is beautifully easy:
var client = filestack.init('yourApiKey');
client.pick(pickerOptions).then(function(result) {
console.log(JSON.stringify(result.filesUploaded))
});And you get an incredibly full featured picker like this:
And that is completely configurable, of course. Their documentation is super nice, so figuring out how to do all that is no problem. Want to limit it to 3 files? Sure. Only images? Yep. Allow only particular upload integrations? That’s your choice.
We started this talking about photos. Filestack is particularly good at handling those for you, in part because it means that you can offer a really great UX (upload whatever!) while also making sure you do all the right developer stuff with those photos. Like if a user uploads a 5 MB photo, no problem, you can allow them to drop it, alter it, and then you can serve a resized and optimized version of it.
Similiar stuff exists for video, audio, and other special file types. And don’t let me stop you from checking out all the really fancy stuff, like facial recognition, filtering, collages, and all that.
Serve it from where? Well that’s your call. If you really need to store your files somewhere specific, you can do that. Easier, you can let Filestack be your document store as well as your CDN for delivering the files.
Another thing to think about with this type of development work is maintenance. Rolling your own system means you’re on your own when things change. Browsers evolve. The mobile landscape is ever-changing. API’s change. Third-parties come and go and make life difficult. All of that stuff is abstracted away with Filestack.
With all this happening in JavaScript, Filestack works great with literally any way you’re building a website. And if you have an iOS app as well, don’t worry, they have an SDK for that too!
