diff --git a/phpBB/assets/javascript/phpbb-avatars.js b/phpBB/assets/javascript/phpbb-avatars.js index 7bdaa067ca..dfb1bc1f92 100644 --- a/phpBB/assets/javascript/phpbb-avatars.js +++ b/phpBB/assets/javascript/phpbb-avatars.js @@ -11,6 +11,9 @@ cropper: null, image: null, + /** @type {jQuery} */ + $form: null, + /** @type {jQuery} */ $buttons: $('#avatar-cropper-buttons'), @@ -45,6 +48,7 @@ this.bindInput(); this.bindSelect(); + this.bindSubmit(); }, /** @@ -53,9 +57,11 @@ destroy() { this.$buttons.find('[data-cropper-action]').off('click.phpbb.avatars'); this.image.off('crop.phpbb.avatars'); + this.$form.off('submit'); this.$data.val(''); this.$buttons.hide(); + this.$box.removeClass('c-cropper-avatar-box'); if (this.cropper !== null) { this.cropper.destroy(); @@ -95,6 +101,7 @@ fileReader.addEventListener('load', function() { phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar'); + phpbb.avatars.$box.addClass('c-cropper-avatar-box'); phpbb.avatars.initCropper(); phpbb.avatars.initButtons(); }); @@ -104,6 +111,73 @@ }); }, + bindSubmit() { + const $this = this; + $this.$form = this.$input.closest('form'); + $this.$form.on('submit', () => { + const data = phpbb.avatars.$data.data(); + + phpbb.avatars.cropper.getCroppedCanvas({ + width: data.maxWidth, + height: data.maxHeight, + maxWidth: 4096, // High values for max quality cropping + maxHeight: 4096, // High values for max quality cropping + imageSmoothingEnabled: false, + imageSmoothingQuality: 'high', + }).toBlob(blob => { + const formData = new FormData($this.$form[0]); + formData.set('avatar_upload_file', blob, $this.getUploadFileName()); + formData.set('submit', '1'); + + $.ajax({ + url: $this.$form.attr('action'), + type: 'POST', + data: formData, + processData: false, + contentType: false, + success: $this.uploadDone, + error: () => { + console.log('Upload error'); + }, + }).done($this.uploadDone); + }, 'image/png', 1); + + return false; + }); + }, + + /** + * Get upload filename for the blob data + * + * As the blob data is always in png format, we'll replace the file + * extension in the upload name with one that ends with .png + * + * @return {string} Upload file name + */ + getUploadFileName() { + const originalName = this.$input[0].files[0].name; + + return originalName.replace(/\.[^/\\.]+$/, '.png'); + }, + + uploadDone(response) { + if (typeof response !== 'object') { + return; + } + + // trigger_error() was called which likely means a permission error was encountered. + if (typeof response.title !== 'undefined') { + return; + } + + // Handle errors while deleting file + if (typeof response.error !== 'undefined') { + phpbb.alert(response.error.title, response.error.message); + } + + phpbb.avatars.destroy(); + }, + /** * Bind a function to all the cropper