Apostrophe CMS: How to Access Uploaded Files in Widgets

Question

I would like to build a video widget which when selected opens up the file manager dialog so the user can select a local video which the user has previously uploaded. Is there an example of this somewhere I can study? The image widget comes to mind, however, the it contains many features and I just require a simple file chooser.

Answer 1

I studied this SO question and figured out the following:

1. Create the local-video widget at lib/modules/local-video-widgets

2. Create the index.js file:

   module.exports = {
     extend: 'apostrophe-widgets',
     name: 'local-video',
     label: 'Local Video',
     addFields: [
       {
           name: 'filename',
           label: 'File',
           type: 'singleton',
           widgetType: 'apostrophe-files',
           options: {limit:1},
           required: true
       },
       {
           name: 'poster',
           label: 'Poster',
           type: 'singleton',
           widgetType: 'apostrophe-images',
           options: {limit:1},
           contextualOnly: true
       }        
     ],
   };
   

3. Create the view in lib/modules/local-video-widgets/views/widget.html:

   {% set vidFile = data.widget.filename.items[0]._pieces[0].attachment or null %}
   {% set vidPoster = data.widget.poster.items[0]._pieces[0].item.attachment or null %}
   
   <div class="video-wrapper">
       {% if vidPoster %}
           <video class="playRepeatVideo" id="highZoomVid"  width=100% controls controlsList="nodownload" poster="{{ apos.attachments.url(vidPoster) }}"> 
       {% else %}
           <video class="playRepeatVideo" id="highZoomVid"  width=100% controls controlsList="nodownload">
       {% endif %}
               <source src="{{ apos.attachments.url(vidFile) }}" type='video/mp4' > 
               <button id="play">&gt;</button>
               <button type="button" class="btn btn-primary">Primary</button>
           </video>     
   </div>
   

4. Register the widget in app.js:

   modules: { 'local-video-widgets':{} }

The user is now able to browse for a video file and video poster image from the local file system as desired. However, I need to customize the file chooser modal dialogs.