fileManager in vueJs

Developing with Concrete
1

Good day everybody,
I’m using vuejs3 for my frontend deployed with npm. So I was wondering if there is a way to “inject” the actual concrete file manager in my frontend?

// this is the file manager I meant:
$alh = $app->make(‘helper/concrete/file_manager’);
$alh->file($inputID, $inputName, $chooseText, $preselectedFile = null, $args = []);
//

One solution we found was to render the file manager on the PHP side, which is also where the Vue script is rendered. And connect from the spa using a mutation-observer + triggers.

But could there be a better, cleaner solution?

I look forward to your opinions and ideas.

Thanks in advance.
JW

2

Interesting question @jwhl, let me do some research and get back to you. :+1:

1 Like
3

There are two parts to the file manager. There is the in-Dashboard backend file manager, which is actually not a Vue JS app at all - it’s a pretty traditional series of PHP pages with backend controllers. There is some light JavaScript but it’s not a component.

By contrast, the frontend file picker component is definitely a Vue JS component. If you want you to integrate the concrete file picker into your custom Vue application I would try something like the following (note: these examples use the user input but the principals are generally the same)

  1. Make sure your custom application uses @concretecms/bedrock as a dependency.
  2. In your custom Vue application, import the component:

import ConcreteUserInput from '@concretecms/bedrock/assets/cms/components/form/ConcreteUserInput';

  1. Within the template of the Vue application, reference the component with its props:

<concrete-user-input choose-text="Select User" v-model="authorId" :css-class="this.invalidAuthor ? 'is-invalid' : null"></concrete-user-input>

You’ll also have to include Bedrock assets in your theme.

1 Like