index.html

﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FilePond Plugin Pdf Preview Demo</title>
    <link href="https://unpkg.com/filepond/dist/filepond.css"
      rel="stylesheet" />
    <link href="./dist/filepond-plugin-pdf-preview.css" rel="stylesheet" />
    <style>
      .demo {
        text-align: center;
        font-family: Helvetica;
        margin: 4em auto 0;
        width: 450px;
      }
      a {
        color: dodgerblue;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="demo">
      <h3>Pdf Preview plugin for FilePond demo </h3>
      <input type="file" multiple="multiple"/>
        <!-- 
        you can add some extra atributes if you want override the defaults:
        data-pdf-preview-height="320"  
        data-pdf-component-extra-params="toolbar=0&navpanes=0&scrollbar=0&view=fitH"
        The 'data-' attributes are optional, set they in the tag element
        or in the javascript if you want override the defaults,
        if not omit it 
        -->
      <a href="https://github.com/Adri-Glez/filepond-plugin-pdf-preview">
        Return to forked the source code
      </a>
    </div>

    <script src="./dist/filepond-plugin-pdf-preview.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

    <script>
        // Register the plugin with FilePond
        FilePond.registerPlugin(FilePondPluginPdfPreview);

        // Get a reference to the file input element
        const inputElement = document.querySelector('input[type="file"]');

        // Create the FilePond instance
        const pond = FilePond.create(inputElement);

        //you can specify the params to this plugin if you want override 
        //the defaults, you could do it here in the javascript  
        //or with the 'data-' atributes in the html tag
        /*const pond = FilePond.create(inputElement,{
             allowPdfPreview: true,
             pdfPreviewHeight: 320,
             pdfComponentExtraParams: 'toolbar=0&view=fit&page=1'            
          });         
        // */
    </script>
  </body>
</html>