Create CMS editor component/ widget to upload files

[andreamussap]

Is your feature request related to a problem? Please describe.

Hi guys, in https://axway-open-docs.netlify.app/ project we're looking foward for the ability to upload files, specially script samples (JSON, YAML, SQL etc) via the CMS editor.

The issue today is that, when a CMS contributor (https://axway-open-docs.netlify.app/) needs to upload a file, they have to ask a Technical writer to do it. It would make the work more seamless if the contributor could upload the file themselves while updating the page.

Describe the solution you'd like

Please add a widget to upload files.

Describe alternatives you've considered

We don't have any. The contributors have to contact us, sometimes via email, Teams, or any other channel, and ask to upload the files to them.

[kaltoft]

You can create your own custom editor components.

Feel free to use this snippet. It will create an anchor linking to the url of the file

import React from 'react';

export const RegisterFile = {

  // Internal id of the component
  id: 'file',

  // Visible label
  label: 'File',

  // Fields the user need to fill out when adding an instance of the component
  fields: [
    {
      name: 'src',
      label: 'File',
      widget: 'file',
      media_library: {
        config: {
          multiple: true,
        },
      },
    },
    {
      name: 'title',
      label: 'Link text',
      default: 'Click here to view file',
      widget: 'string',
    },
  ],

  // Pattern to identify a block as being an instance of this component
  pattern: /\[(.*)\]\(undefined\ "File"\)/,

  // Function to extract data elements from the regexp match
  fromBlock(match) {
    return {
      title: match[1],
      src: match[2],
    };
  },

  // Function to create a text block from an instance of this component
  toBlock(obj) {
    return `[${obj.title}](${obj.src} "File")`;
  },

  // Preview output for this component. Can either be a string or a React component
  // (component gives better render performance)
  toPreview(obj) {
    return (
      <File src={obj.src}>{obj.title}</File>
    );
  },

};

export const File = ({ src, children: title }) => <a href={src}>{(title.length > 0 && title !== 'undefined') ? title : 'View file'}</a>;

Then register it in the cms.js

import { RegisterFile } from '../components/editorComponents/RegisterFile';
CMS.registerEditorComponent(RegisterFile);

[andreamussap]

Thank you @kaltoft but I'm not a developer. I wouldn't even know where to star. So I'll keep waiting until someone can implement this.