fix: Settings page picture url fix (freeCodeCamp#55673)

Author: gagan-bhullar-tech

api-server/src/server/boot/settings.js

@@ -179,7 +179,7 @@ function updateMyAbout(req, res, next) {
   // prevent dataurls from being stored
   const update = isURL(picture, { require_protocol: true })
     ? { name, location, about, picture }
-    : { name, location, about };
+    : { name, location, about, picture: '' };
   return user.updateAttributes(
     update,
     createStandardHandler(req, res, next, 'flash.updated-about-me')

api/src/routes/settings.ts

@@ -494,7 +494,7 @@ ${isLinkSentWithinLimitTTL}`
             about: req.body.about,
             name: req.body.name,
             location: req.body.location,
-            ...(hasProtocol && { picture: req.body.picture })
+            picture: hasProtocol ? req.body.picture : ''
           }
         });
 

client/src/components/settings/about.tsx

@@ -165,7 +165,11 @@ class AboutSettings extends Component<AboutProps, AboutState> {
 
   handlePictureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = (e.target as HTMLInputElement).value.slice(0);
-    if (isURL(value, { require_protocol: true })) {
+    if (!value) {
+      this.setState({
+        isPictureUrlValid: true
+      });
+    } else if (isURL(value, { require_protocol: true })) {
       this.validationImage.src = encodeURI(value);
     } else {
       this.setState({