Magento 2 - How to add or insert PDF file in a CMS page?

Question

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.

Answer 1

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

2. 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://inchoo.net/magento-2/how-to-create-a-basic-module-in-magento-2/). 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à :)

• Dhaduk Mitesh: A very easy solution for pdf uploader in the Magento 2 editor. @Renaud
• Sarfaraj Sipai: I did the same but not get any responce.
• Jason Diehl: Running 2.2.4 and this doesn't work. Module installs fine, but when loading the Insert Media screen it's just blank.
• Nagaraju Kasa: We have followed the same steps but pdf has been uploaded with image tag? how do we change the format like anchor tag?
• fudu: Thanks for explanation and example code, you are awesome mate :)