How to Get the URL from the File Upload Form Field

Introduction

Do you need to get and use the URL from your File Upload form field? In some cases, you may want to pass through this URL to a CRM or use it in a cURL function or even use it to display the image source inside the confirmation message. This tutorial will show you how to get the URL from the File Upload form field using PHP.

Creating the form

To begin, we’ll create a new form and add our form fields. For the purpose of this tutorial, we’re creating a form that will allow each visitor to upload a single image of their child for a photo contest.

If you need any assistance in creating your form, please review this documentation.

create your form and add your fields including at least one file upload field

Adding the snippet

Now it’s time to copy the snippet to your site.

For any help on how and where to add snippets to your site, please check out this tutorial.

/**
 * Get and use the File Upload field URL 
 *
 * @link https://wpforms.com/developers/how-to-get-the-url-from-the-file-upload-form-field/
 */
 
function wpf_dev_frontend_confirmation_message( $message, $form_data, $fields, $entry_id ) {
     
    // Only run on my form with ID = 1425
    if ( absint( $form_data[ 'id' ] ) !== 1425 ) {
        return $message;
    }
 
    // Grab the URL of the single image uploaded to the form
    $myfileurl = $fields[ '4' ][ 'value' ];
	
	// Echo out the image under the confirmation message
	$image .= '<div class="image_container"><img src="' . $myfileurl . '" class="small"></div>';
 
    $message = '<p>' . esc_html__( 'Thank you for your submission. Below is the image you uploaded for our contest. Watch your email for the winner to be notified on July 31st.', 'plugin-domain' ) . '</p>';
 
    return $message . '<p>' . $image . '</p>';
     
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_frontend_confirmation_message', 10, 4 );

The snippet above will only run on the form ID 1425. It will then look for the File Upload form field, which in this tutorial is field ID 4. You’ll need to update these two IDs to match your own form.

If you need assistance in finding these IDs, please review this tutorial. You’ll also want to update the message to your specific needs.

Finally, the snippet will then grab the value of that field which is the URL of the image that was uploaded to the form.

In the final section of the snippet, we’ll display our confirmation message and include the image that was uploaded by using the URL inside the image source to display it on the page.

Adding CSS to reduce the image size

This is an optional step, however, if you don’t want to display the image size at full width, we suggest adding a small CSS snippet to your site to reduce this.

For help with where to add CSS snippets, check out this tutorial.

.image_container {
    max-width: 50%;
    margin: 0 auto;
}

Now when the form is completed, your visitors will see their image under the confirmation message.

with this snippet we were able to get url from file upload field and display the image inside the confirmation message

And that’s it! You’ve successfully saved the URL of the file uploaded through your form. Would you like to hide the image choices on your email notifications? Take a look at our article on How to Hide Image Choices in Notification Emails.

Reference

Filter Reference: wpforms_frontend_confirmation_message