wpmudev-load-custom-javascript.php

<?php
/**
 * Plugin Name: [Gravity Forms] Load Custom Javascript for LuxFlow
 * Plugin URI: https://premium.wpmudev.org/
 * Description: Loads example javascript to manipulate a upload element and intercept the submission on gravity forms and gravity forms preview pages.
 * Author: Glauber Silva @ WPMUDEV
 * Author URI: https://premium.wpmudev.org/
 * Task: 0/11289012348292/1170810850944044
 * License: GPLv2 or later
 *
 * @package Gravity_Forms_Load_Custom_Javascript_For_LuxFlow
 */

defined( 'ABSPATH' ) || exit;

/**
 * Add the custom JS to manipualte the upload element and intercept the form submission.
 */
function wpmudev_load_custom_js() {

	ob_start();
	?>
		<script type="text/javascript">

			(($,d)=>{

				$( d ).ready( function(){

					var selector_upload_element = '#input_1_1'; // Replace with your upload element selector. E.g: #input_80_1
					var selector_form = '#gform_1'; // Replace with your form selector. E.g: #gform_80

					var upload_element = document.querySelector( selector_upload_element );
					var form = document.querySelector( selector_form );

					var selected_file = false;

					// Handle Upload Element
					if( typeof( upload_element ) != 'undefined' && upload_element != null ){

						console.log( 'Upload Element ' + selector_upload_element + ' exists | Fired here: /wp-content/mu-plugins/wpmudev-load-custom-javascript.php' );					

						upload_element.addEventListener('change', function() {
							//change event will be triggered once the image was selected.
							if( upload_element.files.length == 0 ) {
								alert('Error : No file selected');
								return;
							}

							selected_file = upload_element.files[0];							
							console.log( "Selected file : " + selected_file.name );							
						});

					} else{
						console.log( 'Upload Element ' + selector_upload_element + ' does NOT exist! | Fired here: /wp-content/mu-plugins/wpmudev-load-custom-javascript.php' );
					}	

					// Handle Form Submission
					if( typeof( form ) != 'undefined' && form != null ){

						console.log( 'FORM ' + selector_form + ' exists | Fired here: /wp-content/mu-plugins/wpmudev-load-custom-javascript.php' );					

						form.addEventListener('submit', function( event ) {						

							if (  selected_file ) {

								event.preventDefault(); // Stop the submission	

								console.log('Data that will be sent via AJAX:' + '\n', selected_file );

								// You can get file especific information in this way
								console.log(
									"IMPORTANT >> If you wish to send specific information about the file via AJAX , you can do this in this way:" + '\n'+
									"selected_file.name - " + selected_file.name + '\n'+
									"selected_file.size - " + selected_file.size + '\n'+
									"selected_file.type - " + selected_file.type + '\n'+
									"selected_file.lastModified - " + selected_file.lastModified
								);

								const data = new FormData();
								data.append('filedata', selected_file);

								$.ajax({

									//Change your URL here
									url: "https://127.0.0.1/YOUR-URL-GOES-HERE",
									data: data,
									cache: false,
									contentType: false,
									enctype: 'multipart/form-data',
									processData: false,
									type: 'POST',
									error: function ( response ) {
										console.log('ERROR:' + '\n', response  );
										alert('Error!');
										return false; 									
									},
									success: function( response ) {
										console.log('SUCCESS:' + '\n', response );
										alert('Success!');
										form.submit(); // Do the submission
									}
								});

							}


						});

					} else {

						console.log( 'FORM ' + selector_form + ' does NOT exist! | Fired here: /wp-content/mu-plugins/wpmudev-load-custom-javascript.php' );

					}

				} );

			})(jQuery,document);

		</script>
	<?php
	$javascript = ob_get_clean();

	echo $javascript; // phpcs:ignore

}
add_filter( 'wp_footer', 'wpmudev_load_custom_js' );
add_action( 'gform_preview_footer', 'wpmudev_load_custom_js' );