Filestack’s mission is to provide a powerful, easy to use, end-to-end file management solution for application developers. There’s little doubt that our platform makes it exceptionally easy to upload, store, transform and deliver your application’s images and other files. But to provide true ‘end to end’ simplicity means we also have to make it exceptionally easy to implement.
In this blog post we’re going to look at the easiest way for web developers to integrate Filestack into their website or just take it out for a test drive – our HTML widget.
Two lines of code…
When we say Integrate the original file picker with two lines of code… on the front page of our website, what are we talking about?
This line of code can be placed anywhere on your page, but we recommend the standard practice of placing it just before the <body> tag.
…and allow users to upload files from 20+ cloud sources.
This is what your code probably looks like if you’re asking visitors to upload files.
It produces a boring button that is dependent on your visitors browser.
Your users are only allowed to upload photos and other files if they’re on their local drive. If not, they need to leave your site to download the needed file from another site and start the process all over again. Many customers abandon the process for good if required to go find a file in another site.
This time we’re calling the Filestack JS library and using type=”filepicker” for the <input>. Hardly any more work than the standard practice.
Filestack places the widget on your page and allows you to configure how the button looks regardless of the browsers.
Now your users can upload files from anywhere on the Internet without leaving your site, or the upload workflow.
To make the integration as seamless as possible, our HTML widget comes in different forms, including a Drag-Drop version for a nearly frictionless user experience.
Doing It With Style
You don’t think we expect you to settle for a plain, grey upload dialog box, do you? On paid plans, the Web Dialog box can be customized using CSS just like any other element on your web site. It can be changed on an application-level by linking to a CSS file in your developer portal, or on a per dialog instance from within your picker options.
And to help you match the look and feel of you site, Filestack provides you with a number of pre-made CSS templates to which you can link.
Customizing your own widget
In the next blog post we’ll talk more about customizing file ingestion by making your own uploader.
This is one in a series of blog posts that will provide both an overview of the Filestack platform as well as an introduction to a number of key features that you will no doubt find useful, but might not have known we offered. Check out some of the other posts in this series.
- An Introduction to Filestack
- Building a simple Instagram clone – An introduction to Image Transformations
- Insights and Automation: Using webhooks to run your business
Read More →