[Resolved] Image path broken when uploading image on a front end form
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.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
This site has several Post forms that include an Image upload field that allows multiple images to be uploaded to a post.
We have made no substantial changes to the site recently. The last thing we did was implement some code you gave us to fix drag'n'drop reordering of images on forms, which may or may not be related to this new issue.
At some point in the last month or two, the Image upload field has stopped working correctly:
• After upload, the thumbnail of the image on the front end form is broken, as the full path is missing from the src. Only the file name is included, not the full path. For example, older images that were uploaded correctly have a thumbnail path of "hidden link" where's new images just have a path of "FileName.jpg".
• Instances of the image in Views are exhibiting the same file path issue.
• In the console I get a 404 error in relation to the missing image, where it is trying to find the image in the root of the site: " hidden link".
• The image itself is uploaded to the media library correctly.
I have the same issue on my Dev copy of this site and have deactivated all other plugins (except for the Toolset ones and WooCommerce, as site breaks completely without those activated). This has not helped.
Link to a page where the issue can be seen: hidden link
Access details:
Username: TestStudioManager
PW: V43Kx^Nw%pUA
I see that the custom code targets both types of forms, i.e. forms to create and edit posts.
Can you please do a quick test to see if it has any effect if the code is made to target only one type of form? (i.e. either only the create forms or edit forms )
Good thought. The custom code probably isn't required for the Create forms as a user won't change the order of uploaded images until after they've first created their post.
I've tried what you've suggested and it obviously means I can now upload images correctly when using the Create forms, but the problem with the image paths remains when using the Edit forms.
Thank you for waiting, while I completed some testing around this custom code.
The custom code to order the repeating image field in the edit form, worked as expected, on several test websites that I used.
The issue seems to be specific to your website and most likely an image processing plugin like 'Smush' is handling the image custom fields differently.
Can you please test the code with the edit form without the extra plugins, again?
If the issue persists, I'll need your permission to download your website's clone and test it on a different server.
I've tested this again on my Dev version of this site. With all plugins except Toolset and WooCommerce deactivated, the problem persists:
- With your custom code active, I can reorder images but paths are broken when I upload new ones.
- Without your custom code active, paths are not broken when I upload new images, but I cannot reorder them.
So I don't think it is a plugin conflict issue.
I can give you access to my Dev site if you like, or grant you permission to download a clone of the live site for testing.
I've now run that same test on the live site, disabling all plugins except the Toolset plugins (Access, Forms, Maps, Types, Views) and WooCommerce (site becomes inoperable without WooCommerce enabled), but the problems still persist.
It's imperative that we get this fixed asap, my clients cannot wait any longer. There is clearly an issue with Toolset given the need for patch code to fix the drag'n'drop reordering bug, but the patch code is somehow preventing image paths from being referenced correctly once images are uploaded.
Thank you for waiting while I completed the testing around this edit form for studios, on your website's clone.
Despite several edits, I couldn't reproduce this issue of broken image paths.
Here are the steps that I took:
1. I uncommented the function 'ts_save_the_rf_sort_order_manually' from the theme's 'functions.php' file.
2. I added a new 'Studio' post from the admin area and uploaded 3 images in the 'studio-images' field.
3. Tested the reordering in the admin area and it worked as expected, as you noted too.
4. Next, I tested the reordering of those images from the single studio post, through the form in the 'Edit this Studio' tab. The ordering was properly saved including the correct image paths in the field.
Can you please try the same on the production website too and let me know if the issue is reproducible through some different steps?
Thanks for your further work on this. I'm not surprised you weren't able to reproduce the issue of broken image paths because the steps you took do not match the steps I described when reporting the error.
Firstly, as far as I know, the back end admin area is unaffected. The problem is only with the front end Post forms. Therefore uploading and reordering images through the back end bypasses the problem altogether.
Secondly, with the function uncommented, the drag&drop reordering of images on the front end Post forms will work fine and the image paths will be fine. However uploading new images will not work correctly.
What you need to test is the uploading of new images via the front end form when the 'ts_save_the_rf_sort_order_manually' function is in use. That is what causes the image paths to be saved incorrectly when new images are uploaded via the Post forms.
Thank you for sharing the additional details and that cleared it up.
The custom code for ordering the images in edit form was failing to store the correct image path of the newly uploaded images.
This was complicated to be fixed, because the fully image path of the new images is not available in the form's data, that Minesh's code was using to preserve the newly set order.
This complication is the most likely cause of why the internal ticket to fix this in the plugin's core is still pending. We've plans to refactor how images are stored and manged by the Types fields, as a wider goal.
For now, I was able to add some code modifications that preserves the new order separately for the existing and new images and then merges them as whole to store them again.
Example:
add_action('cred_save_data', 'ts_save_the_rf_sort_order_manually',10,2);
function ts_save_the_rf_sort_order_manually($post_id, $form_data) {
// if a specific form
if ($form_data['id'] == 42 || $form_data['id'] == 58) {
$field_slug = 'studio-images';
$upload_dir = wp_upload_dir();
// array of images coming from the form fields
$field_content = $_POST['wpcf-'.$field_slug];
// temp array for storing already uploaded images
$field_content_trimmed = array();
foreach($field_content as $k=>$v):
if (strpos($v, $upload_dir['baseurl']) !== false) {
$field_content_trimmed[] = $v;
}
endforeach;
// array that gets all the uploaded images from the field's value
$field_content_new = get_post_meta( $post_id, 'wpcf-'.$field_slug, false );
// merge temp array of existing images and new ones
$merged_arr = array_unique( array_merge($field_content_trimmed, $field_content_new) );
// deleting custom fields values and storing again to collectively store the new order
$sort_order = array();
delete_post_meta($post_id,'wpcf-'.$field_slug);
foreach($merged_arr as $k=>$v):
$sort_order[] = add_post_meta($post_id,'wpcf-'.$field_slug,$v);
endforeach;
update_post_meta($post_id,'_wpcf-'.$field_slug.'-sort-order', $sort_order);
}
}
This works on my test website as well as on your website's clone.
Brilliant, you have solved it! Well done! Sorry for the delay replying, I've been busy on other projects and only just had time to test your code. It's working fine on the live site.
Appreciate all your help!
davidS-53 confirmed that the issue was resolved on 2023-12-20 22:20:56.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.
