[Resolved] How to compress the Image before uploading to server using Forms API

[Author]

Posts

[puneetS-3]

1. I have created a CRED Form where I added a custom user field named "profile picture" so that users can upload their profile pictures which is working fine.
What I want is that when a user uploads an image, it gets compressed before uploading it to the server so that the page saves it quickly.
I saw a similar question here: https://toolset.com/forums/topic/photo-resizing-on-submission/, but I'm not sure how to achieve it.
Would you please help me with the custom code?

2. I also want to add validation on image size for that I tried the following cutom code:

add_filter('cred_form_validate','img_size_validation',10,2);
function img_size_validation($error_fields, $form_data)
{
  $forms_id = array( 9004111222013483);
  $size = 2048000;
  $field_slug = 'profile-picture';
  $error_msg = 'Maximum size is 2MB, please try again.';
  //error_log("######");
   //var_dump($forms_id);
  list($fields,$errors)=$error_fields;
  if (in_array( $form_data['id'], $forms_id ) && isset($fields['wpcf-' . $field_slug]['field_data']['size']))
  {
    $instance_size = $fields['wpcf-' . $field_slug]['field_data']['size'];
    if ( $instance_size > $size )
    {  
      //display error message for this field instance
      $errors['wpcf-' . $field_slug] = $error_msg;  
    }
  }
  //return result
   return array($fields,$errors);
}

This is not working in my case.
I followed this answer: https://toolset.com/forums/topic/php-function-for-limiting-size-of-images-uploaded-not-working/
**User has permission to publish Media if you are using Toolset Access Control.
**There is no any extra </div> in my cred form.
Is it possible to validate the image during upload or before submit the form?

[Christian Cox]

What I want is that when a user uploads an image, it gets compressed before uploading it to the server so that the page saves it quickly.
Toolset's Forms API works on the server, so there is no way Toolset can compress the image before it gets to the server. I don't know of a way to compress an image before it gets to the server, other than to use a 3rd-party application like Photoshop or GMP to optimize your images, then upload them using the browser.

Is it possible to validate the image during upload or before submit the form?
Yes, to validate image uploads before form submission you can use the cred_form_ajax_upload_validate API, and activate the Media Library for Form uploads. We have documentation for this API here:
https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_ajax_upload_validate
Here is an example:

add_filter('cred_form_ajax_upload_validate','my_validation',10,2);
function my_validation($error_fields, $form_data)
{
    //field data are field values and errors
    list($fields,$errors)=$error_fields;
    //validate if specific form
    if ($form_data['id']==62)
    {
        //check if featured image exists o
        if ($fields['_featured_image']['field_data']['size'] > 1000000)
        {
            //set error message for featured image
            $errors['_featured_image'] = 'The image is too large';
        }
    }
    //return result
    return array($fields,$errors);
}

Let me know if you have questions about this or need more code examples.

[puneetS-3]

Hi Christian Cox,
Sorry but I'm not sure from where I activate the media library for form uploads?
I replaced the form id and field slug as follows:

add_filter('cred_form_ajax_upload_validate','img_size_validation',10,2);
function img_size_validation($error_fields, $form_data)
{
    //field data are field values and errors
    list($fields,$errors)=$error_fields;
    //validate if specific form
    if ($form_data['id']==9004111222013483)
    {
        //check if featured image exists o
        if ($fields['profile-picture']['field_data']['size'] > 1024000)
        {
            //set error message for featured image
            $errors['profile-picture'] = 'The image size should be less than 1MB';
        }
    }
    //return result
    return array($fields,$errors);
}

Please correct if something is wrong here.

[Christian Cox]

Sorry but I'm not sure from where I activate the media library for form uploads?
There is a checkbox in the Form editor. I have attached a screenshot.

if ($form_data['id']==9004111222013483)

Where did you get this number 9004111222013483? This doesn't seem right. Can you show me a screenshot where you got this number?

 if ($fields['profile-picture']['field_data']['size'] > 1024000)

If the profile-picture field is a Types field, you should add the wpcf- prefix in the $fields line like shown in the next code sample.

 if ($fields['wpcf-profile-picture']['field_data']['size'] > 1024000)

Do not adjust the field slug in the $errors line, leave it just like you have it now.

[puneetS-3]

There is a checkbox in the Form editor.
When I activate this, the user can't be able to upload a profile image using their device camera he/she is restricted to use only the WordPress media library. Is it necessary to activate this?
I mean, Is this validation only works by activating this checkbox?

Can you show me a screenshot where you got this number?
Yes, sure! Please find the attached screenshot.

Okay! I corrected.

if ($fields['wpcf-profile-picture']['field_data']['size'] > 1024000)
        {
            $errors['profile-picture'] = 'The image is too large';
        }
    }

Thanks!

[Christian Cox]

I mean, Is this validation only works by activating this checkbox?
AJAX validation only works by activating this checkbox. Other validation can be performed on the server, using the cred_form_validate API, during form submission. But again this is only after the form is submitted.

9004111222013483
This looks accurate, thanks! It means that you must have a large number of posts in this site, or you started with a very large post ID.

[puneetS-3]

Other validation can be performed on the server, using the cred_form_validate API
Now I changed the API from cred_form_ajax_upload_validate to cred_form_validate

But again this is only after the form is submitted.
Still profile picture is uploading without any validation.

Here is the code:

add_filter('cred_form_validate','img_size_validation',10,2);
function img_size_validation($error_fields, $form_data)
{
    //field data are field values and errors
    list($fields,$errors)=$error_fields;
    //validate if specific form
    if ($form_data['id']==9004111222013483)
    {
        //check if Profile Picture exists 
        if ($fields['wpcf-profile-picture']['field_data']['size'] > 5000)
        {
            //set error message for Profile Picture
            $errors['profile-picture'] = 'The image is too large';
        }
    }
    //return result
    return array($fields,$errors);
}

[Christian Cox]

Okay it would probably be best for me to log in and take a closer look. Please provide admin credentials in the private reply fields here. Also - this is very important - please let me know where I can find the form on the front-end of your site.

Thank you!

[Christian Cox]

It seems the file size information should be found under "file_data", not "field_data". I made that change for you. Can you test it out?

if ($fields['wpcf-profile-picture']['file_data']['size']

[puneetS-3]

Yes!
It is working now.
Thank you, Christian Cox.

[puneetS-3]

My issue is resolved now. Thank you!