End of support for Box File Picker UI Element

Published in

Box Developer Blog

3 min readMar 15, 2024

Life moves forward, whether certain features stay behind or vanish into digital oblivion altogether. [Sigh] We’d like to announce that Box will end support the File Picker UI Element. At this time, customers will be able to use their existing applications with the File Picker UI Element with no impact, but will not receive new features, updates, or bug fixes.

As we look back on the evolution of Box, it’s incredible to see how File Picker has supported multiple users, enhancing innovation and collaboration. However, it’s time to say goodbye and… move forward to an uplifted and more secure solution! 🎉

The Content Picker

If you’re still using the old File Picker, we have a great alternative for you. Let me get you acquainted with the Box Content Picker UI Element! ✨

The Box Content Picker UI Element allows developers to add support for selecting files and folders from Box in their desktop or mobile web application. The library fetches information about a specified folder through the Box API and renders the content in a folder view. Users can select files or folders and this content information is then passed to another part of the application.

You can easily migrate to this solution and enjoy:

enhanced security: Content Picker uses the OAuth 2.0,
improved user experience: modern UI look and feel, better accessibility, responsiveness,
detailed documentation page,
new and upcoming Box features,
more frequent code updates and bug fixes.

You can include Box UI Elements to your project either through NPM or the Box CDN. Check out a simple code snippet featuring the Content Picker in file selection mode:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Box File Selection</title>
    <link
      rel="stylesheet"
      href="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/picker.css"
    />
  </head>
  <body>
    <div class="container" style="height:600px"></div>
    <script src="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/picker.js"></script>
    <script>
      const folderId = "FOLDER_ID";
      const accessToken = "ACCESS_TOKEN";
      <!-- This is a new Content Picker, the file selection type -->
      const filePicker = new Box.FilePicker();
      filePicker.show(folderId, accessToken, {
        container: ".container"
      });
    </script>
  </body>
</html>

Some of the interesting view options associated to the Content Picker are:

File selection,

const filePicker = new Box.FilePicker();

// Show the file picker
filePicker.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
    container: '.container',
    chooseButtonLabel: 'Select'
});

Folder selection,

const folderPicker = new Box.FolderPicker();

// Show the folder picker
folderPicker.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
    container: '.container'
});

File selection with file preview,

const filePicker = new Box.FilePicker();
const preview = new Box.ContentPreview();

// Attach event listener for when the choose button is pressed
filePicker.addListener('choose', function(items) {
    // If no files were selected then just return
    if (items.length === 0) {
        return;
    }
    
    // If some files were selected, show their preview
    preview.show(items[0].id, configData.ACCESS_TOKEN, {
        container: '.container',
        collection: items.map(function(item) {
            return item.id;
        })
    });
});

// Show the file picker
filePicker.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
    container: '.container'
});

File Selection as a popup.

const { FilePicker } = Box;
const filePicker = new FilePicker({
    container: '.picker'
});

filePicker.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
    container: '.picker',
    modal: {
        buttonLabel: 'File Picker'
    }
});

There are also options like defaultView (recents or files) or sortBy (name or date). Additionally, there are multiple customisation for user actions available like canCreateNewFolder, canUpload, canSetShareAccess or maxSelectable.

Other Box UI Elements

The Content Picker is one of many Box UI Elements available. Check out my other articles on how to include them in your project.

Box UI Elements with Vue 3

Frontend development is currently pretty diverse in terms of frameworks and libraries. Although React is pretty common…

medium.com

Box UI Elements with Angular

In my previous post, I explored the integration of Box UI Elements with Vue 3. Now let’s take a look at integrating…

medium.com

In case of any questions related to migration, visit the Box Developer Community for support and knowledge sharing.

Follow for more tutorials and Box Platform updates!

Cheers!