[Resolved] Cred Form Image Validation

[Author]

Posts

[FelipeP5703]

I am trying to:

I had a ticket needing help validating images sizes (to 1MB) and checking to see if the files upload are images (jpg, jpeg, and png) here: https://toolset.com/forums/topic/php-function-for-limiting-size-of-images-uploaded-not-working/

But this solution was using Ajax validation which is not working anymore based on this thread: https://toolset.com/forums/topic/understanding-image-upload/

I have replaced my code from 'cred_form_ajax_upload_validate' to this 'cred_form_validate' on the following codes:

img_size_validation (Single image)

//Limit upload file size for SINGLE image custom field
add_filter('cred_form_validate','img_size_validation',10,2);
function img_size_validation($error_fields, $form_data)
{
error_log(' validation script is invoked ');
  $forms = array( 29, 49, 1355 );
  $size = 1024000;
  $field_slug = 'foto-perfil';
  $error_msg = 'Tamanho Max é de 1MB, por favor use uma foto com um tamanho menor que 1MB.';
  
  //field data are field values and errors
  list($fields,$errors)=$error_fields;
  //error log
  //validate if specific form
  if (in_array( $form_data['id'], $forms ) && isset($fields['wpcf-' . $field_slug]['field_data']['size']))
  {
error_log(' this is one of the forms where the image size validation should be applied ');
    //check if this field instance img is bigger than $size (bytes)
    //$instance_size = array_pop($fields['wpcf-' . $field_slug]['field_data']['size']);
    // for single images
	$instance_size = $fields['wpcf-' . $field_slug]['field_data']['size'];
error_log(' instance size: ' . $instance_size );
    if ( $instance_size > $size )
    {
  
      //display error message for this field instance
      $errors['wpcf-' . $field_slug] = $error_msg;
  
    }
  }
  //return result
  return array($fields,$errors);
}

rep_img_size_validation (Multiple images - repeating field)

//Limit upload file size for repeating image custom field
add_filter('cred_form_validate','rep_img_size_validation',10,2);
function rep_img_size_validation($error_fields, $form_data)
{
error_log(' validation script is invoked ');
  $forms = array( 29, 49, 1355 );
  $size = 1024000;
  $field_slug = 'fotos-para-anuncio';
  $error_msg = 'Tamanho Max é de 1MB, por favor use uma foto com um tamanho menor que 1MB.';
  
  //field data are field values and errors
  list($fields,$errors)=$error_fields;
  //error log
  //validate if specific form
  if (in_array( $form_data['id'], $forms ) && isset($fields['wpcf-' . $field_slug]['field_data']['size']))
  {
error_log(' this is one of the forms where the image size validation should be applied ');
    //check if this field instance img is bigger than $size (bytes)
    $instance_size = array_pop($fields['wpcf-' . $field_slug]['field_data']['size']);
error_log(' instance size: ' . $instance_size );
    if ( $instance_size > $size )
    {
  
      //display error message for this field instance
      $errors['wpcf-' . $field_slug] = $error_msg;
  
    }
  }
  //return result
  return array($fields,$errors);
}

toolset_file_type_restriction (Single image)

//Acceptable files JPG, JPEG, PNG only SINGLE IMAGE
add_action('cred_form_validate', 'toolset_file_type_restriction',10,2);
function toolset_file_type_restriction($error_fields, $form_data) {
  // all the valid file types
  $file_types = array('image/jpeg','image/png','image/jpg');
  $forms = array( 29, 49, 1355 );
 
  // Field data are field values and errors
  list($fields,$errors)=$error_fields;
 
  if (in_array($form_data['id'], $forms ) && (isset($_FILES['wpcf-foto-perfil']['type']))) {
 
    //Retrieve file type
    $file_type_uploaded=$_FILES['wpcf-foto-perfil']['type'];
 
    //Validate files uploaded, make sure it is the correct file type
    if (!in_array($file_type_uploaded, $file_types) ) {
 
      //Validation failed,
      // set error message per field
      //Remove wpcf - prefix here!
      $errors['foto-perfil']='O arquivo que você tentou enviar não é válido. Arquivos aceitos são: jpg, jpeg, e png';
 
    }
  }
  //return result
  return array($fields,$errors);
}

toolset_file_type_restriction_mm (Multiple images - repeating field)

//Acceptable files JPG, JPEG, PNG only MULTIPLE IMAGES
add_action('cred_form_ajax_upload_validate', 'toolset_file_type_restriction_M',10,2);
function toolset_file_type_restriction_mm($error_fields, $form_data) {
  // all the valid file types
  $file_types = array('image/jpeg','image/png','image/jpg');
  $forms = array( 29, 49, 1355 );
 
  // Field data are field values and errors
  list($fields,$errors)=$error_fields;
 
  if (in_array($form_data['id'], $forms ) && (isset($_FILES['wpcf-fotos-para-anuncio']['type']))) {
 
    //Retrieve file type
 	$file_type_uploaded = is_array($_FILES['wpcf-fotos-para-anuncio']['type']) ? array_pop($_FILES['wpcf-fotos-para-anuncio']['type']) : $_FILES['wpcf-fotos-para-anuncio']['type'];

    //Validate files uploaded, make sure it is the correct file type
    if (!in_array($file_type_uploaded, $file_types) ) {
 
      //Validation failed,
      // set error message per field
      //Remove wpcf - prefix here!
      $errors['fotos-para-anuncio']='O arquivo que você tentou enviar não é válido. Arquivos aceitos são: jpg, jpeg, e png';
 
    }
  }
  //return result
  return array($fields,$errors);
}

1) I was wondering if there is a way to combine all theses functions into one (if it's advisable to do so), since we can only use cred_form_validate hook.
2) Why is there an error on form 1355 (Editar Anuncio Pode), when there is already an image on custom field (foto-perfil)?
3) Why my functions for checking the size of the images (which I had help from Toolset support to create), are not working? I'm tyring to limit to 1MB but 2MB or more are being uploaded.
4) Why are the images in the repeating custom field (fotos-para-anuncio) are being turned to the side?

Here is a video showing what I mean: hidden link

[Luo Yang]

Hello,

Thanks for the details, I can log into your website.

There are lots of questions in this thread, I am trying to answer them one by one.

Q1) I was wondering if there is a way to combine all theses functions into one (if it's advisable to do so), since we can only use cred_form_validate hook.
In your case, I suggest you try these:
1) Edit those specific forms, which form's IDs are: 29, 49, 1355
Enable option "Use the WordPress Media Library manager for image, video, audio, or file fields"

So all files will be uploaded with WordPress Media Library manager,

2) Use filter hook "cred_form_ajax_upload_validate" to validate those file fields:
https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_ajax_upload_validate

See above document, you can setup different validation on form's ID and the field "name" parameter.

Q2) Why is there an error on form 1355 (Editar Anuncio Pode), when there is already an image on custom field (foto-perfil)?
Since you are using multiple custom PHP validation functions on same forms, so there should be some problem in your PHP codes, I suggest you deactivate all those custom PHP validation functions, try to locate the problem PHP codes.

Q3) Why my functions for checking the size of the images (which I had help from Toolset support to create), are not working? I'm tyring to limit to 1MB but 2MB or more are being uploaded.

As I mentioned in Q1), the filter hook "cred_form_ajax_upload_validate" will be triggered only when you enable the option:
"Use the WordPress Media Library manager for image, video, audio, or file fields".
But this filter hook "cred_form_ajax_upload_validate" is applied to WordPress built-in filter "wp_handle_upload_prefilter":
https://codex.wordpress.org/Plugin_API/Filter_Reference/wp_handle_upload_prefilter

So you can not use it in Toolset code snippet to setup the custom codes, you can try it in your theme file "functions.php":

For examples:
1) Edit those post forms, enable the option:
"Use the WordPress Media Library manager for image, video, audio, or file fields".
2) Put your custom codes in your theme file "functions.php"

Q4) Why are the images in the repeating custom field (fotos-para-anuncio) are being turned to the side?
This should be a problem of your image, for example image file:
hidden link
I have tried to upload it in WP admin side, use the media library, and get the same result: rotated image(turned to the side)
As I suggest above, you can enable option "Use the WordPress Media Library manager for image, video, audio, or file fields", then your user can use WordPress media library tools to rotate the image file, see screenshot: rotate-image

[FelipeP5703]

Luo,

I would like to try your suggestion but there are two things:

1) If I use WordPress Media Library, the code I paid a programmer to create would not work anymore. This code permanently deletes the images from folders and the media library when the User clicks the X, the trash bin, or decide to change the images using the current Toolset Form (without the WordPress Library). That code helps keep my hard drive from accumulating images that are not being used.

2) If I use your suggest, how can I limit the number of images per custom post using WordPress Media Library? When I say limit, I mean the User cannot upload anymore than 6 images for multiple custom image fields, and 1 per custom image field. And I do not mean only select total of 7, I really mean limit from uploading and accumulating pictures in the Media Library. For example, the User uploads 7, if he/she tried to upload another one, he would have to delete the current ones already there in order to make room for a total of 7.

Currently with WordPress Media Library, the User can upload unlimited images.

So what do you suggest?

And thank you so much for helping me!

[FelipeP5703]

Luo,

I'm testing out your suggestion, but I came across an issue. The User cannot edit his image even with Access granted (see img).

Also I was able to find this link about limiting the number of images a custom post can have or upload. Is there something we can use here to limit the number of images the custom post can have in the library? (Just a reminder, I have customers with only one custom post, while another with 30 custom post, so I cannot limit the images per user. I need to limit per custom post) - https://wordpress.stackexchange.com/questions/47580/give-users-a-maximum-upload-capacity-limit-the-number-of-files-a-user-can-uploa

Thank you

[FelipeP5703]

Btw, I deactivated all the custom codes mentioned on this thread.

I also downloaded and activated this plugin that restrict other files besides jpg, jpeg, and png and limits the upload size to 1MB - https://wordpress.org/plugins/wp-upload-restriction/

I've configured the settings so Authors can only upload jpg, jpeg, jpe, and png and upload only 1MB. (It works great)

Now the only thing is that the User can upload more than 6 images on the (multiple image custom field), we need to block that. Hopefully you can help me find a solution.

And the fact that the User cannot edit his own image in the Media Library even with Access granted as shown above.

[FelipeP5703]

Luo,

What a man can do when he has a bit of time, patience and dedication = solve his own problems. I apologize for wasting much of your time.

I was able to find a plugin that would limit the number of images per post, here it is for others in search of it: hidden link

Although that option should be included in the Toolset settings for repeatable custom images field.

Now the only real thing I need help with is the User being able to edit/delete his own image with WordPress Media Library, which I believe it has to do with Access Toolset plugin. If you could login in my site and see if the settings are correct please.

Thank you again!

[Luo Yang]

Thanks for the details, I have checked it in your website, you are using correct Access settings, for the problem:
User being able to edit/delete his own image with WordPress Media Library

For the edit link, you can try these:
1) Login as adminstrator user "Toolset"
2) Edit the post form "Formulário de Anúncio", in section "CSS editor", add below CSS codes:

.toolset-forms-frontend-media-frame .attachment-info .edit-attachment {
display: block !important;
}

3) Switch to author user "juliochautrader"

4) Go to URL:
hidden link

3) Upload an image in field "Imagem de Perfil"
I can see the "Edit Image" link, see screenshot Edit-Image.JPG

For the delete link:
There should not be any delete button or mechanism, because the media might be used on other posts already meanwhile, and you could NEVER delete media through Toolset Form.

You can also file a feature request using the following link:
=> https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[FelipeP5703]

Luo, you did it again brother! My issue is resolved now. Thank you so very much!

[FelipeP5703]

Luo, although the CSS works to go to the editing aspect of the image. The save button is disabled. I cannot save the edited image. (See screenshot)

[FelipeP5703]

I figured it out. I just needed to click the crop button again. It should be a little bit more intuitive, for example, have a button that says "crop" then save it. Anyways, I got it! My issue is resolved now. Thank you!

[FelipeP5703]

Sorry man, I keep finding issues. Now I noticed that I cannot edit the image in mobile. I can select other pictures and upload a new one but I cannot select and edit that image on mobile. How do we fix this?

[Luo Yang]

Thanks for the details, I can duplicated the same problem in my localhost, and have escalated this issue, will update here if there is any news.

[Luo Yang]

Here is the feedback from our developers, this is expected result from WordPress core.

For example, within a fresh WordPress installation, try with mobile device in WordPress admin side:
- create a new post
- in post content, add an image block
- Upload image file in above image block, you should see the same problem: No "Edit image" link.
Since the problem is in WordPress core, we can not fix it.

You might consider to ask add a WordPress core ticket here:
https://make.wordpress.org/core/

[FelipeP5703]

So it seems that WordPress itself cannot edit images on mobile.

[FelipeP5703]

Thank you so much for all your help Luo! My issue is resolved now. Thank you!