Magento: Allow Other File Types in Wysiwyg Editor

While the Wysiwyg editor built-in to Magento is great, especially not having to install a wysiwyg module for every Magento installation, it lacks in any way to configure it. I am kind of shocked by this, but, that’s just the way it is right now (at least as of 1.4.2.0 currently).

If you want to be able to upload other types of files besides the few limited image types and media types, I’ll walk you through the ‘right’ way to do it, without modifying core code. We are going to make a very simple module with just 2 files. Here’s how you do it:

Configuration File

Create this file: app/code/local/Prattski/WysiwygFiles/etc/config.xml with the following code:

<?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 configuration file will just build off of Magento’s configuration file, adding allowed extensions (the original configuration file is app/code/core/Mage/Cms/etc/config.xml). As you can see, I added pdf as an allowed extension. Just follow the same format for other extensions if you’d like to add more.

Module File

Create the following file: app/etc/modules/Prattski_WysiwygFiles.xml with the following code:

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

This is what enables the module and allows Magento to recognize it’s there and active.

Once that is done, you should see the module listed in System >> Configuration >> Advanced, and it should work immediately. Enjoy!

This entry was posted in Magento. Bookmark the permalink.

30 Responses to Magento: Allow Other File Types in Wysiwyg Editor

  1. Matteo says:

    Hi Josh,
    thanks for your guide, it works for magento 1.9 too. Do you know how to add a pdf preview icon for each file you have uploaded. Actually you just see the pdf file name on an empty frame. Thanks in advance.

  2. Martin says:

    This is a cool mod and it works on CE 1.7.0.2 Just remember to use google chrome to accesss the backend as it doesn’t work in Firefox and IE which is typical.

    Also remember to clear the cache and css and javascript before you try to use it otherwise your mod won’t give you the view you are expecting to see.

    Is there a way of associating a pdf logo in the Media Storage view for a pdf?

  3. TeknoMan says:

    Works! In my module, i added only new extensions that i need:

    (The code did not come through in your comment)

    I’m using Magento EE 1.12.0.2

  4. keenboy says:

    Not working for me 1.7.

  5. victor says:

    Worked like a charm for me in 1.7.0.2 thanks! super easy to implement

  6. Manmeet says:

    Hi, this is working for me. But only one problem. After uploading pdf file from Admin, I am not able to access it from front-end. It’s making wrong URL like this:
    Test Upload

    Please help!!!

  7. Mike says:

    Worked for me in ver 1.7.0.2.

    This is definitely getting added to my to-do list at the beginning of every Magento install. Thanks for the help!

  8. happy_newbee_now says:

    … my fault for trying to skip Magento’s fundamental… but i’m on a crash course…

    anyways, after banging my head on why this great tip wasn’t working on my CE 1.7 install, i finally got it (and this may be useful for those who want to use a different naming than …/Prattski/…)

    if this is where you’ll place your file:
    app/code/local/Custom/WysiwygFiles/etc/config.xml

    Magento will reconstruct the path to the config file using the info you supply in your module file (app/etc/modules/WysiwygFiles.xml). and the main point is that UNDERSCORES GET CONVERTED INTO SLASHES!!!

    so to let Magento pick the config.xml within file Custom/WysiwygFiles you need to tell it by using:
    <Custom_WysiwygFiles>

    </Custom_WysiwygFiles>

    hope that helps
    (got there by reading: http://stackoverflow.com/questions/9337303/magento-does-not-load-module-config-xml)

  9. Nabler says:

    Its not workin in mine, sorry :(

  10. Luc says:

    Hi,

    Thank for the tip.

    However, it is not necessary to repeat the global config, adding only one entry 1 that is enough to allow the download of pdf and it provides a better compatibility updates.

    But it may be useful to disable an existing entry in this case by adding 0

  11. Jack N says:

    This is a brilliant hack Prattski, thanks alot!
    In my case, with Magento 1.6.1.0, there’s only one drawback is that it works for Safari, Chrome, but not for IE (not so surprising), Firefox (shocking!). And I mean the Description and Short Description field, the CMS pages are total fine. The symptom is that when I browse to the pdf file, click on Insert File, the link appear on the “Link URL” field, but when I click on “Insert” button to finish the process, the link disappear! Do you guys have any ideas why this could happen?
    I appreciate any suggestions. Thanks in advance!

  12. Mon Sarun says:

    Thank very much!!

    I find this along time. You help me, Thank Thank Thank.

  13. This tip works perfectly on 1.6, thank you very much for this clever advice ;)

  14. Micheline says:

    Uploading pdf’s works in 1.5 (through images). You can make a link to the pdf-file with the link icon in the tiny editor. Works for me.

    • looking for answer says:

      Hi,
      I am new with Magneto 1.5 and leaning website coding. I didn’t see there is a folder name Prattski, so I create one after app/code/local on and did the rest of coding as above. But it doesn’t work. I can’t see “Prattski_WysiwygFiles” module listed in System >> Configuration >> Advanced. What did I miss?
      Please HELP!!
      Thanks

  15. Stity2010 says:

    I am using CE v1.5.
    Your idea and module looks great but it doesn’t work on v1.5. It allows you to upload PDFs but doesn’t link it. I logged out/ogin, cleared cache, tried your module on new and existing product etc.

    Any ideas? Thanks again for your module.

    • Josh Pratt says:

      There’s plenty good chance it doesn’t work properly in 1.5. I haven’t yet tested it on 1.5+. I’m not sure when I’ll have time to take a look into it.

  16. Matt Park says:

    Thank you! You saved the day with this module :)

  17. Horatiu Taina says:

    Hi Josh!

    That’s quite a cool hint. However, it seems to only work thoroughly for CMS. Can you help with linking to the uploaded PDF for product descriptions?

    The upload seems to work fine when using WYSIWYG editor in product descriptions, but when trying to insert the link to it, the whole thing just doesn’t do anything.

    Thanks in advance,
    HT

  18. thanks. it works in cms page section. but it doesn’t work in category editor. is there anyway we can do same for category section as well.

  19. Joao Amado says:

    Hi! I’m able to upload a pdf, but not without a warning that the file isn’t an image file… When I try to access it trough a link, the browser thinks it’s a PNG… What I’m doing wrong?

    • will says:

      same warning for me, any tips? to be sure you are using the insert image button to upload the pdf’s? this uploads it fine but puts it in an image tag in the markup

  20. BoSua says:

    Hi,

    Thanks for the tip.
    However, how can I enable PDF file upload?

    Thanks

    • Josh Pratt says:

      BoSua – Ok, there is no possible way that you fully read my article if you are asking that question… Try re-reading the article.

      • BoSua says:

        Hello,

        Thanks for reply.
        Maybe I was not clear in my question.
        I just wanted to know how to insert a PDF file into the content area of WYSIWYG that will allow customer to see and download on frontend?

        Thanks

  21. Pingback: Tweets that mention Magento: Allow Other File Types in Wysiwyg Editor | Prattski | Magento & Web Development -- Topsy.com

  22. Loopion says:

    Clever tip! Easy simple and quick! Useful for PDF and Flash files