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?
In order for Filestack to work on your website you need to first include the Filestack JavaScript Library using the <script> tag and specifying a source.
<script type="text/javascript" src="//api.filestackapi.com/filestack.js"></script>
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.
From there you can call Filestack’s Pick Widget by using the HTML <input> tag with the attribute type=’filepicker’. Our JavaScript code scans the page and when it sees this combination it converts it in the browser on the fly.
Before Filestack
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.
After Filestack
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 aDrag-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
As you can see, the HTML widget provides a quick and easy way for web developers to get started with Filestack, but it can also be a jumping off point for a lot of customization. If you’ve got some experience with JavaScript you can create your own browser UI for the Filestack platform. Our docs provide you a couple of examples for creating widgets after the page loads and creating a larger drag-n-drop pane and positioning it on your page with <div> tags.
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
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.