WP Forms image upload field

The WP Forms plugin is a popular choice for creating forms in WordPress. One common requirement in forms is to allow users to upload images. To achieve this functionality, you can use the wpsnippets_wpforms_image_upload_field function.

This function creates a custom image upload field for WP Forms. It adds a new field type called “image_upload” to the WP Forms form builder. When this field type is selected, users will be able to upload an image file.

Here’s an example of how to use the wpsnippets_wpforms_image_upload_field function:

function wpsnippets_wpforms_image_upload_field( $fields ) {
    $fields['image_upload'] = array(
        'label'         => 'Image Upload',
        'required'      => true,
        'filetype'      => 'image',
        'maxsize'       => 5,
        'maxfiles'      => 1,
        'extensions'    => 'jpg, jpeg, png',
        'description'   => 'Upload an image file (max 5MB)',
    );

    return $fields;
}
add_filter( 'wpforms_fields', 'wpsnippets_wpforms_image_upload_field' );

In this example, the wpsnippets_wpforms_image_upload_field function is hooked into the wpforms_fields filter. It adds a new field type called “image_upload” to the $fields array, which is used by WP Forms to generate the form builder.

The field options include a label, required flag, allowed file types, maximum file size, maximum number of files, and a description. You can customize these options to fit your specific needs.

Once you’ve added this code to your theme’s functions.php file or a custom plugin, you’ll be able to select the “Image Upload” field type when creating or editing a form in WP Forms.

Examples

Example 1: Adding an image upload field to a WP Forms form

This use case demonstrates how to add an image upload field to a WP Forms form. The code example below shows how to add the image upload field using the wpsnippets_wpforms_add_field function.

function wpsnippets_wpforms_add_field( $fields ) {
    $fields[] = array(
        'type' => 'file-upload',
        'label' => 'Upload Image',
        'name' => 'image_upload',
        'required' => true,
        'max_files' => 1,
        'allowed_extensions' => 'jpg, jpeg, png',
    );
    return $fields;
}
add_filter( 'wpforms_builder_fields', 'wpsnippets_wpforms_add_field' );

In this code example, we define a new field of type file-upload with the label “Upload Image”. The field is named image_upload and is set as required. We also specify that only one file can be uploaded and restrict the allowed file extensions to jpg, jpeg, and png.

Example 2: Retrieving the uploaded image in a WP Forms submission

This use case demonstrates how to retrieve the uploaded image from a WP Forms submission. The code example below shows how to access the uploaded image URL using the wpsnippets_wpforms_submission_data function.

function wpsnippets_wpforms_submission_data( $fields, $entry ) {
    $image_url = wp_get_attachment_url( $entry['image_upload'] );
    // Use the $image_url as needed
}
add_action( 'wpforms_process_complete', 'wpsnippets_wpforms_submission_data', 10, 2 );

In this code example, we use the wpforms_process_complete action hook to access the submitted form data. We retrieve the URL of the uploaded image using the attachment ID stored in the $entry['image_upload'] array key. You can then use the $image_url variable to display or process the uploaded image.

Example 3: Validating the image upload field in a WP Forms form

This use case demonstrates how to validate the image upload field in a WP Forms form. The code example below shows how to check if the uploaded file is an image using the wpsnippets_wpforms_validate_image_upload function.

function wpsnippets_wpforms_validate_image_upload( $errors, $fields ) {
    $image_upload_field = wpforms_get_field( $fields, 'image_upload' );
    $file_type = wp_check_filetype( $image_upload_field['value'] );

    if ( ! in_array( $file_type['ext'], array( 'jpg', 'jpeg', 'png' ) ) ) {
        $errors['image_upload'] = 'Please upload a valid image file (jpg, jpeg, png).';
    }

    return $errors;
}
add_filter( 'wpforms_validation_errors', 'wpsnippets_wpforms_validate_image_upload', 10, 2 );

In this code example, we use the wpforms_validation_errors filter to validate the image upload field. We retrieve the field value using wpforms_get_field and check the file type using wp_check_filetype. If the file type is not one of the allowed image types (jpg, jpeg, png), we add an error message to the $errors array, which will be displayed to the user.