Apostrophe CMS：如何在小部件中访问上传的文件

Question

我想构建一个视频小部件，当 selected 打开文件管理器对话框时，用户可以 select 用户之前上传的本地视频。我可以在某个地方学习这方面的例子吗？我想到了图像小部件，但是它包含许多功能，我只需要一个简单的文件选择器。

Answer 1

我研究了这个并得出以下结论：

在 lib/modules/local-video-widgets

创建 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
    }        
  ],
};

在 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>

在app.js中注册小部件：

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

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

Apostrophe CMS：如何在小部件中访问上传的文件

Apostrophe CMS: How to Access Uploaded Files in Widgets

file

html5-video

apostrophe-cms