fix failure to upload large avatar

css/base.css

@@ -810,7 +810,7 @@ i.search {
   position: relative;
   display: none;
   overflow: hidden;
-  padding: 1rem 1.5rem 1rem 0.5rem;
+  padding: 1rem 1.5rem 0.75rem 0.5rem;
 }
 
 .info-box > span {

src/lib/blob-helpers.js

@@ -90,7 +90,7 @@ export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquar
       URL.revokeObjectURL(img.src);
 
       // Calculate the desired image dimensions.
-      const dim = fitImageSize(this.width, this.height, maxWidth, maxHeight, forceSquare);
+      const dim = fitImageSize(img.width, img.height, maxWidth, maxHeight, forceSquare);
       if (!dim) {
         reject(new Error("Invalid image"));
         return;
@@ -100,7 +100,7 @@ export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquar
       canvas.height = dim.dstHeight;
       let ctx = canvas.getContext('2d');
       ctx.imageSmoothingEnabled = true;
-      ctx.drawImage(this, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
+      ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
         0, 0, dim.dstWidth, dim.dstHeight);
 
       const mime = SUPPORTED_IMAGE_FORMATS.includes(fileOrBlob.type) ? fileOrBlob.type : 'image/jpeg';
@@ -110,7 +110,6 @@ export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquar
         reject(new Error("Unsupported image format"));
         return;
       }
-
       // Ensure the image is not too large. Shrink the image keeping the aspect ratio.
       // Do nothing if maxsize is <= 0.
       while (maxSize > 0 && blob.length > maxSize) {
@@ -120,7 +119,7 @@ export function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquar
         canvas.height = dim.dstHeight;
         ctx = canvas.getContext('2d');
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(this, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
+        ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
           0, 0, dim.dstWidth, dim.dstHeight);
         blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
       }
@@ -151,7 +150,7 @@ export function imageCrop(mime, objURL, left, top, width, height, scale) {
       canvas.height = height * scale;
       let ctx = canvas.getContext('2d');
       ctx.imageSmoothingEnabled = true;
-      ctx.drawImage(this, left, top, width, height, 0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, left, top, width, height, 0, 0, canvas.width, canvas.height);
 
       mime = SUPPORTED_IMAGE_FORMATS.includes(mime) ? mime : 'image/jpeg';
       // Generate blob to check size of the image.

src/widgets/topic-desc-edit.jsx

@@ -141,10 +141,8 @@ export default class TopicDescEdit extends React.Component {
     if (width > AVATAR_SIZE || height > AVATAR_SIZE || width != height) {
       // Avatar is not square or too large even after cropping. Shrink it and make square.
       imageScaled(blob, AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true)
-        .then(scaled => readyToUpload)
+        .then(scaled => readyToUpload(scaled))
-        .catch(err => {
+        .catch(err => this.props.onError(err, 'err'));
-          this.props.onError(err, 'err');
-        });
     } else {
       readyToUpload({mime: mime, blob: blob, width: width, height: height});
     }

umd/index.dev.js

@@ -191,7 +191,7 @@ function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquare) {
 
     img.onload = async function () {
       URL.revokeObjectURL(img.src);
-      const dim = fitImageSize(this.width, this.height, maxWidth, maxHeight, forceSquare);
+      const dim = fitImageSize(img.width, img.height, maxWidth, maxHeight, forceSquare);
 
       if (!dim) {
         reject(new Error("Invalid image"));
@@ -203,7 +203,7 @@ function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquare) {
       canvas.height = dim.dstHeight;
       let ctx = canvas.getContext('2d');
       ctx.imageSmoothingEnabled = true;
-      ctx.drawImage(this, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight, 0, 0, dim.dstWidth, dim.dstHeight);
+      ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight, 0, 0, dim.dstWidth, dim.dstHeight);
       const mime = SUPPORTED_IMAGE_FORMATS.includes(fileOrBlob.type) ? fileOrBlob.type : 'image/jpeg';
       let blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
 
@@ -219,7 +219,7 @@ function imageScaled(fileOrBlob, maxWidth, maxHeight, maxSize, forceSquare) {
         canvas.height = dim.dstHeight;
         ctx = canvas.getContext('2d');
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(this, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight, 0, 0, dim.dstWidth, dim.dstHeight);
+        ctx.drawImage(img, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight, 0, 0, dim.dstWidth, dim.dstHeight);
         blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
       }
 
@@ -252,7 +252,7 @@ function imageCrop(mime, objURL, left, top, width, height, scale) {
       canvas.height = height * scale;
       let ctx = canvas.getContext('2d');
       ctx.imageSmoothingEnabled = true;
-      ctx.drawImage(this, left, top, width, height, 0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, left, top, width, height, 0, 0, canvas.width, canvas.height);
       mime = SUPPORTED_IMAGE_FORMATS.includes(mime) ? mime : 'image/jpeg';
       canvas.toBlob(blob => {
         canvas = null;
@@ -12652,9 +12652,7 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
     };
 
     if (width > _config_js__WEBPACK_IMPORTED_MODULE_7__.AVATAR_SIZE || height > _config_js__WEBPACK_IMPORTED_MODULE_7__.AVATAR_SIZE || width != height) {
-      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_7__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_7__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_7__.MAX_EXTERN_ATTACHMENT_SIZE, true).then(scaled => readyToUpload).catch(err => {
+      (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_8__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_7__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_7__.AVATAR_SIZE, _config_js__WEBPACK_IMPORTED_MODULE_7__.MAX_EXTERN_ATTACHMENT_SIZE, true).then(scaled => readyToUpload(scaled)).catch(err => this.props.onError(err, 'err'));
-        this.props.onError(err, 'err');
-      });
     } else {
       readyToUpload({
         mime: mime,