Skip Navigation

[Resolved] Validation of image field in the user form in toolset

This support ticket is created 3 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

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: 

This topic contains 26 replies, has 2 voices.

Last updated by pramodk-2 3 years, 11 months ago.

Assisted by: Shane.

Author
Posts
#1897331

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.

#1897437

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1897463

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.

#1898679

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1899243

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.

#1901339

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1901505
user_image_field_two V1.0.png
user_image_field_three V1.0.png
user_image_field_one V1.0.png

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.

#1901599

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1902429

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#1902949

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.

#1903027

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

Yes this should work for a single field as well given that this is what I used to test the function.

Thanks,
Shane

#1903029

Hi Shane,

Is it the same code for post forms as well ?

Replace slug name and form ID is enough ?

Thanks.

#1903097

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

Yes same code for the post form, just use a different ID.

Thanks,
Shane

#1904273

Thanks Shane.

Will test and let you know in case of any concerns by this Sunday.

Thanks.

#1906729

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

Looking forward to hearing your response on this one and if further assistance is needed.

Thanks,
Shane