How to Retain the Original File Name for File Uploads

Introduction

Would you like to retain the original file name on files inside the email notifications when you’ve enabled the option Enable File Upload Attachments from the Advanced options on the Notifications tab? By default, WPForms will add a string of letters and numbers to the original file name for security purposes and in case of duplicate file names. However, if you’d like to remove this layer of security, you can easily achieve this with a PHP filter. In this tutorial, we’ll show you exactly how to achieve this!

Creating the form

We’ll begin by creating a new form. For the purpose of this documentation, we’re doing a simple sign-up sheet for a recreation baseball team to order their own team shirts. We’ll have some basic information but will also add a File Upload field to allow teams to upload their own design.

If you need any help in creating your form, please check out this helpful guide.

Enabling the option to include the file attachment

Once the form fields are added, click on the Settings tab inside the form builder. Next head to the Notifications tab and scroll down to open the Advanced options.

Click to toggle on the button for the Enable File Upload Attachments and select the fields you want to include the attachments for. In this tutorial, we only have one File Upload field, so we’ll just need to add that field to this section.

Adding the snippet

Next, we’re going to add the snippet to our site. If you need any assistance with how to add snippets to your own site, check out this tutorial for further information.

/**
 * Retain original file name on file uploads
 *
 * @link https://wpforms.com/developers/how-to-retain-the-original-file-name-for-file-uploads/
 */
  
function wpf_emails_send_email_data( $email, $email_obj ) {

	if ( empty( $email[ 'attachments' ] ) ) {
		return $email;
	}

	if ( ! isset( $email_obj->form_data, $email_obj->notification_id, $email_obj->fields ) ) {
		return $email;
	}

	$form_data       = $email_obj->form_data;
	$notification_id = $email_obj->notification_id;
	$entry_fields    = $email_obj->fields;

	if (
		empty( $entry_fields ) ||
		empty( $form_data[ 'settings' ][ 'notifications' ][ $notification_id ][ 'file_upload_attachment_enable' ] ) ||
		empty( $form_data[ 'settings' ][ 'notifications' ][ $notification_id ][ 'file_upload_attachment_fields' ] )
	) {
		return $email;
	}

	$attachment_fields       = $form_data[ 'settings' ][ 'notifications' ][ $notification_id ]['file_upload_attachment_fields'];
	$entry_attachment_fields = [];

	foreach ( $attachment_fields as $field_id ) {
		if ( ! empty( $entry_fields[ $field_id ] ) ) {
			$entry_field = $entry_fields[ $field_id ];

			if ( ! empty( $entry_field[ 'style' ] ) && $entry_field[ 'style' ] === 'modern' ) {
				foreach ( $entry_field[ 'value_raw' ] as $file ) {
					$entry_attachment_fields[ $file[ 'file' ] ] = $file;
				}
			} else {
				$entry_attachment_fields[ $entry_field['file'] ] = $entry_field;
			}
		}
	}

	$attachments = [];

	foreach ( $email[ 'attachments' ] as $attachment ) {
		$file_name = basename( $attachment );

		if ( empty( $entry_attachment_fields[ $file_name ][ 'file_user_name' ] ) ) {
			$attachments[] = $attachment;

			continue;
		}

		$attachments[ $entry_attachment_fields[ $file_name ][ 'file_user_name' ] ] = $attachment;
	}

	$email[ 'attachments' ] = $attachments;

	return $email;
}

add_filter( 'wpforms_emails_send_email_data', 'wpf_emails_send_email_data', 30, 2 );

This snippet will look for any attachments to the email and instead of adding the hashed string, it will retain the original file name that was uploaded.

Now instead of our email attachment file having a file name like theres-no-base-like-home-svg-8abdd7ea434445587fb0e1b560b137b1.png, the name after the snippet was added will be theres-no-base-like-home-svg.png.

And that’s it! You’ve successfully used a PHP filter to retain the original file name for file attachments on your email notifications. Would you also like to alter the time your visitors have for uploading larger files? Take a look at our article on How to Change the Timeout on the Modern File Upload.