Easy Way to Allow File Attachment in WYSIWYG in Magento 2

WYSIWYG is an HTML editor for easily adding, editing the content and formatting it. However, for Magento 2 stores, it is always more than just text!

Adding any type of files such as PDF, Doc, Docx, png, zip, etc. on the product page, category page, or CMS block is required in order to optimize the page for better product understanding, improve the shopping process, or add any legal docs.

Hence, I’ve come up with a programmatic solution to allow file attachment in WYSIWYG in Magento 2 admin. Using the solution, enable pdf on WYSIWYG to upload attachments to products or any other file type in Magento 2 store.

Steps to allow file attachment in WYSIWYG in Magento 2:

1. Create di.xml in app/code/[Vendor]/[Module]/etc and add the following code:

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        
    <type name="Magento\Cms\Model\Wysiwyg\Images\Storage">
                
        <plugin disabled="false" name="Vendor_Module_Plugin_Magento_Cms_Model_Wysiwyg_Images_Storage"
                sortOrder="10" type="Vendor\Module\Plugin\Magento\Cms\Model\Wysiwyg\Images\Storage"/>
            
    </type>
    <type name="Magento\Cms\Model\Wysiwyg\Images\Storage">
    <arguments>
        <argument name="extensions" xsi:type="array">           
            <item name="allowed" xsi:type="array">
                <item name="pdf" xsi:type="string">application/pdf</item>
                <item name="doc" xsi:type="string">application/msword</item>
                <item name="csv" xsi:type="string">text/plain</item>
            </item>
            <item name="image_allowed" xsi:type="array">               
                <item name="pdf" xsi:type="string">application/pdf</item>
                <item name="doc" xsi:type="string">application/msword</item>
                <item name="csv" xsi:type="string">text/plain</item>
            </item>
        </argument>
    </arguments>
    </type>
</config>

1. Create Storage.php in app/code/[Vendor]/[Module]/Plugin/Magento/Cms/Model/Wysiwyg/Images and add the following code:

<?php
namespace Vendor\Module\Plugin\Magento\Cms\Model\Wysiwyg\Images;
class Storage
{
    public function afterGetAllowedExtensions(\Magento\Cms\Model\Wysiwyg\Images\Storage $subject, $result)
    {
        $defaultFiletypes = array('doc', 'csv','pdf');
        return array_merge($result, $defaultFiletypes);
    }
}

That’s it.

Do share the solution with the fellow Magento developers via social media.

Thanks.