Custom field interface for data entry

Questions and Answers
1
System Information
  • Strapi Version: 4.0.2
  • Operating System: Docker
  • Database: MySQL
  • Node Version: 16
  • NPM Version: n/a
  • Yarn Version: classic

Hello all,

I’m using Strapi in the backend of a bigger application, to provide CMS functionality.

Unfortunately, I need to allow users to upload videos into a video transcoding pipeline, so that the resulting HLS video can be streamed instead of downloaded. To do this, I’ve built a plugin that essentially allows browsing of an AWS dynamoDB table via an external API I have built. It also allows uploading of mp4 video files to an AWS S3 bucket to begin the transcoding process.

However, I also need to be able to allow users to select a video stream to be associated with a given CMS content type (let’s call it VideoArticle for the sake of explanation). With Strapi 3, I was able to create a “custom field” of sorts, that was simply a MySQL text field by another name, “videostream”. I could then update my VideoArticle model to have a field that referenced “videostream” via the config. I could then use strapi.registerField() to associate “videostream” with a custom component where a user could select a given video stream. However, in Strapi 4, this functionality seems to have disappeared.

Is there some other option available for adding a custom component as the displayed interface for a field? As far as custom fields go, I’m not trying to do anything super complicated, I just want to be able to allow the user to pick one of the uploaded streams from a list and have that populate a hidden text input or whatever with its ID, to be stored as plain text in the DB.

I notice the old Color Picker tutorials/example for this sort of thing have not been updated to work with Strapi 4, so I’m really concerned I’m going to have to rollback to Strapi 3 again in order to do what I want.

Any help is greatly appreciated!

2

Responding to my own question, I’ve just discovered the following within register(app):

app.addFields({ type: "videostream", Component: VideoStream });

This appears to have worked but I will continue to investigate and update here with my findings in case it helps others.

3

So now I seem to have a fully functioning plugin for both the video stream upload and selection, however if I update the schema for my VideoArticle Content Type, it never creates the correct storage field inside the corresponding MySQL table.

How do I update the schema and recreate the MySQL table from it?

1 Like