Force user to crop/upload an image to a certain size? Preferably using filepicker

I have users uploading images using filepicker, but I want them to have to upload an image of a certain size (and crop if the image is too big). I could cut it myself, but then it won't look good. Ideally, the user would crop it themselves.

I've tried this page: https://www.filepicker.com/documentation/file-ingestion/widgets/pick?v=v2 and I've tried various options but nothing seems to work quite well.

data-fp-image-min doesn't prevent users from uploading smaller images. data-fp-crop-force along with data-fp-crop-max and data-fp-crop-min doesn't do the trick either.

I'm open to using other image uploading libraries, but I like using filepicker. Seems like this is something other people would have run into.

I'm using rails btw.

Solution

From the docs:

data-fp-image-min - Images smaller than the specified dimensions will be upscaled to the minimum size.

So it doesn't really prevent users from uploading smaller images.

data-fp-crop-max and data-fp-crop-min specifies the maximum and minimum dimensions of the crop area so it won't give you specific dimensions.

I would recommend you to:

Set data-fp-crop-ratio - Specify the crop area height to width ratio. User will be able to adjust the crop area for each photo with desired ratio.
Set data-fp-crop-force="true" - User could not skip cropping image.
Then resize image to specific height or width.

This will result, you will always get the image with the desired dimensions.

Example for 150 x 200 image output: Html widget:

<input type="filepicker" 
 data-fp-crop-ratio="3/4" 
 data-fp-crop-force="true" 
 mimetype="image/*" 
 onchange="window.upload(event)"
 data-fp-apikey="APUGwDkkSvqNr9Y3KD4tAz" />

Javascript:

window.upload = function(event){
    console.log(JSON.stringify(event.fpfile));
    var listElem = document.createElement("li");
    var image = document.createElement("img");
    /*
        set w=150 (width) conversion option
        so all images would be 150x200
        and crop_first option to make sure the image is cropped 
        before any other conversion parameters are executed.
    */

    image.setAttribute('src', event.fpfile.url + '&w=150&crop_first=true');
    listElem.appendChild(image);
    document.getElementById('results').appendChild(listElem);
};

Here is working solution: http://jsfiddle.net/krystiangw/9o9ebddL/