#### Single File

    <div class="profile-image">

        <!-- // The classic file input element we'll enhance
        // to a file pond, we moved the configuration
        // properties to JavaScript -->

        <div class="img-uploader-content">
            <input type="file" class="filepond"
                name="filepond" accept="image/png, image/jpeg, image/gif"/>
        </div>

    </div>

    /**
     * ==================
     * Single File Upload
     * ==================
    */

    // We register the plugins required to do
    // image previews, cropping, resizing, etc.
    FilePond.registerPlugin(
      FilePondPluginFileValidateType,
      FilePondPluginImageExifOrientation,
      FilePondPluginImagePreview,
      FilePondPluginImageCrop,
      FilePondPluginImageResize,
      FilePondPluginImageTransform,
    //   FilePondPluginImageEdit
    );

    // Select the file input and use
    // create() to turn it into a pond
    FilePond.create(
      document.querySelector('.filepond'),
      {
        // labelIdle: `<span class="no-image-placeholder"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span> <p class="drag-para">Drag & Drop your picture or <span class="filepond--label-action" tabindex="0">Browse</span></p>`,
        imagePreviewHeight: 170,
        imageCropAspectRatio: '1:1',
        imageResizeTargetWidth: 200,
        imageResizeTargetHeight: 200,
        stylePanelLayout: 'compact circle',
        styleLoadIndicatorPosition: 'center bottom',
        styleProgressIndicatorPosition: 'right bottom',
        styleButtonRemoveItemPosition: 'left bottom',
        styleButtonProcessItemPosition: 'right bottom',
        files: [
            {
                // the server file reference
                source: './assets/img/drag-1.jpeg',

                // set type to limbo to tell FilePond this is a temp file
                options: {
                    type: 'image/png',
                },
            },
        ],
      }
    );

#### Multiple File

    <div class="multiple-file-upload">
        <input type="file"
            class="filepond file-upload-multiple"
            name="filepond"
            multiple
            data-allow-reorder="true"
            data-max-file-size="3MB"
            data-max-files="3">
    </div>

    /**
     * ====================
     * Multiple File Upload
     * ====================
    */

    // We want to preview images, so we register
    // the Image Preview plugin, We also register
    // exif orientation (to correct mobile image
    // orientation) and size validation, to prevent
    // large files from being added
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize,
        // FilePondPluginImageEdit
    );

      // Select the file input and use
      // create() to turn it into a pond
      FilePond.create(
        document.querySelector('.file-upload-multiple')
      );