File Upload preview image pointers and annotation

By: Nick Brittan | Asked: 05/06/2024
ForumsCategory: How-toFile Upload preview image pointers and annotation
Nick Brittan asked 7 months ago
Is there a way to get the File Upload preview image into an HTML field in the same form?

I then want to let the user click on the image to place pointers and notes. This before the form is submitted and an entry created.

I realise that this is not an off-the-shelf solution and will require custom code. If anyone has suggestions on the elements/code snippets or would like to look at this on a paid for project please let me know.
1 Answers
Victor Font answered 7 months ago
Good question Nick and it had me stumped for a moment, but I think I have a solution. Formidable's file upload field is driven by the DropZone.js library. The library's documentation does not explain much, but from reading what is available and testing on a play form, the library creates those thumbnail images on the fly by converting the image to data:image/png;base64 as the src for an img tag. This means that you should be able to copy the generated image src and display it anywhere, in any HTML field where you can use an img tag. I have not tested this thoroughly, but it appears to be a way forward. I have some time if you you want to engage my services. Please start here: https://formidable-masterminds.com/project-application/
Nick Brittan replied 7 months ago

Hi Victor,

I just had a custom shortcode solution from support which get's the preview into an HTML field.

Here is the solution to that ------

You can create a custom shortcode and use the WordPress hook https://developer.wordpress.org/reference/functions/wp_get_attachment_url/ to return the image URL form the file ID.

1 Your file upload field will return the ID of the file on the next page of the form
2 Create a custom shortcode, and then pass the ID of the file upload field into the shortcode
3 You can then add tag into a HTML field on the second page of your form.

Add the shortcode to your site, and use this on the second page of your form //Where X is the ID of the file upload field on page 1.

function get_image_url( $atts ){
if ( ! empty( $atts['file_id'] ) ) {
return wp_get_attachment_url( $atts['file_id'] );
}

return "";
}
add_shortcode( 'myfile', 'get_image_url' );

Thanks for the link..... I will check it out and let you know.

Regards,
Nick

Victor Font replied 7 months ago

I thought of this as well but I was trying to avoid a round trip to the server when all the details are already on the form.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right