Support

Account

Register Login

Home › Forums › Front-end Issues › Frontend form file upload validation

Solving

Frontend form file upload validation

  • HI,
    I am using ACF PRO for various things and everything works great so far.

    But at the moment, I am stucked.

    I’ve created a frontend form for creating a new post in a specific category.

    Everything works great except I have no validation for my file uploads (which are nested in a repeater field).

    Is it possible to use native file upload validation and inform the user about failure?

    Currently, if files have a wrong file type or are to big, the are just removed and the post is created without the files.

    Thanks for your support
    Johanna

  • I have the same problem. Has anyone found a solution to the frontend form validation for file uploads not working? Help would be much appreciated. Thanks.

  • This reply has been marked as private.

  • Same here. Happens with the “basic uploader” inside a front end form.

    I’m utilizing “acf/upload_prefilter” now to prevent the form to be saved and to catch any errors.

    But I haven’t figured out how to display the error messages in the front end after the page has loaded again.

    Any ideas?

  • Hi @gregor

    I’m afraid I can’t reproduce this issue on my end. Could you please share your JSON or XML export file of your field group and the code you used to show the front end form?

    Thanks 🙂

  • Hey @acf-support ,

    thanks for the reply. The upload field is the following:

    
{
    "key": "field_5793b50551910",
    "label": "Vereinssatzung",
    "name": "vereinssatzung",
    "type": "file",
    "instructions": "blabla",
    "required": 1,
    "conditional_logic": 0,
    "wrapper": {
        "width": "",
        "class": "",
        "id": ""
    },
    "return_format": "url",
    "library": "uploadedTo",
    "min_size": "",
    "max_size": 7,
    "mime_types": "jpg, jpeg, pdf"
},

    The front end form is injected like this:

    
$options = array(
	    'post_id' => 'user_'.$current_user->ID,
	    'field_groups' => array('group_5793afe65ba18'),
	    'return' => get_permalink( get_page_by_path( 'anmeldung-datenfreigabe' ) ), 

	    'submit_value' => 'Weiter', 

	    'honeypot' => true
	);
acf_form($options);

    Again: I’m utilizing the basic uploader and save all the data to the user meta table. After I select a file with a disallowed file type and submit the form, the page is being redirected and no error is shown.

  • Hi @gregor

    I can reproduce it now. It seems that the basic uploader doesn’t check the file type. As a workaround, you can try the following code:

    add_filter('acf/validate_value/type=file', 'my_acf_validate_value', 10, 4);

function my_acf_validate_value( $valid, $value, $field, $input ){
	
	// bail early if value is already invalid
	if( !$valid ) {
		
		return $valid;
		
	}
    
    // Get the allowed types and store it in an array
    $allowed_types = explode(',', trim($field['mime_types']));
    
    // Get the current file extension
    $file_extension = pathinfo($value)['extension'];
    
    // Check if the current file extension is allowed or not
    if( !in_array($file_extension, $allowed_types) ){
        $valid = 'This file type is not allowed';
    }

	// return
	return $valid;
		
}

    If you want, you can also open a new ticket so this issue can be passed directly to the plugin author? You can open a new ticket here: https://support.advancedcustomfields.com/new-ticket.

    I hope this helps 🙂

  • Hey @acf-support,

    thanks so much for the quick reply! Yes, it helped and I submitted a new ticket 🙂

    Best,
    Gregor

  • Hello @acf-support,

    I have to come back to this issue again because of two reasons:

    1. The problem with the basic uploader and the code snippet you provided above is, that it only works, when a file has not been uploaded already. If, in any case, the user returns back to the form, leaves the upload-field unchanged, clicks the submit button again, the upload field returns an ID as value (the attachment ID of the file) instead of the path to the already uploaded file. So the validation of the file extension fails, because it’s not able to fetch the file.
    The upload-field is set to return the attachment url in the ACF-setup, not the ID.
    To work around this, I’m now checking whether the field value is an ID or a path via Regex and catch the file with “wp_get_attachment_url” if it’s an ID.

    2. If the user selects a file with a file size that is above the limit in the setup of that field, the front end form doesn’t spit out the validation error (File is too large). Instead it proceeds and redirects to the given URL in “return” parameter. Basically the same problem as with file extension checking.

    Gregor

  • Hi,

    For those who comes across this and not being able to update/edit posts you can add if(is_numeric($value)) { to the code to check if the field is already stored like so:

    At least that seems to work for me. 

    add_filter('acf/validate_value/type=file', 'my_acf_validate_value_file', 10, 4);

function my_acf_validate_value_file( $valid, $value, $field, $input ){

	if(is_numeric($value)) {
		return true;
	} else {
	
		// bail early if value is already invalid
		if( !$valid ) {
			
			return $valid;
			
		}
	    
	    // Get the allowed types and store it in an array
	    $allowed_types = explode(',', trim($field['mime_types']));
	    
	    // Get the current file extension
	    $file_extension = pathinfo($value)['extension'];
	    
	    // Check if the current file extension is allowed or not
	    if( !in_array($file_extension, $allowed_types) ){
	        $valid = 'This file type is not allowed';
	    }

		// return
		return $valid;
	}
		
}

    Kind regards
    Henrik

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Frontend form file upload validation’ is closed to new replies.