Try uploading images without a 16/9 aspect ratio in the first uploader, or not non-square in the second one.
Take a look at the "About the demo" section in the README file for info about the following code boxes.
<div class="file-uploader2" data-filetype="img" data-max_filesize="5MB"
data-uploader_legend="true"
data-uploader_legend_text="Aspect ratio demo (16:9)" data-img_min_w="800"
data-img_aspect_ratio="16/9" data-values="[{
"id": "789",
"name": "16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg",
"src": "test-files/16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg",
"wi": 1600,
"he": 900,
"size": 222121
}]"></div>
<div class="file-uploader2" data-filetype="img" data-max_filesize="5MB"
data-uploader_legend="true"
data-uploader_legend_text="Aspect ratio demo (1:1)" data-img_min_w="800"
data-img_min_h="800" data-img_aspect_ratio="1/1"></div>import FileUploader from '../../js/file-uploader.js';
// use this if you prefer the all-in-one es6 file:
// import FileUploader from '/dist/FileUploader.esm.min.js';
import fupl_strings_en from '../../js/i18n/en.js';
FileUploader({
// selector: default value is used
// css: `/demo/css/fileuploader.css` is already linked to the page
options: {
uploader_url: './demo-assets/server-side-demo-response.json',
debug: true, // show a console.log of parsed options
// needed for GitHub Pages, but the POST method (the default)
// is the best option in most cases
ajax_method: 'GET'
},
local_strs: fupl_strings_en
});<fieldset class="fupl-wrapper fupl-type-img fupl-has-legend"
data-has-values="true">
<legend class="fupl-legend">Aspect ratio demo (16:9)</legend>
<div class="file-uploader2 fupl" data-filetype="img" data-max_filesize="5MB"
data-uploader_legend="true"
data-uploader_legend_text="Aspect ratio demo (16:9)" data-img_min_w="800"
data-img_aspect_ratio="16/9" data-values="[{
"id": "789",
"name": "16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg",
"src": "test-files/16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg",
"wi": 1600,
"he": 900,
"size": 222121
}]">
<div class="fupl-result">
<div class="fupl-item" data-id="789">
<div class="fupl-remove"><button type="button"
class="close fupl-remove-trigger" aria-label="Remove this file"
title="Remove this file"><span aria-hidden="true">×</span></button>
</div><img alt="Immagine caricata" class="img-fluid fupl-img"
src="test-files/16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg">
<div class="fupl-file-info">
<div class="text-truncate fupl-file-name"
title="16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg">
16-9-img-martha-dominguez-de-gouveia-747676-unsplash.jpg</div>
<div class="fupl-file-size">1600×900<span class="fupl-unit">px</span>
– 217<span class="fupl-unit">KB</span></div>
<div class="fupl-extra-fields"></div>
</div>
</div>
</div>
<div class="fupl-panel">
<div class="fupl-button"><label
class="btn btn-outline-primary btn-sm"><input type="file"
accept="image/png,image/jpeg,image/pjpeg,image/gif,image/webp,.png,.jpg,.jpeg,.pjpg,.pjpeg,.gif,.webp">Select
an image</label>
<div class="fupl-dd-text">…or drag it here</div>
</div>
<div class="fupl-info-text">(<strong>JPEG</strong>, <strong>PNG</strong>,
<strong>GIF</strong> or <strong>WEBP</strong> images - max
<strong>5<span class="fupl-unit">MB</span></strong> - width not less
than <strong>800px</strong>, image width/height ratio must be exactly
<strong>16:9</strong>)<div>Optimize your images before uploading. <a
href="https://squoosh.app/" target="_blank"
rel="noopener noreferrer">Squoosh</a> is a great (and free) tool for
doing this.</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="fupl-wrapper fupl-type-img fupl-has-legend"
data-has-values="false">
<legend class="fupl-legend">Aspect ratio demo (1:1)</legend>
<div class="file-uploader2 fupl" data-filetype="img" data-max_filesize="5MB"
data-uploader_legend="true"
data-uploader_legend_text="Aspect ratio demo (1:1)" data-img_min_w="800"
data-img_min_h="800" data-img_aspect_ratio="1/1">
<div class="fupl-result">
<div class="fupl-result-empty text-muted small font-italic">No image
present</div>
</div>
<div class="fupl-panel">
<div class="fupl-button"><label
class="btn btn-outline-primary btn-sm"><input type="file"
accept="image/png,image/jpeg,image/pjpeg,image/gif,image/webp,.png,.jpg,.jpeg,.pjpg,.pjpeg,.gif,.webp">Select
an image</label>
<div class="fupl-dd-text">…or drag it here</div>
</div>
<div class="fupl-info-text">(<strong>JPEG</strong>, <strong>PNG</strong>,
<strong>GIF</strong> or <strong>WEBP</strong> images - max
<strong>5<span class="fupl-unit">MB</span></strong> - width and height
not less than <strong>800px</strong>, image width/height ratio must be
exactly <strong>1:1</strong>)<div>Optimize your images before uploading.
<a href="https://squoosh.app/" target="_blank"
rel="noopener noreferrer">Squoosh</a> is a great (and free) tool for
doing this.</div>
</div>
</div>
</div>
</fieldset>(Same showed in console. The key of the uploader obj is the varname string)
{
"file": {
"_mode": "\"single\"",
"_type": "\"img\"",
"_vers": "\"3.4.3\"",
"accept": "[\"image/png\",\"image/jpeg\",\"image/pjpeg\",\"image/gif\",\"image/webp\",\".png\",\".jpg\",\".jpeg\",\".pjpg\",\".pjpeg\",\".gif\",\".webp\"]",
"ajax_method": "\"GET\"",
"alternative_loading_func": "null",
"aspect_ratio_accuracy": "100",
"custom_info_text": "null",
"debug": "true",
"delete_varname": "\"elimina_file[]\"",
"disable_submit": "false",
"disabled": "false",
"element": "{}",
"element_dragover_class": "\"fupl-is-dragover\"",
"extra_fields": "null",
"fancybox": "false",
"fancybox_anchor_markup": "\"<a class=\\\"fupl-url\\\" data-fancybox=\\\"fupl-gallery\\\"></a>\"",
"fancybox_callback_func": "null",
"filetype": "\"img\"",
"fupl_alert_btn_class": "\"btn btn-secondary\"",
"fupl_alert_template": "\"<div class=\\\"fupl-alert-overlay\\\">\\n <div class=\\\"fupl-alert\\\">\\n <div class=\\\"fupl-alert-header\\\">Error</div>\\n <div class=\\\"fupl-alert-body\\\"></div>\\n <div class=\\\"fupl-alert-footer\\\">\\n <button type=\\\"button\\\" class=\\\"fupl-alert-btn btn btn-secondary\\\">OK</button>\\n </div>\\n </div>\\n </div>\"",
"help_text": "null",
"img_aspect_ratio": "\"1:1\"",
"img_aspect_ratio_parsed": "1",
"img_h": "null",
"img_max_h": "null",
"img_max_w": "null",
"img_min_h": "\"800\"",
"img_min_w": "\"800\"",
"img_w": "null",
"info_text_join_string": "\" - \"",
"info_text_wrap_string": "[\"(\",\")\"]",
"init_callback": "null",
"input_label_class": "\"btn btn-outline-primary btn-sm\"",
"instance_dd_text": "{}",
"instance_info_text": "{}",
"instance_input": "{}",
"instance_label": "{}",
"instance_result_wrapper": "{}",
"locales": "\"it-IT\"",
"max_filesize": "{\"maxbytes\":5242880,\"feedback_size\":\"5<span class=\\\"fupl-unit\\\">MB</span>\"}",
"multiple": "false",
"registered_extra_field_varname": "null",
"required": "false",
"show_info_text": "true",
"show_optimize_info": "true",
"sortable": "false",
"sortable_icon": "\"<div title=\\\"Drag to change order\\\"></div>\"",
"sortable_varname": "\"fupl_order\"",
"template_alternative_loading_element": "\"<div class=\\\"spinner-grow text-primary\\\" role=\\\"status\\\"><span class=\\\"sr-only\\\">Loading...</span></div\"",
"template_doc_item_multiple": "null",
"template_doc_item_single": "\"<div class=\\\"fupl-item\\\"><div class=\\\"fupl-doc-wrapper\\\"><div class=\\\"fupl-remove\\\"></div><div class=\\\"fupl-doc text-truncate\\\"><a class=\\\"text-truncate fupl-file-name fupl-url\\\" draggable=\\\"false\\\"></a></div></div><div class=\\\"small ml-1 text-nowrap fupl-file-size\\\"></div><div class=\\\"fupl-extra-fields\\\"></div><div class=\\\"fupl-sortable-icon\\\"></div></div>\"",
"template_empty_doc": "\"<div class=\\\"fupl-result-empty text-muted small font-italic\\\">No file present</div>\"",
"template_empty_img": "\"<div class=\\\"fupl-result-empty text-muted small font-italic\\\">No image present</div>\"",
"template_img_item_multiple": "\"<div class=\\\"fupl-item\\\"><div class=\\\"fupl-remove\\\"></div><div class=\\\"fupl-img-wrapper\\\"><img alt=\\\"Immagine caricata\\\" class=\\\"img-fluid fupl-img\\\" draggable=\\\"false\\\"></div><div class=\\\"fupl-file-info\\\"><div class=\\\"text-truncate fupl-file-name\\\"></div><div class=\\\"fupl-file-size\\\"></div></div><div class=\\\"fupl-extra-fields\\\"></div><div class=\\\"fupl-sortable-icon\\\"></div></div>\"",
"template_img_item_single": "\"<div class=\\\"fupl-item\\\"><div class=\\\"fupl-remove\\\"></div><img alt=\\\"Immagine caricata\\\" class=\\\"img-fluid fupl-img\\\"><div class=\\\"fupl-file-info\\\"><div class=\\\"text-truncate fupl-file-name\\\"></div><div class=\\\"fupl-file-size\\\"></div><div class=\\\"fupl-extra-fields\\\"></div></div></div>\"",
"template_loading_element": "\"<div class=\\\"fupl-loading\\\"><progress class=\\\"fupl-progress\\\" max=100 value=0></progress></div>\"",
"template_main": "\"<div class=\\\"fupl-result\\\"></div><div class=\\\"fupl-panel\\\"><div class=\\\"fupl-button\\\"><label><input type=\\\"file\\\"></label><div class=\\\"fupl-dd-text\\\"></div></div><div class=\\\"fupl-info-text\\\"></div></div>\"",
"template_remove_btn": "\"<button type=\\\"button\\\" class=\\\"close fupl-remove-trigger\\\" aria-label=\\\"Remove this file\\\" title=\\\"Remove this file\\\"><span aria-hidden=\\\"true\\\">×</span></button>\"",
"upload_complete_callback": "null",
"upload_start_callback": "null",
"uploader_legend": "true",
"uploader_legend_class": "null",
"uploader_legend_text": "\"Aspect ratio demo (1:1)\"",
"uploader_url": "\"./demo-assets/server-side-demo-response.json\"",
"values": "[]",
"varname": "\"file\"",
"wrapper": "{}",
"wrapper_extra_class": "null"
}
}