Create frontend component for External File Provider

[aembler]

Create frontend component for External File Provider

Background

concrete5 v9 already has configurable file uploaders in the file chooser component. These are passed in via PHP configuration to our file picker. Currently there's only one, which is file upload.

In order to get this task done, you'll need to modify a few different things. You'll need to modify the concrete5 core to add a new External file provider file chooser plugin, you'll need to update bedrock in order to add a new vue component that can search these external file providers, and you'll need to create a BrandCentral Connector add-on that will enable this API searching, enable this external plugin, etc...

Goal of this Task

Here's what our file picker looks like (wireframe, not actual design).

Here's the File Upload file uploader link selected.

When selecting File Upload here you're actually selecting the assets/cms/components/file-manager/Chooser/FileUpload.vue component found in bedrock. This is passed in dynamically from Concrete\Core\File\Component\Chooser\DefaultConfiguration. It is the Concrete\Core\File\Component\Chooser\Option\FileUploadOption. It is always added the configuration, and this configuration is passed to the component.

Let's add a ExternalFileProviderOption class at the same level as FileUploadOption. This can optionally be activated by a custom package. (In this case, it'll be activated in the configuration by the BrandCentral connector package.) This external file provider uploader takes a name, and API configuration parameters. It adds a new link to the list:

This will then activate a new component on the righthand side, ExternalFileProvider.vue, when clicked:

This plugin will have some basic ability to list the types of files the provider supports, and provide a search bar. Searching will hit an API route on the client site, which will then call the external file provider's API in whatever way it chooses. That way the ExternalFileProvider.vue plugin doesn't need to know how to query the shutterstock API, for example.

Searching files looks like this:

Once a file is selected for import and the import button is clicked, we show all versions of the file that exist. This example is taken directly from BrandCentral.

When a file is imported, it is imported into the root level of the file manager, or the user's home folder (this functionality is coming in version 9, if it's not available in the version you're building this functionality for, ignore this part, just upload the file into the root folder.)

[aembler]

This is looking very good. A little more to do but great job so far.