<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[12090] sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory: Photo Directory, Uploads: Rework photo submission handler to eliminate use of jQuery Validation (as provided through FU).</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/12090">12090</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/12090","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>coffee2code</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-09-26 22:23:13 +0000 (Mon, 26 Sep 2022)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Photo Directory, Uploads: Rework photo submission handler to eliminate use of jQuery Validation (as provided through FU).
- Disable jQuery Validation of any field
- Natively report on required fields submitted without value
- Add JS `photoShowFileErrors()` to aggregate what will be multiple checks on file input value
- Pass error class name from PHP</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsphotodirectoryassetsjssubmitjs">sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/submit.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsphotodirectoryincuploadsphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/uploads.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsphotodirectoryassetsjssubmitjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/submit.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/submit.js 2022-09-26 22:17:53 UTC (rev 12089)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/submit.js 2022-09-26 22:23:13 UTC (rev 12090)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,7 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function photoSubmitLoaded() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Initializes things related to the photo upload form.
+ */
+function photoSubmitInit() {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Remove query parameters added by Frontend Uploader.
</span><span class="cx" style="display: block; padding: 0 10px"> const photo_upload_url = new URL(document.location);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,27 +31,157 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( photo_upload_field ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Add custom validation for upload file size.
</span><span class="cx" style="display: block; padding: 0 10px"> photo_upload_field.addEventListener( 'change', e => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- photoShowFileSizeError( photo_upload_field );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ photoShowFileErrors( photo_upload_field );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Customize jQuery Validator, if still in use.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Disable jQuery Validation, if still in use.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( window.jQuery && window.jQuery.validator ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Customize error message for invalid file mimetype.
- jQuery.validator.messages.accept = PhotoDir.err_invalid_mimetype;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ jQuery( photo_upload_form ).validate().settings.ignore = "*";
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Show/remove error when any form field value is changed.
+ photoGetInputFields( photo_upload_form ).forEach( (input, i) => {
+ input.addEventListener( 'change', e => {
+ photoRemoveFieldError( e.target );
+ } );
+ } );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Check validity of form fields on submission.
</span><span class="cx" style="display: block; padding: 0 10px"> photo_upload_form.addEventListener( 'submit', e => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- photoShowFileSizeError( photo_upload_field );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ e.preventDefault();
+
+ const photo_upload_form = e.target;
+ const photo_upload_input = document.getElementById( 'ug_photo' );
+
+ // Clear any server notices from a previous submit.
+ document.querySelector( '.ugc-notice' )?.remove();
+
+ // Disable submit button.
+ photoSetSubmitButtonDisabled( photo_upload_form, true );
+
+ // Show errors for fields that aren't the file input.
+ photoShowFieldErrors( photo_upload_form );
+
+ // Show errors for file input field.
+ photoShowFileErrors( photo_upload_input );
+
+ // Scroll top of form into view.
+ document.getElementById( 'wporg-photo-upload' ).scrollIntoView( true );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( photo_upload_form.checkValidity() ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- photo_upload_submit.disabled = true;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ photo_upload_form.submit();
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ return false;
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Returns the input fields of interest for generic validation.
+ *
+ * Fields that have custom validation should be listed here as exclusions.
+ *
+ * @param {HTMLElement} form - The form.
+ * @returns {HTMLElement[]} Array of input fields.
+ */
+function photoGetInputFields( form ) {
+ return form.querySelectorAll( 'input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"])');
+}
+
+/**
+ * Sets the 'disabled' attribute for the submit button of a form.
+ *
+ * @param {HTMLElement} form - The form element.
+ * @param {Boolean} state - True if the button should be disabled, else false.
+ */
+function photoSetSubmitButtonDisabled( form, state ) {
+ const submitButton = form.querySelector('input[type="submit"]');
+
+ submitButton.disabled = !!state;
+}
+
+/**
+ * Shows errors for invalid input fields and remove previously reported errors
+ * for valid input fields.
+ *
+ * Does not handle input that are:
+ * - hidden
+ * - buttons
+ * - file
+ *
+ * @param {HTMLElement} form - A form.
+ */
+function photoShowFieldErrors( form ) {
+ photoGetInputFields( form ).forEach( (input, i) => {
+ photoShowFieldError( input );
+ } );
+}
+
+/**
+ * Removes an error message for the given input.
+ *
+ * @param {HTMLElement} field - An input field.
+ */
+function photoRemoveFieldError( field ) {
+ field.parentNode.querySelectorAll( '.' + PhotoDir.error_class ).forEach( errorEl => errorEl.remove() );
+ field.parentNode.querySelectorAll( '.processing' ).forEach( errorEl => errorEl.remove() );
+}
+
+/**
+ * Shows the error if the input field is invalid, or removes a previously
+ * reported error if the input field is valid.
+ *
+ * @param {HTMLElement} field - An input field.
+ * @returns {String} Error message, if any.
+ */
+function photoShowFieldError( field ) {
+ photoRemoveFieldError( field );
+
+ let errorMessage = field.validationMessage;
+ const cssClass = PhotoDir.error_class;
+
+ if ( ! errorMessage ) {
+ return '';
+ }
+
+ // Set custom error messages.
+ if ( field.validity.valueMissing ) {
+ errorMessage = PhotoDir.err_field_required;
+ }
+
+ errorEl = document.createElement( 'span' );
+ errorEl.setAttribute( 'class', cssClass );
+ errorEl.innerHTML = errorMessage;
+ field.insertAdjacentElement( 'afterend', errorEl );
+
+ return '';
+}
+
+/**
+ * Validates a file upload against multiple criteria.
+ *
+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {Boolean} True if an error was encountered, else false.
+ */
+async function photoCheckFileValidations( field ) {
+ let error = false;
+
+ // Check if no file chosen.
+ if ( ! error ) {
+ error = field.validity.valueMissing;
+ }
+
+ // Check for file size error.
+ if ( ! error ) {
+ error = photoCheckFileSize( field );
+ }
+
+ return error;
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Checks if the file selected via the file input field object is within an
</span><span class="cx" style="display: block; padding: 0 10px"> * acceptable file size range and sets custom validity message accordingly.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -56,7 +189,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * If there is no file selected, or the file is of sufficient size, then any
</span><span class="cx" style="display: block; padding: 0 10px"> * existing custom validity message is cleared.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {Object} field - The HTML file input field object.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {Boolean} True if file size is invalid, else false.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function photoCheckFileSize( field ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const MAX_SIZE = PhotoDir.max_file_size; // In bytes.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -67,60 +201,52 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( files.length > 0 ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const file_size = files[0].size;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Note: If changing the error message for either case, ensure the "// Don't show error message..."
- // regex in `photoShowFileSizeError()` still matches them both.
</del><span class="cx" style="display: block; padding: 0 10px"> if ( file_size >= MAX_SIZE ) {
</span><span class="cx" style="display: block; padding: 0 10px"> field.setCustomValidity( PhotoDir.err_file_too_large );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return true;
</ins><span class="cx" style="display: block; padding: 0 10px"> } else if ( file_size <= MIN_SIZE ) {
</span><span class="cx" style="display: block; padding: 0 10px"> field.setCustomValidity( PhotoDir.err_file_too_small );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return true;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // No custom constraint violation.
</span><span class="cx" style="display: block; padding: 0 10px"> field.setCustomValidity('');
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return false;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Shows error messages for the file upload input.
+ *
+ * @param {HTMLElement} field - The HTML file input field element.
+ */
+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 );
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Handles the display of the error message for the file upload input.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * 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.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {boolean} True if no error was shown, false if error was shown.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function photoShowFileSizeError( field ) {
- // Check field for file size validation errors.
- photoCheckFileSize( field );
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function photoShowFileError( field ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> const errorMessage = field.validationMessage;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const errorId = `${field.id}-error`;
- let errorEl = document.getElementById( errorId );
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Don't show error message for any other error.
- if ( ! errorMessage || ! field.validity.customError || ! / MB\.$/.test( errorMessage ) ) {
- errorEl?.remove();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Remove any existing error message.
+ photoRemoveFieldError( field );
+
+ // Return if no legitimate custom error to report.
+ if ( ! errorMessage ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ photoShowFieldError( field );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> document.addEventListener( 'DOMContentLoaded', () => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- photoSubmitLoaded();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ photoSubmitInit();
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsphotodirectoryincuploadsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/uploads.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/uploads.php 2022-09-26 22:17:53 UTC (rev 12089)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/uploads.php 2022-09-26 22:23:13 UTC (rev 12090)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -250,6 +250,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'wporg-photos-submit',
</span><span class="cx" style="display: block; padding: 0 10px"> 'PhotoDir',
</span><span class="cx" style="display: block; padding: 0 10px"> [
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'error_class' => 'error',
+
+ // Field required.
+ 'err_field_required' => __( 'This field is required.', 'wporg-photos' ),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // File extension.
</span><span class="cx" style="display: block; padding: 0 10px"> 'err_invalid_mimetype' => __( 'Please select a JPEG image.', 'wporg-photos' ),
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre>
</div>
</div>
</body>
</html>