adri-glez / filepond-plugin-pdf-preview Goto Github PK

<setup>
    ...

    // Import FilePond component 
    import vueFilePond, { setOptions } from "vue-filepond";
    // Import FilePond styles
    import "filepond/dist/filepond.min.css";
    // Import FilePond plugins
    import "filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.css";

    // Create filepond 
    const FilePond = vueFilePond(FilePondPluginPdfPreview);
    setOptions({
         allowPdfPreview: true,
         pdfComponentExtraParams: 'toolbar=0&view=fit&page=1'
    });

    ...
</setup>

<style>
    .filepond--item {width: calc(33% - 0.5em);}
</style>

npm ERR! code 128
npm ERR! command failed
npm ERR! command git ls-remote ssh://[email protected]/adriglez/filepond-plugin-pdf-preview.git
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.

<!-- Filepond -->

       <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
       <link
       href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
       rel="stylesheet"
   />
       <link href="https://unpkg.com/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.css" rel="stylesheet">

<style>
       /**
       * FilePond Custom Styles
       */
      .filepond--drop-label {
          color: #4c4e53;
      }

      .filepond--label-action {
          text-decoration-color: #babdc0;
      }

      .filepond--panel-root {
          border-radius: 2em;
          background-color: #edf0f4;
          height: 1em;
      }

      .filepond--item-panel {
          background-color: #595e68;
      }

      .filepond--drip-blob {
          background-color: #7f8a9a;
      }


      /**
       * Page Styles
       */
      html {
          padding:30vh 0 0;
      }

      body {
          max-width: 20em;
          margin: 0 auto;
      }
</style>

       <script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
        <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
        <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
        <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
        <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
        <script src="https://unpkg.com/filepond-plugin-file-rename/dist/filepond-plugin-file-rename.js"></script>
        <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
        <script src="https://unpkg.com/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.js"></script>

<input type="file"
    class="filepond"
    name="filepond"
    multiple
    data-allow-reorder="true"
    data-max-file-size="100MB"
    data-max-files="20"
    credits="false" />

<script>

FilePond.registerPlugin(

	// encodes the file as base64 data
  FilePondPluginFileEncode,

	// validates the size of the file
	FilePondPluginFileValidateSize,

	// corrects mobile image orientation
	FilePondPluginImageExifOrientation,

	// previews dropped images
  FilePondPluginImagePreview,

  // renames
  FilePondPluginFileRename,

  // Validates filetypes
  FilePondPluginFileValidateType,

  // Preview PDFs
  FilePondPluginPdfPreview
);

FilePond.setOptions(
    {
// FIXME Chunked upload are resulting in a HTTP 400 error
//        chunkUploads: true,
//            chunkSize: 50000,
	    	server: {
	    		url: 'http://localhost:8000/fp',
	    		process: '/process/',
	    		patch: '/patch/',
	    		revert: '/revert/',
	    		fetch: '/fetch/?target='
	    	}
    }


);

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

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

</script>