Changeset 12086

Timestamp:

09/26/2022 09:59:32 PM (2 years ago)

Author:

coffee2code

Message:

Photo Directory, Uploads: Limit photo uploads to being between 1 and 20 MB in size.

• Add class constants for default min/max limits, and getters with filters.
• Add MAX_FILE_SIZE hidden input to upload form.
• Add client-side JS enforcement of limits.
• Add server-side enforcement of limits.

Location:

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

Files:

• assets/js/submit.js (modified) (2 diffs)
• inc/uploads.php (modified) (7 diffs)

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

@@ -24 +24 @@
     }
 
+    const photo_upload_field = document.getElementById('ug_photo');
+
+    if ( photo_upload_field ) {
+        // Add custom validation for upload file size.
+        photo_upload_field.addEventListener( 'change', e => {
+            photoShowFileSizeError( photo_upload_field );
+        } );
+    }
+
+    // Check validity of form fields on submission.
     photo_upload_form.addEventListener( 'submit', e => {
+        photoShowFileSizeError( photo_upload_field );
         if ( photo_upload_form.checkValidity() ) {
             photo_upload_submit.disabled = true;
@@ -32 +43 @@
 }
 
-photoSubmitLoaded();
+/**
+ * Checks if the file selected via the file input field object is within an
+ * acceptable file size range and sets custom validity message accordingly.
+ *
+ * An appropriate error message is defined if the file is too large or too small.
+ * If there is no file selected, or the file is of sufficient size, then any
+ * existing custom validity message is cleared.
+ *
+ * @param {Object} field - The HTML file input field object.
+ */
+function photoCheckFileSize( field ) {
+    const MAX_SIZE = PhotoDir.max_file_size; // In bytes.
+    const MIN_SIZE = PhotoDir.min_file_size; // In bytes.
+
+    const files = field.files;
+
+    if ( files.length > 0 ) {
+        const file_size = files[0].size;
+
+        // Note: If changing the error message for either case, ensure the "// Don't show error message..."
+        // regex in `photoShowFileSizeError()` still matches them both.
+        if ( file_size >= MAX_SIZE ) {
+            field.setCustomValidity( PhotoDir.err_file_too_large );
+            return;
+        } else if ( file_size <= MIN_SIZE ) {
+            field.setCustomValidity( PhotoDir.err_file_too_small );
+            return;
+        }
+    }
+
+    // No custom constraint violation.
+    field.setCustomValidity('');
+}
+
+/**
+ * Handles the display of the error message for the file upload input.
+ *
+ * If the file input field has a file selected, it is checked to see if it is
+ * too large or too small. An appropriate error message is shown in either case.
+ * If no file is selected, or the file is of sufficient size, then no error is
+ * shown and any existing error for the field is cleared.
+ *
+ * This pseudo-mimics and also works around the jQuery Validation handling that
+ * doesn't play well with custom error reporting like this.
+ *
+ * @param {Object} field - The HTML file input field object.
+ */
+function photoShowFileSizeError( field ) {
+    // Check field for file size validation errors.
+    photoCheckFileSize( field );
+
+    const errorMessage = field.validationMessage;
+    const errorId = `${field.id}-error`;
+    let errorEl = document.getElementById( errorId );
+
+    // Don't show error message for any other error.
+    if ( ! errorMessage || ! field.validity.customError || ! / MB\.$/.test( errorMessage ) ) {
+        errorEl?.remove();
+        return;
+    }
+
+    if ( ! errorEl ) {
+        errorEl = document.createElement( 'label' );
+        field.after( errorEl );
+    }
+
+    errorEl.setAttribute( 'id', errorId );
+    errorEl.setAttribute( 'class', 'custom-error' );
+    errorEl.setAttribute( 'for', field.id );
+    errorEl.removeAttribute( 'style' );
+    errorEl.innerHTML = errorMessage;
+}
+
+document.addEventListener( 'DOMContentLoaded', () => {
+    photoSubmitLoaded();
+} );

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

@@ -26 +26 @@
      */
     const MAX_PENDING_SUBMISSIONS = 5;
+
+    /**
+     * The default maximum allowed file size in megabytes.
+     *
+     * @see `get_maximum_photo_file_size()` for actually retrieving the maximum
+     * photo size, as it may be filtered.
+     * @var int|float
+     */
+    const MAX_PHOTO_FILE_SIZE = 20;
+
+    /**
+     * The default minimum allowed file size in megabytes.
+     *
+     * @see `get_minimum_photo_file_size()` for actually retrieving the minimum
+     * photo size, as it may be filtered.
+     * @var int|float
+     */
+    const MIN_PHOTO_FILE_SIZE = 1;
 
     /**
@@ -179 +197 @@
 
     /**
+     * Returns the maximum allowed file size.
+     *
+     * @param bool $in_bytes Should the value returned be in bytes instead of megabytes?
+     * @return int|float Maximum allowed file size. Returns value in bytes by default, but
+     *             will return value in megabytes if `$as_bytes` is false.
+     */
+    public static function get_maximum_photo_file_size( $as_bytes = true ) {
+        /**
+         * Filters the maximum allowed photo file size, in megabytes.
+         *
+         * @param int The maximum allowed photo file size, in megabytes.
+         */
+        $max_file_size = apply_filters( 'wporg_photos_max_photo_file_size', self::MAX_PHOTO_FILE_SIZE );
+
+        if ( $as_bytes ) {
+            $max_file_size = round( $max_file_size * 1024 * 1024 );
+        }
+
+        return $max_file_size;
+    }
+
+    /**
+     * Returns the minimum allowed file size.
+     *
+     * @param bool $in_bytes Should the value returned be in bytes instead of megabytes?
+     * @return int|float Minimum allowed file size. Returns value in bytes by default, but
+     *             will return value in megabytes if `$as_bytes` is false.
+     */
+    public static function get_minimum_photo_file_size( $as_bytes = true ) {
+        /**
+         * Filters the minimum allowed photo file size, in megabytes.
+         *
+         * @param int The minimum allowed photo file size, in megabytes.
+         */
+        $min_file_size = apply_filters( 'wporg_photos_min_photo_file_size', self::MIN_PHOTO_FILE_SIZE );
+
+        if ( $as_bytes ) {
+            $min_file_size = round( $min_file_size * 1024 * 1024 );
+        }
+
+        return $min_file_size;
+    }
+
+    /**
      * Enqueues scripts for the photo submit page.
      */
@@ -184 +246 @@
         if ( is_page( self::SUBMIT_PAGE_SLUG ) ) {
             wp_enqueue_script( 'wporg-photos-submit', plugins_url( 'assets/js/submit.js', dirname( __FILE__ ) ), [], '1', true );
+
+            wp_localize_script(
+                'wporg-photos-submit',
+                'PhotoDir',
+                [
+                    'err_file_too_large'    => sprintf(
+                        __( 'The selected file cannot be larger than %s MB.', 'wporg-photos' ),
+                        self::get_maximum_photo_file_size( false )
+                    ),
+                    'err_file_too_small'    => sprintf(
+                        __( 'The selected file must be larger than %s MB.', 'wporg-photos' ),
+                        self::get_minimum_photo_file_size( false )
+                    ),
+                    'max_file_size' => self::get_maximum_photo_file_size(),
+                    'min_file_size' => self::get_minimum_photo_file_size(),
+                ]
+            );
         }
     }
@@ -290 +369 @@
                     $rejection = __( 'Your submission appears to be a duplicate of something uploaded before.', 'wporg-photos' );
                     break;
+                case 'file-too-large':
+                    $rejection = sprintf(
+                        __( '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-small':
+                    $rejection = sprintf(
+                        __( 'The file size for your submission is too small. Please submit a photo larger than %d MB in size.', 'wporg-photos' ),
+                        self::get_minimum_photo_file_size( false )
+                    );
+                    break;
                 case 'insufficient-dimension':
                     $rejection = sprintf( __( 'Your photo must have a width and height of at least %d pixels each.', 'wporg-photos' ), self::get_minimum_photo_dimension() );
@@ -422 +513 @@
      */
     protected static function validate_upload_form() {
+        if ( ! empty( $_FILES['files']['error'][0] ) ) {
+            switch ( $_FILES['files']['error'][0] ) {
+                case UPLOAD_ERR_INI_SIZE:
+                case UPLOAD_ERR_FORM_SIZE:
+                    return 'file-too-large';
+            }
+        }
+
         if ( empty( $_FILES['files']['tmp_name'][0] ) ) {
             return 'no-file-uploaded';
@@ -428 +527 @@
         if ( ! empty( $_FILES['files']['tmp_name'] ) && count( $_FILES['files']['tmp_name'] ) > 1 ) {
             return 'too-many-files';
+        }
+
+        // Check file size.
+        if ( ! empty( $_FILES['files']['size'][0] ) ) {
+            $file_size = $_FILES['files']['size'][0];
+            // Check if file is too large.
+            //   (This is actually a fallback check in the event the MAX_FILE_SIZE
+            //   directive in the upload form is missing or has been tampered with.
+            //   Otherwise, PHP will already have invalidated a too-large upload.)
+            if ( $file_size >= self::get_maximum_photo_file_size() ) {
+                return 'file-too-large';
+            }
+            // Check if file is too small.
+            if ( $file_size <= self::get_minimum_photo_file_size() ) {
+                return 'file-too-small';
+            }
         }
 
@@ -727 +842 @@
                 $content .= '[input type="hidden" name="post_title" value=""]' . "\n";
                 $content .= sprintf(
+                    '[input type="hidden" name="MAX_FILE_SIZE" value="%s"]' . "\n",
+                    self::get_maximum_photo_file_size()
+                );
+                $content .= sprintf(
                     '[input type="file" name="ug_photo" id="ug_photo" description="%s" required="true" aria-required="true"]' . "\n",
                     esc_attr( __( 'Photo', 'wporg-photos' ) )