Kloudless Blog

Kloudless Unified APIs enable you to code once and integrate many

When choosing the right cloud storage service to integrate into your application, you must first decide which type of storage best fit your needs. Does your app simply require the ability to share internal documents among coworkers, or are you looking to store thousands of user-uploaded pictures and high-quality video files?

While both of these needs can be accomplished with any of our Storage API integrations, you can make your life much easier by deciding on which form of cloud storage is right for you. All cloud storage is not created equal, and many factors can influence which type of storage you wish to go with. Thankfully, here at Kloudless, we have added the ability to use S3 and S3-compatible object storage alongside our already expansive file storage capabilities.

In the following article, I will take you through a brief overview of object storage and why you may want to choose to use it as a means of storing your application’s data, before going into a step-by-step tutorial on integrating the Kloudless File Picker into your application. No matter the S3-compatible service you use, this article will help you to get your users uploading files to the location of your choice through our easy-to-use embeddable UI tool.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

Why object storage?

When many of us think of cloud storage, we envision the entirely UI-based services that we use to share files at work or keep our documents safe in the cloud. Dropbox, Box and Google Drive are a few examples of these services that most of us are probably familiar with, and we refer to them as file storage. Generally, we use them to sync files across multiple computers, collaborate and share documents, or possibly we just house our personal files on these platforms when we run out of room on our computer’s hard drive.

File storage is usually enough for a single user or non-data-driven company to store and share documents, as it conventionally uses a folder structure hierarchy that requires a very specific set of paths for locating files. This folder structure makes it very easy to compartmentalize files or documents in a way that can be easily remembered, but when the data that we house grows substantially, this means of pathing to retrieve files can be cumbersome and unmanageable. Imagine having to click through hundreds of folders every time you needed to retrieve a file, and you start to understand why when the amount of files grow substantially, another method may be a preferred course of action.

Object storage, on the other hand, allows for an entirely different means of storing files that isn’t burdened by a prior knowledge of the physical location of the specific file. Object storage uses something called flat address space to allow for the infinite scalability of storage, and principally uses an HTTP-based REST API to access the data contained therein. Object storage also allows for extensive levels of metadata to be associated with each object, permitting us to store whatever relevant data we need coupled with our files. While file storage generally only allows us to store a finite amount of associated data for each file, object storage will store massive amounts of associated metadata for each file, allowing us to keep track of almost any associated attribute a file may have.

Retrieval of these files is done by assigning each object stored in our flat address space with a unique identifier, or more commonly referred to as an ID, and then requesting the file directly. Object storage allows us to store a large amount of files or data in an object storage service provider without worrying about an overly complicated folder structure that we have to navigate every time we need to access or retrieve a file. Essentially, we have something in place to locate our files for us, as opposed to having to continuously click on sub-folders to locate our files ourselves.

Since Amazon Web Services’ S3 (simple storage service) became the de-facto provider of cloud-based object storage, other services such as Google Cloud Services and Microsoft’s Azure have become S3-compliant. No matter the service you choose, if it’s compatible with S3, Kloudless can help you and your users to access and save files in object storage. To read more in depth about the benefits of integrating file storage VS object storage, please check out this article from our Kloudless CTO, Vinod Chandru.

So, let’s say your codebases’ needs call for object storage. How can Kloudless help your users to upload their files to your Amazon’s S3 or an S3-compatible service?

Enter File Picker

The Kloudless File Picker is a JavaScript library that allows your users to browse and select files and folders in a self-contained UI and retrieve their metadata, as well as save files and return their metadata after saving. You can find it, as well as it’s full documentation, here.

To begin, go sign up on the Kloudless website and create your first app. Give it any name and description you want and then press Save. Once you’ve set up your app and returned to the developer dashboard, click on App Details and copy your App ID to your clipboard. We’ll be using that in a minute to instantiate and authenticate the Kloudless File Picker.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

To configure an upload location to your S3-compatible service, click on File Picker under UI Tools in the Dev Portal and click on Add Upload Location.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

This will bring up the File Picker interface and allow you to select the tile for Amazon S3 Compatible.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

Proceed to enter your object storage service’s URL (ex: https://s3.amazonaws.com), access key and secret key and press Submit.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

Once authenticated, you can then select the location that you wish to have File Picker upload your end users’ files to.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

After that, all you need to get started is our script tag.

While testing, be sure to serve the page via a web server, as pages opened via the file URI scheme (file://) cannot receive messages sent via postMessage due to security concerns.

Once the script tag to our CDN is embedded in your HTML, a global Kloudless object will be exposed, allowing access to the Kloudless.explorer method. We will instantiate it with your Kloudless App ID, as well as a key-value pair of computer : true to allow for the upload of locally stored files and another of copy_to_upload_location: true to ensure that files are uploaded to your previously set location.

The File Picker can then be configured to choose local files and save them with the built-in method of choosify(). This method is then passed the DOM element you wish to trigger the action (in this case, a button), which generates an iframe allowing UI access to the Kloudless File Picker when clicked upon.

Let’s say we have the following button with a unique ID to feed to our explorer object…

We then simply pass the DOM element to our choosify() method.

The Chooser method will prompt a user to select files from either their computer or from a linked storage service of their own, and in turn retrieve a block of JSON containing metadata about the files or folder after a successful upload to your previously set upload location.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

Kloudless also provides a DropZone powered drag-and-drop interface if you would prefer that functionality. Both the Explorer and Dropzone come with success and cancel event handlers for retrieving your metadata via a callback function.

The metadata of your user’s upload will be returned with all associated object data, as well as the ancestry of the file or folder itself, including the direct parent folder.

, Storing user-uploaded content on S3-compatible services with Kloudless’ File Picker

Congratulations! Your users can now upload files to your S3-compatible service!

Let’s Get To Storing!

The Kloudless File Picker also offers many more configuration options like custom CSS, the ability to create folders and more. Our GitHub repo offers extensive docs and examples to get you started with whatever functionality you need to customize the File Picker to your object storage needs. To read more about how one educational technology company saved themselves valuable time and money every year by integrating the Kloudless File Picker into their app, check out this article.

Now that your application has been configured to allow end users to upload files to the location of your choice in your preferred S3-compatible storage service, feel free to let us know about your unique use case for the Kloudless File Picker. We are always interested in hearing about our user’s implementations and how we can go about making the File Picker and our Storage API as a whole better suited to your needs!

For any additional questions about the Kloudless Storage API or the Kloudless File Picker, feel free to email us at hello@kloudless.com

Categories: