How to Add PDFs to Files Allowed in Magento Media Library

Magento allows you to add images and links to descriptions, pages and static blocks, or anywhere else the WYSIWYG Editor is available via the media library. Out of the box, Magento only allows you to upload certain image types, namely .jpg, .jpeg, .png or .gif. What if you want to upload a PDF to have it downloadable by your customers? You can add other file types to these allowed in the media library by creating a couple additional files.

This does require access to the file structure in Magento. It is not recommended you ever make any changes to core Magento files. Magento provides a structure for you to add to its core group of files by adding modules and extensions, but you should never change core code.

I found and have successfully used a method for allowing other files into the WYSIWYG editor written by a fellow developer. I do recommend this method adding a simple config file to Magento over editing core files. This method even includes a module that can be turned on and off in the Advanced area of Magento’s backend.

First, let’s create the configuration file. Create a file called config.xml, and place the following code in it.

<?xml version="1.0" encoding="UTF-8"?>
<config>
  <modules>
    <Prattski_WysiwygFiles>
      <version>1.0.0</version>
    </Prattski_WysiwygFiles>
  </modules>
  <adminhtml>
    <cms>
      <browser>
        <extensions>
          <allowed>
            <jpg>1</jpg>
            <jpeg>1</jpeg>
            <png>1</png>
            <gif>1</gif>
            <pdf>1</pdf>
          </allowed>
        </extensions>
      </browser>
    </cms>
  </adminhtml>
</config>

This file allows the 4 files types previously allowed, with the addition of pdfs with the line <pdf>1</pdf>. You can add additional lines if you require additional types of files to be allowed, just follow the same structure with the file extensions.

In your app/code/local, create a folder called Pattski, inside that create a folder called WysiwygFiles, inside that create folder called etc, and place your config.xml file inside the etc folder. Your file structure should be: app/code/local/Prattski/WysiwygFiles/etc/config.xml.

For the module file, create a file called Prattsky_WysiwygFiles.xml and add the following code:

<?xml version="1.0"?>
<config>
  <modules>
    <Prattski_WysiwygFiles>
      <active>true</active>
      <codePool>local</codePool>
    </Prattski_WysiwygFiles>
  </modules>
</config>

Save this file into your app/etc/modules folder. You now have the ability to turn the module on and off via the Magento backend. Go to System/Configuration, click on Advanced under Advanced on the bottom-left, and you will see the module there.

Clear your cache, you are good to go.

To add PDFs to WYSIWYG areas

Once the config file and the module are in place, you can go to any WYSIWYG editor in a description, static block or page and add links to PDFs in your text just as you would a link or image.

For this example, our client is a vitamin and supplement seller who wants to add supplement facts to the description of a product in the form of a PDF that their customers can download and read. While in any WYSIWYG Editor, click on Show/Hide Editor so you are seeing the screen with formatted text and all the editing buttons.

Enter the text you want to use as your link. Highlight it, and click on the Link button.

In the Insert/Edit Link window that pops up, click on the Browse button.

In the Insert Media window, click on the folder you want to place your PDF in on the left, either in the Storage Root or another folder, and click on the Browse Files button.

Browse to your file. If you are not able to see your PDF, check the file types box in the lower right to make sure PDF if listed there as an allowed “Images” type. If PDF is not there, check your work with the instructions above.

Click Open.

Click the Upload Files button to upload the file into the library. Wait for the file to upload, then scroll down. Click on the file you just uploaded and click Insert File.