فایل پوند

      <div class="filepond-uploader">
          <div class="control">
              <input type="file" class="filepond" name="filepond" multiple
                  data-allow-reorder="true" data-max-file-size="3MB" data-max-files="3">
          </div>
      </div>
      
      //Register Filepond plugin (once)
      FilePond.registerPlugin(
          FilePondPluginImagePreview,
          FilePondPluginImageExifOrientation,
          FilePondPluginFileValidateSize,
          FilePondPluginImageEdit
      );
      
      //Instanciate element
      FilePond.create(
          document.querySelector('.filepond'),
      );
      

      <div class="filepond-uploader is-two-grid">
          <div class="control">
              <input type="file" class="filepond" name="filepond" multiple
                  data-allow-reorder="true" data-max-file-size="3MB" data-max-files="8">
          </div>
      </div>
      
      
      //Instanciate element
      FilePond.create(
          document.querySelector('.filepond-2-grid'),
      );
      

      <div class="filepond-uploader is-three-grid">
          <div class="control">
              <input type="file" class="filepond" name="filepond" multiple
                  data-allow-reorder="true" data-max-file-size="3MB" data-max-files="8">
          </div>
      </div>
      
      
      //Instanciate element
      FilePond.create(
          document.querySelector('.filepond-3-grid'),
      );
      

      <div class="filepond-profile-wrap is-tiny">
          <input type="file" class="profile-filepond-tiny" name="profile_filepond_tiny"
          accept="image/png, image/jpeg, image/gif">
      </div>
      
      <div class="filepond-profile-wrap is-small">
          <input type="file" class="profile-filepond-small" name="profile_filepond_small"
          accept="image/png, image/jpeg, image/gif">
      </div>
      
      <div class="filepond-profile-wrap">
          <input type="file" class="profile-filepond" name="profile_filepond"
          accept="image/png, image/jpeg, image/gif">
      </div>
      
      
      //Example for the bigger one (Refer to assets/js/components.js for the others)
      FilePond.create(
          document.querySelector('.profile-filepond'),
          {
              labelIdle: `<i class="lnil lnil-cloud-upload"></>`,
              imagePreviewHeight: 140,
              imageCropAspectRatio: '1:1',
              imageResizeTargetWidth: 140,
              imageResizeTargetHeight: 140,
              stylePanelLayout: 'compact circle',
              styleLoadIndicatorPosition: 'center bottom',
              styleProgressIndicatorPosition: 'right bottom',
              styleButtonRemoveItemPosition: 'left bottom',
              styleButtonProcessItemPosition: 'right bottom',
          }
      );
      

      <div class="filepond-square-wrap is-tiny">
          <input type="file" class="square-filepond-tiny" name="square_filepond_tiny"
          accept="image/png, image/jpeg, image/gif">
      </div>
      
      <div class="filepond-square-wrap is-small">
          <input type="file" class="square-filepond-small" name="square_filepond_small"
          accept="image/png, image/jpeg, image/gif">
      </div>
      
      <div class="filepond-square-wrap">
          <input type="file" class="square-filepond" name="square_filepond"
          accept="image/png, image/jpeg, image/gif">
      </div>
      
      
      //Example for the bigger one (Refer to assets/js/components.js for the others)
      FilePond.create(
          document.querySelector('.square-filepond'),
          {
              labelIdle: `<i class="lnil lnil-plus"></>`,
              imagePreviewHeight: 140,
              imageCropAspectRatio: '1:1',
              imageResizeTargetWidth: 140,
              imageResizeTargetHeight: 140,
              stylePanelLayout: 'compact circle',
              styleLoadIndicatorPosition: 'center bottom',
              styleProgressIndicatorPosition: 'right bottom',
              styleButtonRemoveItemPosition: 'left bottom',
              styleButtonProcessItemPosition: 'right bottom',
          }
      );