Home › Toolset Professional Support › [Resolved] Validation of image field in the user form in toolset
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | - |
- | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 14:00 – 18:00 | 13:00 – 18:00 | - |
Supporter timezone: America/Jamaica (GMT-05:00)
Tagged: Toolset Forms
This topic contains 26 replies, has 2 voices.
Last updated by pramodk-2 3 years, 11 months ago.
Assisted by: Shane.
Hi Team,
In my requirement, there is an image field and not repeated (user fields) created in the edit profile page.
I would need below validation to be performed on the image field before user submits the form.
1. Dimensions of the photo :150 (height) x150 (width).
2. Maximum file size : 5MB.
I have checked the earlier tickets but could not find any code for both validation performed on a single code.
Please suggest me.
hidden link
Thanks.
Hello,
Thank you for getting in touch.
Are you using the media library to upload the images ? Please let me know and we can take it from there.
Thanks,
Shane
Hi Shane,
The images are not uploaded through media library.
These will be added by the customers who does not have access to media library.
Thanks.
Hello,
Thank you for the patience. Given that you have the constraints of 150*150 for your image , I don't see the user being able to upload an image that is larger that 5mb.
However here is the validation code to check if the user has uploaded an image based on your dimensions.
add_action('cred_form_validate', 'validate_image_dimensions',10,2); function validate_image_dimensions($error_fields, $form_data) { $forms = array( 1234 ); // Field data are field values and errors list($fields,$errors)=$error_fields; if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-image']['tmp_name']) ) { $target_max_width = 150; $target_max_height = 150; $check = getimagesize( $_FILES['wpcf-image']['tmp_name'] ); if ( $check !== false ) { // check the dimensions only, independent of the orientation. // if the height is greater than the width, switch the values for comparison. $width = ($check[0] >= $check[1]) ? $check[0] : $check[1]; $height = ($check[1] < $check[0]) ? $check[1] : $check[0]; if ( $width > $target_max_width || $height > $target_max_height ) { $errors['image'] = __("Your image exceeds the permissible dimensions. Please resize and try again."); } } } $field_data = array($fields,$errors); //return result return $field_data; }
Add this to your Toolset custom code section in Toolset->Settings->Custom Code and ensure that you've activated it.
Please change all instances of 'wpcf-image' to your image field slug keeping the 'wpcf-' prefix attached to the slug. Also where you see 1234 replace this with the ID of your form.
Once you've done this it should now work.
Thanks,
Shane
Hi Shane,
1. Apologies, I think my requirement caused a confusion. In my requirement, the image dimensions should be min height 150 and min width 150. The code what you have provided validates and controls to max 150 height and max 150 width.
2. Tried adding the images with file size more than 5 MB and it is allowing. Could you please suggest me?
Let me know in case if there is any issue in adding code to validate the file size.
Thanks.
Hello,
Thank you for the information.
I've updated the code below.
add_action('cred_form_validate', 'validate_image_dimensions',10,2); function validate_image_dimensions($error_fields, $form_data) { $forms = array( 1234 ); // Field data are field values and errors list($fields,$errors)=$error_fields; if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-image']['tmp_name']) ) { $target_min_width = 150; $target_min_height = 150; $check = getimagesize( $_FILES['wpcf-image']['tmp_name'] ); $file_size_uploaded=$fields['wpcf-image']['field_data']['size']; if ( $check !== false ) { // check the dimensions only, independent of the orientation. // if the height is greater than the width, switch the values for comparison. $width = ($check[0] >= $check[1]) ? $check[0] : $check[1]; $height = ($check[1] < $check[0]) ? $check[1] : $check[0]; if ( $width < $target_min_width || $height < $target_min_height ) { $errors['image'] = __("Your image doesn't meet the minimum dimension requirements of 150*150 pixels"); }elseif($file_size_uploaded > 6000000){ $errors['image'] = __("Your Filesize is greater than 5mb please resize and try again."); } } } $field_data = array($fields,$errors); //return result return $field_data; }
2. Tried adding the images with file size more than 5 MB and it is allowing. Could you please suggest me?
Let me know in case if there is any issue in adding code to validate the file size.
This was under the impression that you wanted the maximum to be 150*150
Thanks,
Shane
Hi Shane,
After applying the code, tried to give the image with dimensions lesser than 150 x 150 and it is taking (not working).
Replaced the form ID with 144 (Edit Profile).
Replaced the slug name 'wpcf-image' to 'wpcf-profile-photo'.
Please find attached the images with the details.
add_action('cred_form_validate', 'validate_image_dimensions',10,2); function validate_image_dimensions($error_fields, $form_data) { $forms = array( 144 ); // Field data are field values and errors list($fields,$errors)=$error_fields; if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-profile-photo']['tmp_name']) ) { $target_min_width = 150; $target_min_height = 150; $check = getimagesize( $_FILES['wpcf-profile-photo']['tmp_name'] ); $file_size_uploaded=$fields['wpcf-profile-photo']['field_data']['size']; if ( $check !== false ) { // check the dimensions only, independent of the orientation. // if the height is greater than the width, switch the values for comparison. $width = ($check[0] >= $check[1]) ? $check[0] : $check[1]; $height = ($check[1] < $check[0]) ? $check[1] : $check[0]; if ( $width < $target_min_width || $height < $target_min_height ) { $errors['image'] = __("Your image doesn't meet the minimum dimension requirements of 150*150 pixels"); }elseif($file_size_uploaded > 6000000){ $errors['image'] = __("Your Filesize is greater than 5mb please resize and try again."); } } } $field_data = array($fields,$errors); //return result return $field_data; }
Please let me know in case you need access to my data to have a look at the issue.
Thanks.
Hello,
Yes please provide me with admin access to the site as well as a link to the page where I can test out this issue.
Thanks,
Shane
Hello,
Thank you, i've made some updates to the code and this one should work now.
// Put the code of your snippet below this comment. add_action('cred_form_validate', 'validate_image_dimensions',10,2); function validate_image_dimensions($error_fields, $form_data) { $forms = array( 144 ); // Field data are field values and errors list($fields,$errors)=$error_fields; if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-profile-photo']['tmp_name']) ) { $target_min_width = 150; $target_min_height = 150; $check = getimagesize( $_FILES['wpcf-profile-photo']['tmp_name'] ); $file_size_uploaded=$fields['wpcf-profile-photo']['file_data']['size']; if ( $check !== false ) { // check the dimensions only, independent of the orientation. // if the height is greater than the width, switch the values for comparison. $width = ($check[0] >= $check[1]) ? $check[0] : $check[1]; $height = ($check[1] < $check[0]) ? $check[1] : $check[0]; if ( $width < $target_min_width || $height < $target_min_height ) { $errors['profile-photo'] = __("Your image doesn't meet the minimum dimension requirements of 150*150 pixels"); }elseif($file_size_uploaded > 6000000){ $errors['profile-photo'] = __("Your Filesize is greater than 5mb please resize and try again."); } } } $field_data = array($fields,$errors); //return result return $field_data; }
.
It shouldn't allow any images where their dimensions are smaller than 150*150 or if the filesize is greater than 5mb.
Please let me know if there are any issues with this code.
Thanks,
Shane
Hi Shane,
I will test and let you know the result.
Meanwhile, please let me know whether the code applies for the single image field (not repeated) in the post forms as well?
Just I would need to replace the slug and the form ID?
Please suggest.
Thanks.
Hello,
Yes this should work for a single field as well given that this is what I used to test the function.
Thanks,
Shane
Hi Shane,
Is it the same code for post forms as well ?
Replace slug name and form ID is enough ?
Thanks.
Hello,
Yes same code for the post form, just use a different ID.
Thanks,
Shane
Thanks Shane.
Will test and let you know in case of any concerns by this Sunday.
Thanks.
Hello,
Looking forward to hearing your response on this one and if further assistance is needed.
Thanks,
Shane