Is there a way to specify a minimum width or weight for image to upload field ?

By: fab Cor | Asked: 09/07/2022
ForumsCategory: General questionsIs there a way to specify a minimum width or weight for image to upload field ?
fab Cor asked 2 years ago

Hello,  I can see that there is a setting for a max size for the upload field. But is there a way to set a min width in pixel or a min size in mb for this field ? Thank you  

2 Answers
Victor Font answered 2 years ago
Formidable Pro uses the dropzone.js drag and drop JavaScript libraries as the foundation of its file upload field. While you can configure additional settings if you know JavaScript, there are no settings in the library for minimum sizes. See the dropzone.js configuration-options page:
fab Cor replied 2 years ago

thank you

fab Cor answered 2 years ago

Any hint in getting this through javascript ?  I've tried to go that way but of course I only got the size of the preview image and not of the original image.  How do I access the original file ?  Here is my code: // add click listener to dropzonesdocument.querySelectorAll('.frm_dropzone').forEach(dropzone => { dropzone.addEventListener('click', () => { // set listener to check if image is uploaded const interval = setInterval(() => { const image = dropzone.querySelector('.dz-image img'); if (image) { console.log('image :>> ', image); // get image size const img = new Image(); img.src = image.src; console.log(img.width, img.height); clearInterval(interval); } }, 1000); });});

Victor Font replied 2 years ago

When you upload an image using dropzone.js, the image is uploaded immediately and Formidable displays a thumbnail on the screen. You are reading the thumbnail values because that's all that available to the browser. The original full size image is already on the server. To access any details about the full size image, you have create a custom Ajax call that executes after the image is uploaded.

If you examine the upload field's HTML source code in your browser, you see that every time an image is uploaded a new form input is create with details about the image. This is the input field that was created when I uploaded a test pdf:

<input name="item_meta[1179][]" type="hidden" value="1153" data-frmfile="1179">

The input field value is the WordPress ID of the image that was created when the file was uploaded and inserted into the wp_posts table. You have to use that value to retrieve any information from the full size image from the server using Ajax. The image URL is in the wp_posts guid field. That's what you need to retrieve the image. Every uploaded file will have its own input field wrapped in several layers of div. Each field's parent div hasClass("dz-preview")

Hope this helps.

fab Cor replied 2 years ago

This is great, thank you very much !
Here is some working code in case it can help someone...
I use the rest api to fetch the attachment properties (url, width, height... there are plenty).
// add click listener to dropzones
document.querySelectorAll(".frm_dropzone").forEach((dropzone) => {
dropzone.addEventListener("click", () => {
const warning = dropzone.querySelector(".warning");
// if warning exists
if (warning) {
// remove warning
// set listener to check if image is uploaded
const interval = setInterval(async () => {
// get previous input field
const input = dropzone.previousElementSibling;
let attachmentId = input.value;
if (attachmentId) {
let domain = window.location.origin; // eventually hostname
let url = `${domain}/wp-json/wp/v2/media/${attachmentId}`;
let res = await fetch(url);
let media = await res.json();
let width = media.media_details.width;
if (width < 800) {
// add text warning for size too small to frm_dropzone
Image too small (${width} px de large).
}, 500);

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community