{"id":28276,"date":"2022-07-11T08:58:27","date_gmt":"2022-07-11T08:58:27","guid":{"rendered":"http:\/\/generate-a-watermarked-multi-paged-pdf"},"modified":"2023-10-11T15:26:13","modified_gmt":"2023-10-11T22:26:13","slug":"generate-a-watermarked-multi-paged-pdf","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-a-watermarked-multi-paged-pdf\/","title":{"rendered":"Generate a Watermarked Multi-Paged PDF"},"content":{"rendered":"

Introduction<\/h2>\n

One of the ways to present your work is to create a portfolio. In this article, we will create a PDF portfolio with your branding from photos you upload to Cloudinary with a specific tag for instance \u201cWedding\u201d.<\/p>\n

Let\u2019s get started.<\/p>\n

PHPSandbox and Github<\/h2>\n

The final project can be viewed on PHPSandbox<\/a> and the entire source code is available on my Github<\/a> repository.<\/p>\n

Prerequisites<\/h2>\n

Using Cloudinary in your Laravel projects is pretty straightforward. However, for you to be able to easily follow along, you need to have a good command of your terminal, Git, and entry knowledge of PHP specifically with the Laravel framework.<\/p>\n

Getting Started<\/h2>\n

Being that Laravel is a PHP Framework, we will need Composer. Like any modern PHP framework, Laravel uses Composer to manage its dependencies. Before, we can start ensure you have Composer installed on your machine. Follow step 1 below to install Composer and PHP.<\/p>\n

    \n
  1. Install Composer<\/a> and PHP<\/a> on<\/li>\n<\/ol>\n

    your development or production machine.<\/p>\n

      \n
    1. \n

      Install Laravel<\/p>\n<\/li>\n

    2. \n

      Via Composer:<\/p>\n<\/li>\n<\/ol>\n

      composer create-project --prefer-dist laravel\/laravel cloudinary-branded-pdf<\/code><\/p>\n

        \n
      1. Via Laravel Installer<\/li>\n<\/ol>\n

        composer global require laravel\/installer<\/code><\/p>\n

        laravel new cloudinary-branded-pdf<\/code><\/p>\n

          \n
        1. In step 2 above we have installed the Laravel Installer and used it to scaffold a new application in the<\/li>\n<\/ol>\n

          folder cloudinary-branded-pdf<\/code>. With Laravel installed, we should be able to start and test the server ensuring<\/p>\n

          everything is okay. Change the directory to the project folder and run the local development server by typing the<\/p>\n

          following commands:<\/p>\n

          cd cloudinary-branded-pdf<\/code><\/p>\n

          php artisan serve<\/code><\/p>\n

          The Laravel project is now up and running. When you open http:\/\/localhost:8000<\/code> on your computer, you should see the<\/p>\n

          image below:<\/p>\n

          \"Laravel<\/p>\n

          Setting up Cloudinary\u2019s Laravel SDK<\/h2>\n

          We will be using Cloudinary to generate multi-paged PDFs from images we will tag and upload. We will also perform the<\/p>\n

          overlay transformation to add a watermark to each of the pages. Sounds fun, we will start by creating a<\/p>\n

          free Cloudinary<\/a> account.<\/p>\n

            \n
          1. Sign up for a free Cloudinary account then navigate to the Console page and take note of your Cloud name, API Key and<\/li>\n<\/ol>\n

            API Secret.<\/p>\n

            \"Cloudinary<\/p>\n

              \n
            1. Install Cloudinary\u2019s Laravel SDK<\/a>:<\/li>\n<\/ol>\n

              composer require cloudinary-labs\/cloudinary-laravel<\/code><\/p>\n

              Note<\/strong>: Please ensure you follow all the steps in the #Installation section. Publish the configuration file and add<\/p>\n

              the Cloudinary credentials you noted in Step 1 to the .env<\/code> file.<\/p>\n

              \nCLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY\n\nCLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET\n\nCLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME\n\n<\/code><\/pre>\n
              Generating a Watermarked Multi-paged PDF<\/h2>\n
              We will use Cloudinary\u2019s Upload API with the multi<\/code> method which will take the images we upload, apply transformations and convert them to a PDF document.<\/p>\n
              Multiple File Upload with Livewire<\/h2>\n
              To generate a PDF document we will need a user interface, we will use the Laravel package Livewire to build this.<\/p>\n
                \n
              1. Install Livewire Package by running the following command in your Laravel project:<\/li>\n<\/ol>\n
                composer require livewire\/livewire<\/code><\/p>\n
                  \n
                1. Include Livewire scripts and styles on every page that will be using Livewire. In our case welcome.blade.php<\/code>:<\/li>\n<\/ol>\n
                  \n...\n\n@livewireStyles\n\n<\/head<\/span>><\/span>\n\n<body<\/span>><\/span>\n\n...\n\n  \n\n@livewireScripts\n\n<\/body<\/span>><\/span>\n\n<\/html<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                    \n
                  1. We will then create a Livewire Component to handle our image uploads:<\/li>\n<\/ol>\n
                    php artisan make:livewire MultipleFileUpload<\/code><\/p>\n
                    This will create two files, first app\/Http\/Livewire\/MultipleFileUpload.php<\/code> and the other one<\/p>\n
                    in resources\/views\/livewire\/multiple-file-upload.blade.php<\/code><\/p>\n
                    Now you can use this component anywhere in your Laravel project using the following snippet:<\/p>\n
                    <livewire:multiple-file-upload\/><\/code><\/p>\n
                    or<\/p>\n
                    @livewire('multiple-file-upload')<\/code><\/p>\n
                      \n
                    1. Open resources\/views\/welcome.blade.php<\/code> and add the following code within the <body><\/body><\/code> tags as shown below:<\/li>\n<\/ol>\n
                      \n  \n\n<body<\/span> class<\/span>=\"antialiased\"<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n@livewire('multiple-file-upload')\n\n<\/div<\/span>><\/span>\n\n<\/body<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                      This includes the Livewire component we created earlier in our welcome.blade.php<\/code>.<\/p>\n
                      Note:<\/strong> Please ensure you go through the Livewire documentation<\/a>,<\/p>\n
                      to learn how to install and set it up.<\/p>\n
                        \n
                      1. Open the file resources\/views\/livewire\/multiple-file-upload.blade.php<\/code> and populate it with the following code:<\/li>\n<\/ol>\n
                        \n  \n\n<form<\/span> class<\/span>=\"mb-5\"<\/span>  wire:submit.prevent<\/span>=\"uploadImages\"<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"form-group row mt-5 mb-3\"<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-5\"<\/span>><\/span>\n\n<input<\/span> id<\/span>=\"watermark\"<\/span>  type<\/span>=\"file\"<\/span>  class<\/span>=\"form-control @error('watermark') is-invalid @enderror\"<\/span>\n\nplaceholder<\/span>=\"Choose files...\"<\/span>  wire:model<\/span>=\"watermark\"<\/span>><\/span>\n\n<label<\/span> class<\/span>=\"input-group-text\"<\/span>  for<\/span>=\"media\"<\/span>><\/span>\n\nChoose watermark...\n\n<\/label<\/span>><\/span>\n\n@error('watermark')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group mb-3\"<\/span>><\/span>\n\n<span<\/span> class<\/span>=\"input-group-text\"<\/span>  id<\/span>=\"basic-addon1\"<\/span>><\/span>#<\/span<\/span>><\/span>\n\n<input<\/span> class<\/span>=\"form-control @error('tag') is-invalid @enderror\"<\/span>  placeholder<\/span>=\"Portfolio Tag\"<\/span>\n\naria-label<\/span>=\"Portfolio Tag\"<\/span>\n\naria-describedby<\/span>=\"basic-addon1\"<\/span>  wire:model<\/span>=\"tag\"<\/span>><\/span>\n\n@error('tag')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\n\n<input<\/span> id<\/span>=\"files\"<\/span>  type<\/span>=\"file\"<\/span>  class<\/span>=\"form-control @error('files'|'files.*') is-invalid @enderror\"<\/span>\n\nplaceholder<\/span>=\"Choose files...\"<\/span>  wire:model<\/span>=\"files\"<\/span>  multiple<\/span>><\/span>\n\n<label<\/span> class<\/span>=\"input-group-text\"<\/span>  for<\/span>=\"files\"<\/span>><\/span>\n\nChoose images for portfolio...\n\n<\/label<\/span>><\/span>\n\n@error('files'|'files.*')\n\n<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\n@enderror\n\n<\/div<\/span>><\/span>\n\n<small<\/span> class<\/span>=\"text-muted text-center mt-2\"<\/span>  wire:loading<\/span>  wire:target<\/span>=\"files\"<\/span>><\/span>\n\n{{ __('Uploading') }}\u2026\n\n<\/small<\/span>><\/span>\n\n<small<\/span> class<\/span>=\"text-muted text-center mt-2\"<\/span>  wire:loading<\/span>  wire:target<\/span>=\"watermark\"<\/span>><\/span>\n\n{{ __('Uploading') }}\u2026\n\n<\/small<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"text-center\"<\/span>><\/span>\n\n<button<\/span> type<\/span>=\"submit\"<\/span>  class<\/span>=\"btn btn-sm btn-primary w-25\"<\/span>><\/span>\n\n<i<\/span> class<\/span>=\"fas fa-check mr-1\"<\/span>><\/span><\/i<\/span>><\/span> {{ __('Generate PDF') }}\n\n<i<\/span> class<\/span>=\"spinner-border spinner-border-sm ml-1 mt-1\"<\/span>  wire:loading<\/span>  wire:target<\/span>=\"uploadImages\"<\/span>><\/span><\/i<\/span>><\/span>\n\n<\/button<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/form<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                        This is our Livewire Component view, this basically will display a form with inputs for our watermark, tag, images<\/p>\n
                        files and a button.<\/p>\n
                        \"Cloudinary<\/p>\n
                        You will see the implementation in code shortly.<\/p>\n
                        Implementation in Code<\/h2>\n
                        Open the file app\/Http\/Livewire\/MultipleFileUpload.php<\/code>. Here, we are going to add a method that will handle the<\/p>\n
                        multiple files selected by the user, upload them to Cloudinary and save their public_id<\/code>\u2019s in an array that we will use<\/p>\n
                        later on.<\/p>\n
                        Add the following code to this file.<\/p>\n
                          \n
                        1. First, we use Livewires WithFileUploads<\/code> to help us with file uploads, then create two variables $media<\/code>\n<\/li>\n<\/ol>\n
                          and $optimizedImage<\/code> which is an array that will contain the image URLs we get back from Cloudinary.<\/p>\n
                          \nuse<\/span>  WithFileUploads<\/span>;\n\n  \n\npublic<\/span>  $files  =  [];\n\npublic<\/span>  $watermark;\n\npublic<\/span>  $tag;\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                            \n
                          1. Secondly, we will create the uploadImages<\/code> function which will upload the watermark<\/a> and image files<\/li>\n<\/ol>\n
                            to Cloudinary<\/a>. Cloudinary will apply specific transformations to each one of the images that will make the pages before generating the PDF document.<\/p>\n
                            \npublic<\/span>  function<\/span>  uploadImages<\/span>()<\/span>  <\/span>{\n\n...\n\n}\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                              \n
                            1. Let\u2019s populate our method in step 2 above:<\/li>\n<\/ol>\n
                              \npublic<\/span>  function<\/span>  uploadImages<\/span>()<\/span>  <\/span>{\n\n$this<\/span>->validate([\n\n'files'<\/span>  =>  [\n\n'required'<\/span>,\n\n'max:10240'<\/span>\n\n],\n\n'files.*'<\/span>  =>  'mimes:jpeg,jpg,png'<\/span>,\n\n'watermark'<\/span>  =>  [\n\n'required'<\/span>,\n\n'image'<\/span>,\n\n'mimes:png'<\/span>,\n\n'max:100'<\/span>\n\n],\n\n'tag'<\/span>  =>  [\n\n'required'<\/span>,\n\n'string'<\/span>,\n\n'max:20'<\/span>\n\n],\n\n]);\n\n  \n\n$watermarkPublicId  =  cloudinary()->upload($this<\/span>->watermark->getRealPath(),  [\n\n'folder'<\/span>  =>  'branded-pdf'<\/span>,\n\n'public_id'<\/span>  =>  'watermark'<\/span>,\n\n])->getPublicId();\n\n  \n\nforeach<\/span>  ($this<\/span>->files  as<\/span>  $file)  {\n\ncloudinary()->upload($file->getRealPath(),  [\n\n'folder'<\/span>  =>  'branded-pdf'<\/span>,\n\n'width'<\/span>  =>  '794'<\/span>,\n\n'height'<\/span>  =>  '1123'<\/span>,\n\n'gravity'<\/span>  =>  'auto'<\/span>,\n\n'crop'<\/span>  =>  'fill'<\/span>,\n\n'tags'<\/span>  =>  [\"$this->tag\"<\/span>],\n\n]);\n\n}\n\n  \n\ncloudinary()->uploadApi()->multi($this<\/span>->tag,  [\n\n'transformation'<\/span>  =>  [\n\n'overlay'<\/span>  =>  $watermarkPublicId,\n\n'gravity'<\/span>  =>  'north_east'<\/span>,\n\n'x'<\/span>  =>  0.02<\/span>,\n\n'y'<\/span>  =>  0.02<\/span>,\n\n'crop'<\/span>  =>  'scale'<\/span>,\n\n'flags'<\/span>  =>  'relative'<\/span>,\n\n'width'<\/span>  =>  0.15<\/span>,\n\n'opacity'<\/span>  =>  80<\/span>\n\n],\n\n'format'<\/span>  =>  'pdf'<\/span>,\n\n'notification_url'<\/span>  =>  env('CLOUDINARY_NOTIFICATION_URL'<\/span>)\n\n]);\n\n}\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                              Let\u2019s talk about the code.<\/p>\n