4

Do you have an idea on how to add or insert a PDF file in a CMS page or CMS block in Magento 2?

Correct me if I'm wrong for the question title for this thread.

8

First, you need to add the files inside your project so magento can display them on the back office There is two ways :

  1. The simplier way : just add your file via ftp to media/wysiwyg/[optional_folders]/[your_file.pdf].

OR

  1. Make magento allow pdf files upload on back office. There's two steps :

    • Add pdf to allowed extensions type. With that modification only, the files would upload but with an exception because magento tries to resize the pdf.

    • Override the upload method to resize images only.

You'll do that in a module : (how to create a simple module : https://goo.gl/SeooJy). You'll have to modify these two files :

app/code/[Company]/[Module]/etc/di.xml :

    <?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">
            <arguments>
                <argument name="extensions" xsi:type="array">
                    <item name="allowed" xsi:type="array">
                        <item name="pdf" xsi:type="number">1</item>
                    </item>
                </argument>
            </arguments>
        </type>
        <preference for="Magento\Cms\Model\Wysiwyg\Images\Storage" type="[Company]\[Module]\Model\Cms\Wysiwyg\Images\Storage" />
    </config>

app/code/[Company]/[Module]/Model/Cms/Wysiwyg/Images/Storage.php :

    <?php

    namespace [Company]\[Module]\Model\Cms\Wysiwyg\Images;

    class Storage extends \Magento\Cms\Model\Wysiwyg\Images\Storage
    {
        public function uploadFile($targetPath, $type = null)
        {
            /** @var \Magento\MediaStorage\Model\File\Uploader $uploader */
            $uploader = $this->_uploaderFactory->create(['fileId' => 'image']);
            $allowed = $this->getAllowedExtensions($type);
            if ($allowed) {
                $uploader->setAllowedExtensions($allowed);
            }
            $uploader->setAllowRenameFiles(true);
            $uploader->setFilesDispersion(false);
            $result = $uploader->save($targetPath);

            if (!$result) {
                throw new \Magento\Framework\Exception\LocalizedException(__('We can\'t upload the file right now.'));
            }

            // ACTUAL CHANGE : 
            if (strtolower($uploader->getFileExtension()) !== 'pdf') {
                // create thumbnail
                $this->resizeFile($targetPath . '/' . $uploader->getUploadedFileName(), true);
            }

            $result['cookie'] = [
                'name' => $this->getSession()->getName(),
                'value' => $this->getSession()->getSessionId(),
                'lifetime' => $this->getSession()->getCookieLifetime(),
                'path' => $this->getSession()->getCookiePath(),
                'domain' => $this->getSession()->getCookieDomain(),
            ];

            return $result;
        }
    }

Once that's done, it's pretty straightforward.

Add the pdf just like you would do with any image link : visit the page / block CMS you want -> select some text, click on the Insert/edit links (paper clip icon) -> Click on the little icon Browse next to 'Link Url' field -> if you've chosen solution 1, the files are listed here ; if you've chosen solution 2, click on select files, choose your pdf file and add it.

-> Finally, click on the file and add it to the page / block via Insert File button and voilà :)

  • A very easy solution for pdf uploader in the Magento 2 editor. @Renaud – Dhaduk Mitesh Feb 8 '18 at 6:07
  • I did the same but not get any responce. – Sarfaraj Sipai Feb 26 '18 at 10:55
  • Running 2.2.4 and this doesn't work. Module installs fine, but when loading the Insert Media screen it's just blank. – Jason Diehl Jul 13 '18 at 21:48
  • We have followed the same steps but pdf has been uploaded with image tag? how do we change the format like anchor tag? – Nagaraju K Oct 22 '18 at 13:40
  • Thanks for explanation and example code, you are awesome mate :) – fudu Dec 6 '18 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.