How to Change the Timeout on the Modern File Upload

Overview

Would you like to change the timeout when uploading files through the Modern File Upload form field? This can be particularly helpful when you are expecting large files to be uploaded through your form.

By default, the timeout set on the Modern File Upload field is set to 30 seconds or 30000 milliseconds, with a small PHP snippet you can easily change this timeout to be whatever you’d like.

Setup

All you need to do is add this snippet to your site.

If you’re not sure where or how to add snippets to your site, please take a look at this tutorial.

In our example, we’re changing the timeout from 30000 milliseconds (30 seconds) to 60000 milliseconds (60 seconds).

/**
 * Change the timeout on the modern file upload from 30 to 60 seconds.
 *
 * @link https://wpforms.com/developers/how-to-change-the-timeout-on-the-modern-file-upload/
 */

function wpf_dev_modern_file_upload_timeout() {
	?>
	<script type="text/javascript">
		window.addEventListener( 'load', function() {
			if ( typeof wpforms.dropzones === 'undefined' )  {
				return;
			}
			wpforms.dropzones.forEach(function( dropzone ) {
				dropzone.options.timeout = 60000; // The timeout for the XHR requests in milliseconds.
			});
		} );
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_modern_file_upload_timeout', 30 );

You’ll just need to set the 60000 to what you would like.

And that’s it! You’ve successfully increased the timeout from 30 seconds (30000 milliseconds) to 60 seconds (60000 milliseconds). Would you like to also track successful form submissions with Google Analytics without the need for a plugin? Check out this snippet on How to Track Form Submissions Using Google Analytics 4.

Related

Action Reference: wpforms_wp_footer