How to Get the URL from the File Upload Form Field

Do you need to get 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.

Retrieving the URL

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.

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.

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

wpforms_frontend_confirmation_message

FAQ

Q: Can I send this URL to Salesforce?

A: Absolutely! And there’s no code snippet required for this. Just create your custom field in Salesforce by following their documentation. Once you’ve added the custom field, you can just edit your form and in the Marketing tab under Salesforce, just map the fields over and the URL will be sent to Salesforce with no code necessary.