How to create a local plugin and register it as a customField in Strapi V4

How can I create a “download” button as a component within a collection in Starpi that initiates the download of a file located at the URL provided in the “url” field when clicked?

No more talking! lets dive into the development. 🤩

    npx create-strapi-app@latest my-project

Step 1: Create a collection “sample” add text filed “url”

at this point you can see there is no custom fields (download button) available in “add another field” menu

Step 2:

Open the “my-project” in VS Code and see the directory structure. look into the src folder, there is no plugin folder! thats okay.

Step 3:

We are going to create a local plugin. Run the following command from the project root.

    npm run strapi generate

Select the following options: ? Strapi Generators plugin — Generate a basic plugin ? Plugin name download ? Choose your preferred language JavaScript

Now you see the project directory,

Wolah! plugin folder is generated and you can see our “download” folder! but thats not all.

Step 4:

Create plugins.js in config folder.

You can now enable your plugin by adding the following in ./config/plugins.js

    module.exports = ({ env }) => ({
        'download': {
            enabled: true,
            resolve: './src/plugins/download'
        }
    });

Now, when you open the Strapi dashboard, you can see the “download” plugin added as a “MenuLink”. However, we need to convert it to a “customField” so that it will be available within the collection named “sample”.

Step 5: VERY IMPORTANT STEP

Lets create a button component. Now its time to play with React.js 🥳

Create DownloadButton.js in the following path.

src/plugins/download/admin/src/components/DownloadButton/DownloadButton.js

Open src/plugins/download/admin/src/index.js and replace register(app). object.

    register(app) {
    
            app.customFields.register({
                name: "download-file",
                pluginId: "download",
                type: "string",
                intlLabel: {
                    id: "download.plugin.label",
                    defaultMessage: "Download File",
                },
                intlDescription: {
                    id: "download.plugin.description",
                    defaultMessage: "Download file from the link in the url Field",
                },
                icon: PluginIcon,
                components: {
                    Input: async() =>
                        import ( /* webpackChunkName: "input-component" */ "./components/DownloadButton/DownloadButton"),
    
                },
                options: {},
            });
        }

Now open src/plugins/download/server/register.js and modify.

    'use strict';
    
    module.exports = ({ strapi }) => {
        strapi.customFields.register({
            name: 'download-file',
            plugin: 'download',
            type: 'string',
        });
    };

Rebuild the project.

yarn build

yarn develop

Step 6:

Now you will be able to see our button component in the custom field section.

Open “Content Manager” and Create a new entry. Give a valid file url like : https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg Click on our custom download button.

Congratulations 🎉 , you have successfully created a local plugin and registered it as a customField.

**One Moment : ** Thank you for taking the time to read my blog. I hope you found it helpful, insightful, or even entertaining. If it made a positive impact on your day or provided you with valuable information, I’d be thrilled to know!

If you enjoyed the content and would like to show your appreciation, you can support me in two ways:

Give it a Clap: Just click on the 👏 button at the end of the article. Each clap is a virtual pat on the back and a way to let me know that you liked the blog.
Buy Me a Coffee: If you’re feeling extra generous and would like to support my work further. To leave a tip, simply click on the “Tip” button, and any amount you’re comfortable with is greatly appreciated. Your contribution will keep me fueled and motivated to create more content in the future.

Your support means a lot to me, and it encourages me to continue sharing my knowledge and experiences. I’m grateful for each and every reader who finds value in what I write. 🙏
❤️ Feeling the love? Give me a tip on Medium!