Changeset 12091

Timestamp:

09/26/2022 10:27:24 PM (2 years ago)

Author:

coffee2code

Message:

Photo Directory, Uploads: Enforce valid photo dimensions.

• Add client-side JS checks
• Add server-side checks

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory

Files:

• assets/js/submit.js (modified) (6 diffs)
• inc/uploads.php (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/submit.js

@@ -51 +51 @@
     photo_upload_form.addEventListener( 'submit', e => {
         e.preventDefault();
+        PhotoDir.doingSubmit = true;
 
         const photo_upload_form = e.target;
@@ -141 +142 @@
 
     let errorMessage = field.validationMessage;
-    const cssClass = PhotoDir.error_class;
+    const stillProcessing = errorMessage === PhotoDir.msg_validating_dimensions;
+    const cssClass = stillProcessing ? 'processing' : PhotoDir.error_class;
 
     if ( ! errorMessage ) {
@@ -152 +154 @@
     }
 
-    errorEl = document.createElement( 'span' );
-    errorEl.setAttribute( 'class', cssClass );
-    errorEl.innerHTML = errorMessage;
-    field.insertAdjacentElement( 'afterend', errorEl );
+    if ( PhotoDir.doingSubmit || ! stillProcessing ) {
+        errorEl = document.createElement( 'span' );
+        errorEl.setAttribute( 'class', cssClass );
+        errorEl.innerHTML = errorMessage;
+        field.insertAdjacentElement( 'afterend', errorEl );
+    }
+
+    // Show an error and end pending submission state unless still processing.
+    if ( ! stillProcessing ) {
+        PhotoDir.doingSubmit = false;
+        photoSetSubmitButtonDisabled( field.closest( 'form' ), false );
+    }
 
     return '';
@@ -179 +189 @@
     }
 
+    // Check for file dimension error.
+    if ( ! error ) {
+        // Hack: Wait for file dimensions check to complete before
+        // determining true validity. Once it has done so, it will
+        // potentially trigger submit if warranted.
+        field.setCustomValidity( PhotoDir.msg_validating_dimensions );
+        error = true;
+        photoCheckFileDimensions( field );
+    }
+
     return error;
+}
+
+/**
+ * Checks if the file selected via the file input field object is within an
+ * acceptable file dimension range and sets custom validity message accordingly.
+ *
+ * An appropriate error message is defined if the file is too long or too short.
+ * If there is no file selected, or the file is of sufficient size, then any
+ * existing custom validity message is cleared.
+ *
+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {Promise} Promise where result is true if file dimensions are invalid, else false.
+ */
+function photoCheckFileDimensions( field ) {
+    const MIN_SIZE = PhotoDir.min_file_dimension; // In px.
+    const MAX_SIZE = PhotoDir.max_file_dimension; // In px.
+
+    const files = field.files;
+
+    if ( files.length > 0 ) {
+        const reader = new FileReader();
+
+        reader.addEventListener( 'load', async (e) => {
+            const img = new Image();
+            img.src = e.target.result;
+
+            img.decode().then( () => {
+                let file_width = img.width;
+                let file_height = img.height;
+
+                if ( file_height > MAX_SIZE || file_width > MAX_SIZE ) {
+                    field.setCustomValidity( PhotoDir.err_file_too_long );
+                } else if ( file_height < MIN_SIZE || file_width < MIN_SIZE ) {
+                    field.setCustomValidity( PhotoDir.err_file_too_short );
+                } else {
+                    // No custom constraint violation.
+                    field.setCustomValidity( '' );
+                }
+
+                photoShowFileError( field );
+            } );
+        }, false );
+
+        reader.readAsDataURL( files.item( 0 ) );
+
+        // Return true. This will be rectified once the actual image dimensions are checked.
+        return true;
+    }
+
+    // No custom constraint violation.
+    field.setCustomValidity( '' );
+    return false;
 }
 
@@ -220 +292 @@
  *
  * @param {HTMLElement} field - The HTML file input field element.
- */
-function photoShowFileErrors( field ) {
+ * @return {Promise}
+ */
+async function photoShowFileErrors( field ) {
     // Checks custom file input validation. A custom validity error message gets
     // set on the field if a validation fails.
-    photoCheckFileValidations( field );
-    photoShowFileError( field );
+    photoCheckFileValidations( field ).then( () => {
+        photoShowFileError( field )
+    });
 }
 
@@ -239 +313 @@
     // Remove any existing error message.
     photoRemoveFieldError( field );
+
+    // Hack: If this gets called and everything validates, the form can be
+    // submitted.
+    const upload_form = field.closest( 'form' );
+    if ( PhotoDir.doingSubmit ) {
+        if ( upload_form.checkValidity() ) {
+            upload_form.submit();
+            return;
+        } else {
+            document.getElementById( 'wporg-photo-upload' ).scrollIntoView( true );
+            photoSetSubmitButtonDisabled( field.closest( 'form' ), false );
+        }
+    }
 
     // Return if no legitimate custom error to report.

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/uploads.php

@@ -270 +270 @@
                     'max_file_size' => self::get_maximum_photo_file_size(),
                     'min_file_size' => self::get_minimum_photo_file_size(),
+
+                    // File dimensions.
+                    'err_file_too_long'     => sprintf(
+                        /** translators: %d: The maximum number of pixels. */
+                        __( 'The selected file cannot be longer in either length or width than %dpx.', 'wporg-photos' ),
+                        self::big_image_size_threshold( 0 )
+                    ),
+                    'err_file_too_short'    => sprintf(
+                        /** translators: %d: The minimum number of pixels. */
+                        __( 'The selected file must be longer in both length and width than %dpx.', 'wporg-photos' ),
+                        self::get_minimum_photo_dimension()
+                    ),
+                    'max_file_dimension' => self::big_image_size_threshold( 0 ),
+                    'min_file_dimension' => self::get_minimum_photo_dimension(),
+                    'msg_validating_dimensions' => __( 'Validating photo dimensions…', 'wporg-photos' ),
                 ]
             );
@@ -383 +398 @@
                         __( 'The file size for your submission is too large. Please submit a photo smaller than %d MB in size.', 'wporg-photos' ),
                         self::get_maximum_photo_file_size( false )
+                    );
+                    break;
+                case 'file-too-long':
+                    $rejection = sprintf(
+                        __( 'Your submission is too large. Please submit a photo with length and width each smaller than %dpx.', 'wporg-photos' ),
+                        self::big_image_size_threshold( 0 )
+                    );
+                    break;
+                case 'file-too-short':
+                    $rejection = sprintf(
+                        __( 'Your submission is too small. Please submit a photo with length and width each larger than %dpx.', 'wporg-photos' ),
+                        self::get_minimum_photo_dimension()
                     );
                     break;
@@ -579 +606 @@
         if ( ! in_array( $image_type, [ IMG_JPG, IMG_JPEG ] ) ) {
             return 'file-not-jpg';
+        }
+
+        // Check image dimensions.
+        $max_dimension = self::big_image_size_threshold( 0 );
+        $min_dimension = self::get_minimum_photo_dimension();
+        if ( $width > $max_dimension || $length > $max_dimension ) {
+            return 'file-too-long';
+        }
+        if ( $width < $min_dimension || $length < $min_dimension ) {
+            return 'file-too-short';
         }