On SAFARI, When upload file field doesn’t have a choosen file, submission fail

+1 discovered this as an issue today. Works fine on every other browser besides Safari. This works for a page that has ANY upload fields.

When trying to use the button, I get an error:
File:
/wp-json/contact-form-7/v1/contact-forms/555/feedback

Error:
{"code":"rest_no_route","message":"No route was found matching the URL and request method","data":{"status":404}}

I’ve tested on a site with no other plugins, Twenty Seventeen theme, and WordPress 4.9.5. Receiving the same issue as OP – only on Safari (desktop and mobile) only when a file is not attached, the submission does not complete successfully.

Anybody for a clue?

I have this issue as well. I will need to modify my form text until it’s resolved.

Hello again everybody

After some diligent research, I think I found a fallback (to be put in functions.php):

/* ══════════════════════════════════════════════════════════════════════════
 * PLUGIN — CONTACT-FORM 7  
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Solve the Safari's issue where submission of form fails if an upload file field
 * exist and no file is uploaded.
 *
 * ══════════════════════════════════════════════════════════════════════════ */

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

Wait for the other guys that reacted on this post to know if it solves the problem on their side.

If so, I will close the topic; if not, I will let it open.

• This reply was modified 6 years, 10 months ago by benoitroubert.

This allows the message to go through without an attachment – but without the little courtesy “message sent successfully” message…
I’ve got the form in a popup, and it looks like the popup just crashes.
I get the message, though… it’s a good fallback procedure if people don’t read my Safari disclaimer
arrangerforhire.com “get a quote” button loads the form

It’s a shame to lose the “message sent successfully” feedback. The behavior feels abrupt everywhere now – but at least the form works. If anybody has a modification that permits the feedback part of the js to work, that would be an awesome thing to see.

Unfortunately that solution breaks any JavaScript trigger I had set up for contact-form event submissions, so I can’t use it. ??

The more Apple hears about this, the sooner we get a solution
https://www.apple.com/feedback/safari.html

Hello everybody,

So… After having tried some solutions on this forum that didn’t worked, I ended to the underneath solution that works like a charm for me, even in the case the form is in a popup!

In short: On clicking on submission link, add “disabled” state to input[type=”file”], then after end of Ajax Event, deactivate “disabled” state to input[type=”file”].

Work on all browsers including Safari on Desktop and iOs.

/* ═════════════════════════════════════════════════════════════════
 * CONTACT-7
 * ═════════════════════════════════════════════════════════════════
 *
 * Solves the issue on Safari that blocks form submission when file upload fields are 
 * presents but with no choosen file
 *
 * ═════════════════════════════════════════════════════════════════ */

jQuery(document).on('click', 'input.wpcf7-submit', function ()
{
	jQuery('input.wpcf7-file').each(function()
	{
	  if (jQuery(this).val() == '') 
	  {
		jQuery(this).attr('disabled', true); 
	  }
	});	 
	
	jQuery(document).ajaxComplete(function () 
	{
		jQuery('input.wpcf7-file').each(function()
		{
		  if (jQuery(this).val() == '') 
		  {
			jQuery(this).attr('disabled', false); 
		  }
		});	 
	});
});    
     

• This reply was modified 6 years, 10 months ago by benoitroubert.

Will try this out shortly and report back. Did this break any custom event triggers that you know of?

I really hope CF7 sees this and patches the bug soon.

@byoungz: As a precision, I deactivated this finally:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

So the solution in my precedent post logically must only affect input[type=”file”] and nothing else.

• This reply was modified 6 years, 10 months ago by benoitroubert.

@benoitroubert That sounds promising – I must apologize for my ignorance about this – where do I put the code you’ve created? Also in functions.php?

• This reply was modified 6 years, 10 months ago by jonburr.

@jonburr

Add something like this in your functions.php and create a /js/main.js file (or whatever else):

add_action( 'wp_enqueue_scripts', 'theme_child_enqueue_scripts');
 
function theme_child_enqueue_scripts()
{ 
    // load main js   
    wp_enqueue_script('main_js', get_stylesheet_directory_uri(). '/js/main.js', array('jquery') );
}

THANK YOU, sir. I’ll give it a shot and report back.