Apostrophe CMS：如何访问窗口小部件中的上载文件

Question

我想构建一个视频窗口小部件，选中该窗口小部件后会打开文件管理器对话框，以便用户可以选择用户之前上传的本地视频。我可以在哪个地方学习这个例子吗？想到了图像小部件，它包含许多功能，我只需要一个简单的文件选择器。

Answer 1

我研究了这个SO question，并想出了以下内容：

1. 在lib / modules / local-video-widgets上创建本地视频小部件
2. 创建index.js文件：

   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. 在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. 在app.js中注册小部件：

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

用户现在可以根据需要从本地文件系统浏览视频文件和视频海报图像。但是，我需要自定义文件选择器模式对话框。