"filepond making problem with files" Code Answer's

filepond making problem with files[0]

By Hilarious Hawk on Feb 17, 2021

   FilePond.registerPlugin(
      FilePondPluginImageExifOrientation,
      FilePondPluginImagePreview,
      FilePondPluginFileValidateSize,
      FilePondPluginImageCrop,
      FilePondPluginImageResize,
      FilePondPluginFileValidateType
    );

    FilePond.setOptions({
      // allowDrop: false,
      // allowReplace: false,
      status: 4,
      instantUpload: true,
      maxFileSize: '5MB',
      allowImagePreview: true,
      imagePreviewMinHeight: 50,
      imagePreviewMaxHeight: 100,
      imagePreviewMaxFileSize: '5MB',
      imageCropAspectRatio: '1:1',
      // className: 'image-upload',
      server: {
        url: '/images',
        process: {
          url: '/upload',
        },
        revert: '/revert',
        restore: '/restore/',
        load: '/load/',
      },
      files: filepondInitialFiles,
      onremovefile: function(error, file) {
        if (file.serverId) {
          let input = document.createElement('input');
          input.type = 'hidden';
          input.name = 'DeletedFilepondImages';
          input.value = file.serverId;

          uploadForm.appendChild(input);
        }
      },
      onaddfilestart: function(file) {
        console.log(`onaddfilestart`);
        buttonForm.classList.add('filepondUpload');
        buttonForm.setAttribute('disabled', 'true');
      },
      onaddfileprogress(file, progress) {
        console.log(`onaddfileprogress`);
        buttonForm.classList.remove('filepondUpload');
        buttonForm.removeAttribute('disabled');
      },
      onprocessfile: function(file) {
        console.log(`onprocessfile`);
        buttonForm.classList.remove('filepondUpload');
        buttonForm.removeAttribute('disabled');
      },
      onprocessfiles: () => {
        console.log('onprocessfiles');
        buttonForm.classList.remove('filepondUpload');
        buttonForm.removeAttribute('disabled');
      },
    });
    // console.log(fpFiles);
    // get a reference to the input element

    const filepondInput = document.querySelector(
      '#filepondFileUploader input[type="file"]'
    );

    // create a FilePond instance at the input element location
    const filepondObject = FilePond.create(filepondInput, {
      maxFiles: 5,
      allowBrowse: true,
      acceptedFileTypes: ['image/*'],
      files: filepondInitialFiles,
      labelIdle:
        '<div class="image-upload__file-upload-content">Add images</div>',
    });

Source: github.com

Add Comment