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
Victor Font answered 2 years ago
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
warning.remove();
}
// 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
dropzone.insertAdjacentHTML(
"beforeend",
`
Image too small (${width} px de large).
`
);
}
clearInterval(interval);
}
}, 500);
});
});
'''
Please login or Register to submit your answer
