I have a form with some custom fields including an image field created via Toolset Types. The form does not use WP media library to upload pictures, and submissions are not done via AJAX (because we need to use some filters which apparently don't work when using AJAX).
Suppose a form has Name, Age, and Image. When I enter incorrect age which displays an error from my custom validation code in a cred_form_validate filter, the image that was uploaded correctly, and therefore had the correct URL linked to it, now gets an incorrect URL.
For example, if I uploaded an image which gets uploaded and linked to say site.com/wp-content/uploads/abc.jpg, after a validation error the image field actually changes itself to 'abc.jpg'. This results in the image not being shown even though it was previously uploaded correctly.
How to get the image field should retain the correct URL after custom validation errors are shown?
What is the link to your site?
I don't see a "secure" text field where I can share the URL and password of the site with you. Please let me know if it can be shared in an existing textbox or will you be enabling a private/secure field. Thanks.
I'm able to verify that this is the case on my end as well. What happens essentially is that the error will cause you to re-attach your image to the post when it should remain attached even after a failed verification.
However when you submit that same form with the correct validation, does the image get uploaded correctly? Meaning on the backend does the image show up in the correct field ?
After a failed validation, neither does the image field clear itself so that the user could get an indication to upload the image again, and neither does the correct image remain attached because the image's URL gets changed to only its filename.
If the same form (which earlier failed validation) is now submitted with correct validation (without changing the image field), the URL of the image becomes only the filename and therefore shows the icon of an invalid image as shown in the screenshot previously shared. The image does not show up in the backend as the image field which should have the URL filled in only has the filename.
This can be easily seen using a link and password which I can share, but for that you'd have to enable a private textbox or something similar. If you prefer an alternative, I'll try to describe the sequence again below:
Let's assume whatever image I upload from my computer to the form gets uploaded at hidden link
Fill form and upload image ---> Successful validation ---> Correct image is uploaded and shown in backend (hidden link)
Fill form and upload image ---> Failed server-side validation ---> Form shown again with validation errors, and image field shows image uploaded like shown in the screenshot before ---> Form errors corrected and form submitted ---> Successful validation ---> Image uploaded has incorrect URL which is only the filename and no path (abc.jpg instead of hidden link). Therefore no image shows up in the backend.
An update here. Our 2nd tier support team has escalated this issue to our development team.
However the problem here is that the image is not actually uploaded if the validation fails. You users will need to re-add the images.
Is there any particular reason why you aren't able to use the Media Library for the uploads as this works fine with the form when not using AJAX and the image isn't lost after a failed submission.
Thanks for getting the issue escalated and suggesting the workaround to use the Media Library.
We initially didn't want to use the Media Library for uploads because we weren't sure about how it would work with custom roles that we'd later create programmatically. Additionally, we weren't sure if they'd be able to access the images inside WP-admin that way or not (they shouldn't!), and if image validation for size was possible with the Media Library. We weren't using Toolset Access at the time so we just went for the easier route to provide a simple upload box for the user without the media library.
However, after exploring Toolset Access, I now see that there is a permission under Toolset Forms - "Use any Media Library file when adding files to front-end Post Forms".
1. Would turning off this permission for the custom roles ensure that those users will in no way be able to access images uploaded by others to the WP Media Library?
2. Are there any other permissions related to Media Library that I might've missed?
3. In a Toolset form, how to limit the size of the image that can be uploaded using the Media Library? (say, max 5 MB).
1. Would turning off this permission for the custom roles ensure that those users will in no way be able to access images uploaded by others to the WP Media Library?
That is correct, also if you disable the preview any option they won't be able to see other user's image that they have uploaded.
2. Are there any other permissions related to Media Library that I might've missed?
Actually no all the permissions you need are there on the post type screen for the Access plugin.
3. In a Toolset form, how to limit the size of the image that can be uploaded using the Media Library? (say, max 5 MB).
This hook below should be able to help with this one.
add_filter('cred_form_ajax_upload_validate','cred_filetype_size_validation',10,2);
function cred_filetype_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']==797 )
{
if(isset($fields['wpcf-file'])) {
//Retrieve file size
$file_size_uploaded=$fields['wpcf-file']['field_data']['size'];
//check if featured image exists
if ( ($file_size_uploaded > 1000000) )
{
//set error message for featured image
$errors['produktovy-list'] = 'Sorry the file you have uploaded a file exceeded 1MB limit';
}
}
}
//return result
return array($fields,$errors);
}
Replace wpcf-file with the slug of your custom field as well as 'produktovy-list'.
The validation filter works well for the WP media library. Just one last issue I'm facing with this is that the validation error isn't visible on mobile.
At a time when majority of the traffic on many websites including ours is from mobile devices, we do require the error to be shown on mobile. How we can do that? On desktop it is visible to the right of the image but on mobile that tab isn't visible. I've attached 2 images showing the error visible on desktop but not on mobile devices.
Actually this is normal because in the mobile view the wordpress media uploader doesn't show the Preview Section. From your screenshot it would be the section that says Uploading.
This is the section where all errors are shown and on mobile wordpress doesn't show this section so the user won't see the error.
However as a note you can add a message on the form that will notify users of the correct image specifications to use so even if there is no error the user will know what size image they need to upload.
Yes, this looks like a WP-based limitation. The WP media library upload is not quite a user-friendly option for mobile since it doesn't display that errors area. The PHP 'Maximum upload file size' limit which is does show is different from what we want in the form, and this message is easy to hide via CSS.
I guess having a note next to the form field is the only choice we have now. I hope the dev team considers fixing the original issue with the simple (non-WP) uploader; we'd happily switch to that for an easier user experience.
