feat: enhance file upload error handling (#578)

Added accepted file type and file size message in the frontend and alerted the correct error message when the uploaded file condition is not met with the configuration.

Author: girishpanchal30

classes/frontend-scripts.class.php

@@ -595,6 +595,10 @@ private static function set_localize_data( $handle, $var_name, $product, $js_var
 					'plupload_runtime'       => ( ppom_if_browser_is_ie() ) ? 'html5,html4' : 'html5,silverlight,html4,browserplus,gear',
 					'ppom_file_upload_nonce' => wp_create_nonce( 'ppom_uploading_file_action' ),
 					'ppom_file_delete_nonce' => wp_create_nonce( 'ppom_deleting_file_action' ),
+					'invalid_file_type'      => __( 'Invalid file type', 'woocommerce-product-addon' ),
+					// translators: %s is max file size.
+					'max_file_size'          => __( 'File size must be less than %s', 'woocommerce-product-addon' ),
+					'duplicate_file'         => __( 'You have already selected this file', 'woocommerce-product-addon' ),
 				);
 
 				break;

css/ppom-style.css

@@ -614,4 +614,8 @@ span.ppom-tooltip .ppom-tooltip-icon::after {
     color: #fff;
     line-height: 13px;
     font-weight: 700;
+}
+span.ppom-field-notice {
+  display: block;
+  font-size: 14px;
 }

js/file-upload.js

@@ -861,8 +861,15 @@ function ppom_setup_file_upload_input( file_input ) {
 			},
 
 			Error( up, err ) {
-				//document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
-				alert( '\nError #' + err.code + ': ' + err.message );
+				if ( -600 === err.code && file_input.file_size ) {
+					alert( ppom_file_vars.max_file_size.replace( '%s', file_input.file_size.toUpperCase() )  );
+				} else if ( -601 === err.code && file_input.file_types ) {
+					alert( ppom_file_vars.invalid_file_type);
+				} else if ( -602 === err.code ) {
+					alert( ppom_file_vars.duplicate_file );
+				} else {
+					alert( 'Error #' + err.code + ': ' + err.message );
+				}
 			},
 		},
 	} );

src/Support/Helpers.php

@@ -2581,4 +2581,33 @@ public static function get_image_name( $images ) {
 
 		return $updated_value;
 	}
+
+	/**
+	 * Get file uploader notice text based on field meta.
+	 *
+	 * @param \PPOM_InputManager $meta_field Meta field object.
+	 * @return string Notice text to display for file uploader field.
+	 */
+	public static function get_file_uploader_notice( $meta_field ) {
+		$file_types = $meta_field->get_meta_value( 'file_types' );
+		$file_size  = $meta_field->get_meta_value( 'file_size' );
+
+		$notice = '';
+		if ( $file_types ) {
+			$notice = sprintf(
+				// translators: %s is the accepted file types.
+				__( 'Accepted formats: %s.', 'woocommerce-product-addon' ),
+				esc_html( strtoupper( $file_types ) )
+			);
+		}
+		if ( $file_size ) {
+			$notice .= ' ' . sprintf(
+				// translators: %s is the maximum file size.
+				__( 'Max size: %s', 'woocommerce-product-addon' ),
+				esc_html( strtoupper( $file_size ) )
+			);
+		}
+
+		return $notice;
+	}
 }

templates/frontend/inputs/cropper.php

@@ -54,7 +54,10 @@ class="btn btn-primary <?php echo esc_attr( $btn_class ); ?>"
 		>
 			<?php echo esc_html( $btn_label ); ?>
 		</a>
-		<span class="ppom-dragdrop-text"><?php echo _e( 'Drag file/directory here', 'woocommerce-product-addon' ); ?></span>
+		<span class="ppom-dragdrop-text"><?php esc_html_e( 'Drag file/directory here', 'woocommerce-product-addon' ); ?></span>
+		<span class="ppom-field-notice">
+			<?php echo esc_html( \PPOM\Support\Helpers::get_file_uploader_notice( $fm ) ); ?>
+		</span>
 	</div> <!-- ppom-file-container -->
 
 	<div id="filelist-<?php echo esc_attr( $fm->data_name() ); ?>" class="filelist"></div>

templates/frontend/inputs/file.php

@@ -52,7 +52,10 @@ class="btn btn-primary <?php echo esc_attr( $btn_class ); ?> <?php echo esc_attr
 		>
 			<?php echo esc_html( $btn_label ); ?>
 		</a>
-		<span class="ppom-dragdrop-text"><?php echo _e( 'Drag File Here', 'woocommerce-product-addon' ); ?></span>
+		<span class="ppom-dragdrop-text"><?php esc_html_e( 'Drag File Here', 'woocommerce-product-addon' ); ?></span>
+		<span class="ppom-field-notice">
+			<?php echo esc_html( \PPOM\Support\Helpers::get_file_uploader_notice( $fm ) ); ?>
+		</span>
 	</div> <!-- ppom-file-container -->
 
 	<div id="filelist-<?php echo esc_attr( $fm->data_name() ); ?>"