by Haziqa
In this blog post, we will discuss simple but important FileSpin and File Picker usage scenarios like uploading files, receiving asset events, accessing & managing metadata, and delivering images, videos and documents via CDN. We will provide a technical guide for managers and developers to accomplish their goals using FileSpin and File Picker.
What Can You Do With FileSpin?
FileSpin enables clients to upload, modify or process digital media artifacts. Let’s examine six prominent FileSpin workflow scenarios in detail.
1. Upload a File From External Website With File Picker
Providing file uploads for users is a very common use case for many websites. Users can avail unlimited file uploads from external websites using File Picker.
Let’s explore File Picker in detail.
Understanding File Picker
File Picker is a web widget tool from FileSpin.io that allows users to choose and upload files either directly from their computers or Cloud accounts like Google Drive, Dropbox, OneDrive, and more. File Picker manages image and video files in any standard and raw format using a set of Picker APIs like initPicker, showPicker, hidePicker, resetPicker, update, and delete. Picker Events inform the users about the state of the file upload. Picker UI extends support for multiple languages.
After a client attempts uploading a file, two basic events are triggered using JavaScript (FileSpin.js). The upload process begins with a start event where the user selects a file. Whereas the upload completion is notified by a complete event. In case of a successful upload, a file ID is generated and retrieved. However, a file upload can fail due to the following reasons:
- Attempting to upload a file that is not authorized by the website.
- Assigning incorrect upload key to the Picker.
- Error in the network or connectivity issues.
Picker API can start uploading files in two steps.
- Add filespin.js script before the HTML body closing tag.
<script type="text/javascript"
src="https://app.filespin.io/fileapp/filespin.js">
</script>
- After acquiring the Upload Key associated with your FileSpin account, use initPicker from Picker API to initialize File Picker and start uploading files.
FileSpin.initPicker({
uploadKey: "INSERT_YOUR_UPLOAD_KEY"
});
File Picker UI Example
Let’s upload a sample image file from the user’s device using File Picker UI that is embedded in the browser. The first step is to initialize the File Picker UI that opens an upload dialog box. The user can select one or multiple files from their device and click on the “Upload” button. If the upload completes without any interruption, a success message is displayed.
2. Receiving Asset Events Using Webhooks
Once files have been uploaded, FileSpin automatically creates various associated conversions and metadata to simplify asset management such as indexing the file metadata, creating image and video conversions for CDN delivery. At each step, you can integrate your backend applications using FileSpin Webhooks.
What are Webhooks?
Webhooks are a callback mechanism that allows web application backends to receive information from FileSpin service. In FileSpin, Webhooks are designed to send callbacks for events such as file upload, video transformation, data update, etc. Users can activate various webhooks depending upon the requirements by logging into their FileSpin accounts. For a complete list of file events, refer to File Events documentation.
Webhook Callback Data Format
FileSpin sends the event data to the connected application as a JSON payload using standard HTTP. The payload contains comprehensive information about the event. For all the details checkout Common File Data Format.
3. Retrieving Latest Asset Data Using Data API
At various times during the life cycle of an asset, business applications will need to access an Asset programmatically. For example, providing a download of a HD video to a paying customer. In these scenarios, FileSin Data API can be used to fetch an Asset’s data. This can include file conversions or any custom data associated with the Asset. The Asset ID assigned by FileSpin and the respective API key are the two essential parameters to retrieve file data. Replace them with your appropriate Asset ID and API key values. Here it is in all its simplicity:
curl -H "X-FileSpin-Api-Key:API_KEY" https://app.filespin.io/api/v1/data/FILE_ID
4. Delivering On-Demand Images with dynamic sizing
One of the many features of FileSpin includes transforming and delivering image files on-the-go. Our platform provides image conversions like snipping, resizing, trimming, rotating, object detection, and more using URL parameters. Consider the following as base URL for requesting image conversions:
https://cdn.filespin.io/api/v1/conversion/{FILE_ID}?{PARAMETERS}
We can replace the PARAMETERS with our desired action. Let’s discuss some of the image transformations available in FileSpin.io.
Image Resize:
Provide a width and height and FileSpin will automatically deliver an image using this size as bounding box while maintaining the aspect ratio.
resize=width,height
 |
 |
 |
| resize=150,150 | resize=200,200 | resize=300,300 |
Change Image Background Color:
Using FileSpin, the background color of a transparent PNG picture can be filled. The URL parameter for color is “bgcolor” which has to be assigned a 6 character HEX code (like f00000). The transformation can be written as:
bgcolor=color
and with resize added:
resize=width,height&bgcolor=color
Image Quality:
FileSpin allows the users to specify the image quality using an integer value between the range of 1 to 100. The quality value of 90 is set by default. The smaller quality value corresponds to a smaller image size.
quality=integer
 |
 |
| resize=400,400&quality=90 | resize=400,400&quality=50 |
Image Format:
To set the format or the type of image to be returned, FileSpin offers a “format” keyword. If not explicitly stated, the default image format will be webp for supported browsers.
format=type
Resized image delivered in PNG format
format=png&resize=300,300
For a complete list of URL parameters, refer to our On-demand Images documentation.
5. Video Streaming using FileSpin CDN
FileSpin.io enables standard video streaming via secure and optimized FileSpin CDN that must be used to avail the custom video utilities. FileSpin.io supports two video players i.e. JW Player and Video JS. Refer to our standard video streaming documentation to learn more about setting up the video player of your choice. FileSpin.io also supports adaptive bitrate streaming (HLS). Refer to our documentation for a sample HLS streaming setup of both video players.
In both cases, the video URL must be accurate. It is formed by FILE ID, FILE KEY, and optional SECURITY_PARAMS (if delivering videos securely). The URL format is given below:
https://videocdn.filespin.io/api/v1/video/FILE_ID/FILE_KEY[?SECURITY_PARAMS]
FileSpin.io also allows signed URL and downloadable URL for video transcodes. Signed URL enhances the security of the video URL by signing the URL with the user’s FileSpin API key and ACCESS_ID, and setting a URL expiry time. The downloadable URL adds a “delivery” URL parameter to the video URL, allowing the browser to download the video transcode to the user’s device.
6. Delivering Secure Downloadable Files Using get_link API
Get link API is designed to obtain downloadable file links for pdf, doc, and xls files that can be provided to the users in a secure downloadable format on a webpage. To use this API, URL query parameters such as FILE_ID, FILE_KEY, EXPIRY, ACCESS_ID, and DEIVERY_MODE are required. DELIVERY_MODE can either be “display” or “download”.
To download or display a single file, HTTP GET REQUEST mentioned below can be used that returns a file link. Replace URL parameters with your values.
GET https://app.filespin.io/api/v1/files/get_link/{FILE_ID}?key={FILE_KEY}&expiry={SECONDS}&delivery={DELIVERY_MODE}&accessId={ACCESS_ID}
For multiple files, use the POST request body to send multiple File IDs as a list. The output JSON returns multiple file links in response.
POST https://app.filespin.io/api/v1/files/get_link?key={FILE_KEY}&expiry={SECONDS}&delivery={DELIVERY_MODE}&accessId={ACCESS_ID}
Checkout our comprehensive Developer documentation for all the available APIs, code examples and more .
FileSpin.io — Your One-Stop Shop For Digital Asset Management
FileSpin.io is a B2B SaaS for highly secure cloud-based Digital Asset Management. Founded in 2012, the major solutions provided by FileSpin.io include managing digital documents, transforming images on the go, translating video contexts, advanced ML-based image processing, and delivering data on the cloud with high-performance CDN.
FileSpin.io is a step towards agile and reliable cloud-based Digital Asset Management. Businesses using digital media assets for everyday activities such as marketing/advertising firms, the online retail industry, startups and many more can benefit for FileSpin solutions.
FileSpin.io has a user-friendly interface that is coupled with a range of solutions. It offers a smooth and flexible working structure with APIs and Webhooks designed to perform multiple tasks, tailored to customer needs.
