Filepicker IO 如何在上传时指定最小宽度和高度

Question

I want to be able to set a minimum width and height for images uploaded via the FilePicker Upload dialog box (Minimum size: 1200 x 960 pixels).

Ideally there would be an option for this but I cannot seem to find it.

Answer 1

While we don't have a method to limit uploads based on image dimensions, we did add the ability to resize images upon upload in May of 2015.

The follow parameters govern this behavior:

These functions work for local files picked from your computer and images captured using the webcam service.

Image dimensions

{imageDim: [width, height]}

Specify image dimenions. eg : {imageDim: [800, 600]}. Local images will be resized (upscaled or downscaled) to the specified dimensions before uploading. The original height to width ratio is maintained. To resize all images based on the width, set [width, null], eg. [800, null]. For the height set [null, height], eg [null, 600].

Max image dimensions

{imageMax: [width, height]}

Specify maximum image dimenions. eg : {imageMax: [800, 600]}. Images bigger than the specified dimensions will be resized to the max size.

Min image dimensions

{imageMin: [width, height]}

Specify minimum image dimenions. eg : {imageMin: [800, 600]}. Images smaller than the specified dimensions will be upscaled to the minimum size.

Note: client side resizing relies on the dialog being opened to work. If a user utilizes the drop-pane functionality (meaning no modal dialog window opens) to upload their images, their images will not be modified.

Answer 2

Filestack does provide a picker option to set a callback onFileSelected . This is an example from a tutorial on their web site:

function checkImgSize (file) {
  return new Promise(function (resolve, reject) {
    const maxWidth = 1300;
    const maxHeight = 1300;
    const blob = file.originalFile;

    // Get an object URL for the local file
    const url = URL.createObjectURL(blob);

    // Create an image and load the object URL
    const img = new Image();
    img.src = url;

    img.onload = function () {
      URL.revokeObjectURL(url);

      if (this.naturalWidth > maxWidth) {
        reject('File is too wide');
      }

      if (this.naturalHeight > maxHeight) {
        reject('File is too tall');
      }

      // If we made it here then the file was approved
      resolve();
    }
  });
}

const picker = client.picker({ 
  exposeOriginalFile: true,
  onFileSelected: checkImgSize,
});