File Uploading

You can start uploading files within the Filestack API with any of our SDKs or plugins by simply creating a free account on our website, which will provide you with an API Key- allowing you to utilize the free tier of the API (this can later be altered by changing your plan tier to accommodate additional settings by contacting our Account Management team (sales number/email).  

To begin working with the API and familiarizing yourself with it’s features, you can log in to your Developer Portal (by using the login form on our site located here: https://dev.filestack.com/login/) and navigate to the Quick Start section to access our Picker Builder.  In this area you you are able to build out a filestack picker modal by selecting the parameters you would like to use, and the values associated with them- which when hitting the test button- will allow for the custom picker you have created to be generated on the page.

You’ll notice that the code on the page is auto updated based upon what information is added or taken away from your custom picker.  The code shown is our Javascript SDK, which is our most popular implementation of the API that we currently offer.  The Javascript generated on the picker page shows a few key lines of code that allow the API to function properly- namely the following:

  • The first is the script tag that allows pulls in the Filestack Library:
  • <script src="https://static.filestackapi.com/v3/filestack.js"></script>
  • This script dictates what version of the upload API is present on the page- currently this script will pull in the latest version of the JS SDK for use.
  • The second is the client initialization, this is where the API Key comes in:
  • var fsClient = filestack.init('AX0kpdGVrQqquxyNoZSV1z');
  • This line is responsible for initializing the client with your API Key, imparting any of the key’s settings/attributes to the methods that are run after the client is initialized.
  • The third is the pick function, and opening the picker:
  • client.picker(options).open();
  • First we have the picker options, these are a set of parameters that can be imparted onto the picker to change its uploading attributes or user experience- this can range from transformation options, storage options, or uploading configurations.

Once a file has passed through the upload method it will be either stored into the default storage options (Filestack Default S3) or the custom storage option you have set on your Filestack account if you are on one of our paid plans.  To work with this file once it has been uploaded, you will need to inspect the filesUploaded array, each file uploaded will populate this array.  Each file object in the array has multiple values attached to it, including information like it’s filename, mimetype, generated filestack URL of the file, etc.  In the example of examining the first file’s URL- you would use something like the following: console.log(result.filesUploaded[0].url) - this will log the generated Filestack URL of the file into your developer console.  We also have created a short video of us working with our picker builder located here: https://www.youtube.com/watch?v=uwwFTK4OJG4 

Embed Picker

The Filestack modal doesn’t always need to be generated as a window above your page- you can utilize one of our new picker options to set the Filestack modal within your page with the following steps.  First, you will need to make sure you are accurately calling the pick function to properly generate the Filestack Picker.  Second, you will need to make sure that you have added the following two parameters/options to your picker options section, similar to how it is shown below:

const options = {

        displayMode: 'inline',

        container: '#inline',

};

The displayMode: 'inline', parameter/value pair allows for the Filestack Modal window to display in a adaptive display mode that can be embedded into specific HTML elements of your website/application.  In this case, container: '#inline', is the parameter/value pair that identifies the HTML element the picker should be embedded within.  Third, you will need to make sure that the element you have selected has no overlying CSS elements that could potentially cause elements in the picker to be unable to be interacted with.  You can also set open and close buttons for this element, opening it or closing it as you need with something along the following lines:

<HTML>

<button id="open">Open Picker</button>

<button id="close">Close Picker</button>

</HTML>

<JS>

const openBtn = document.getElementById('open');

const closeBtn = document.getElementById('close');

</JS>

Did this answer your question?