READ NOW: The Official Kloudless Guide To API Integrations

Kloudless Blog

Tutorials, case studies and how-tos from our experts

The New and Improved Kloudless File Picker 2.0

We here at Kloudless know the pains of API integrations as well as anyone. Once your developers wade through hundreds of pages of documentation, devote countless hours to writing the code to connect with an API service, and rigorously test all of these connections to ensure they stay sound, they are still left with the task of incorporating this functionality into a user-friendly UI/UX experience. That is exactly why we try our best to go above-and-beyond for our customers and offer them UI Tools that provide an ‘out of the box’ level of functionality for those that build Kloudless into their app.

Our first, and most popular, of these tools is the Kloudless File Picker. An open-source JavaScript library that can be embedded in your application with a single script tag to allow your users to authenticate their preferred cloud storage providers of choice, and then browse and select files and folders from these storage services. Once a user has connected to their desired service(s), they’ll be able to choose what files they want to access, all from within your application.

The File Picker not only allows for users to choose a file — it also supports uploading of files up to 5 GB in size, as well as automatic transfer of files and folders in cloud storage into your application’s object storage service. The File Picker’s authentication dialogs and UI can be entirely white-labeled to conform to the branding of your app.

We continuously update our UI Tools to add functionality and improve workflow, and we’re happy to announce we have added some requested features, as well as overhauled the tool based on customer feedback. Let’s learn about all of the new features that you can take advantage of in our new File Picker 2.0!

What’s New?

The Kloudless File Picker now has the ability to apply custom fonts and colors to pre-defined elements to match your application’s branding. This helps you not only provide your users with a simple interface to handle all of their cloud storage transfer needs, but keeps them securely invested in your application by providing a uniform look and feel to the UI tool while embedded in your app. The custom theming can be applied to replicate the look of your app on both the web and mobile with the new option, custom_style_vars. This simplifies your developers’ jobs by allowing for your app’s own unique custom UI styling without having to fork the entire project.

File Picker Web Auth View
File Picker Mobile Auth View
File Picker Web Transfer View
File Picker Mobile Transfer View

We know that your users aren’t always going to be in front of their computer when they use your app, so the File Picker has been updated to improve mobile responsiveness while using the UI tool on phones and tablets. We’ve also updated the library to provide a clearer HTML and CSS structure, as well as improved consistent naming conventions across the library.

If your application uses a front-end JavaScript framework, such as React or Vue, there are a few small changes to the import path of setGlobalOptions and getGlobalOptions in their respective wrappers. 

Finally, if you have been using the Kloudless File Picker for some time now, we have deprecated the custom_css stylesheet option in favor of the more maintainable theming options above, as well as a handful of methods and variables which reference the tool’s old name. Applications using these older configuration options will continue loading the older File Picker (“File Explorer”) until the Kloudless JS detects compatibility with v2.0, at which point the new version will automatically load without any further changes needed. 

Helping Users Help Themselves

More and more, applications need the ability to prompt users to upload files, images or other data from their computer. These files may then be stored in a backend object storage service, such as Amazon’s S3 or Google Cloud. Transferring these files from a user’s cloud storage can be tricky, however, and generally requires quite a bit of server-side logic. This process is only made more complex when you account for possible errors in the upload, such as transfers being interrupted. 

Thankfully, Kloudless can take these issues away from your developers by handling all of the steps required to ensure your users’ file transfers are successful. We offer various connection options and protocols depending on the upstream storage service, refreshing OAuth tokens, error and rate-limit handling, and even the ability to use multi-part uploads for large files. All of these together make for a much simpler and seamless experience for your app’s end-users.

At the end of the day, our Unified APIs are only as good as the ways your users can take advantage of their functionality. We work very hard to give you the best UI tools, open-source and free of charge, to ensure that your developers can focus on what’s really important: your application’s own unique functionality.

To test out the Kloudless File Picker, head over to the Github repo here.

Published By

David Hallinan

David Hallinan is an Integration Strategist and Head of Content at Kloudless. He enjoys painting, JavaScript, vintage synths, drum machines and forcing his sports allegiances on his children.

View all posts by David Hallinan