Allow only adding one file at a time

[pathvine]

Hi @rikschennink,

I want to allow the user to add one file at a time and able to add 10 files maximum. Hence, the options I have is:

const _inputElement = document.querySelector('input[type="file"]');
    _pond = FilePond.create( _inputElement, {
      allowMultiple: false,
      maxFiles: 10,
      imageCropAspectRatio: '1:1',
      maxFileSize: '3MB',
      instantUpload: false,
      acceptedFileTypes: ['image/jpeg'], // Only allow jpeg file type.
      imageResizeTargetWidth: Meteor.settings.public.image.maxWidth,
      imageResizeTargetHeight: Meteor.settings.public.image.maxHeight,
      imageTransformOutputMimeType: 'image/jpeg',
      imageTransformOutputQuality: 100
    });

However, the FilePond wouldn't let me add more files after the first file. The preview of the first photo covers the entire pond area so that the "Drag & Drop your files or Browse" area is hidden. Is there any way to configure the FilePond properly for this purpose? I can remove the photo in the preview queue of the pond upon the addition of each photo, but this seems like not the proper way to achieve this.

[rikschennink]

Hi @pathvine, there's currently no way to limit the amount of files a user can add in a single action. The allowMultiple property toggles FilePond in single or multiple file mode.

What is the use case if I may ask? Why do you want the user to only add a single file at a time?

[pathvine]

I realized that the graphicsMagick performance is unstable when I resize and crop one image to multiple resolutions (sometimes it yields 0 byte files). So I decided to move the resizing and cropping to the client side, but too many photos at once would choke the processing pipeline (later added photos replacing earlier photos) and burden the cpu too much on mobile as well. The simplest solution so far is to allow only one photo addition at a time without messing with async...await. Thanks @rikschennink .

[rikschennink]

@pathvine

but too many photos at once would choke the processing pipeline (later added photos replacing earlier photos) and burden the CPU too much on mobile as well.

Have you tested this? Or is this an assumption? I've tried to optimize the client side image processing done by the Image Transform plugin as best as possible (using web workers), if it's not up to par, it might need further improvement.

What do you mean by:

later added photos replacing earlier photos

[pathvine]

Sorry for the confusion @rikschennink. Not referring to your transformation plugin, I am using another nom package to perform image transformation. As you may recall, I am using FilePond as a file drop area. Since the transformation of FilePond is only done with the built-in upload mechanism, I have to roll my own transformation as well.

[rikschennink]

No problem @pathvine, I'm still not sure why you're not using a custom processing method, that would allow you to send files to a custom upload location but still use fileponds image transform logic.

[pathvine]

@rikschennink. I have tried it before actually, the transformation wasn't applied in the custom .process function in the server block.

[rikschennink]

@pathvine And you had the Image Transform plugin registered? FilePond applies the transforms before sending the file to the upload function.

[pathvine]

Yup the plugins are installed and registered properly. To catch up on your last question of why the process function was not used, I realized that when I did manual uploading through an API endpoint. The transformation of the photos didn't happen, so I decided to do the manual transformation when the photos are added. When I added multiple files at once, the burden of transformation of multiple files was too much. Hence I was looking at adding one file at a time to tone down the transformation effort at each instant.

[rikschennink]

@pathvine I've set up an Image Transform example on CodePen, I use the process method to convert the file object to an image and add it to the page so you can see that the transforms have been applied. https://codepen.io/rikschennink/pen/vRvZPK?editors=1010