fix: image upload (#642)

apps/app/components/core/image-upload-modal.tsx

@@ -57,9 +57,17 @@ export const ImageUploadModal: React.FC<Props> = ({
         .uploadUserFile(formData)
         .then((res) => {
           const imageUrl = res.asset;
+
           onSuccess(imageUrl);
           setIsImageUploading(false);
           setImage(null);
+
+          if (value) {
+            const index = value.indexOf(".com");
+            const asset = value.substring(index + 5);
+
+            fileServices.deleteUserFile(asset);
+          }
         })
         .catch((err) => {
           console.error(err);
@@ -72,6 +80,13 @@ export const ImageUploadModal: React.FC<Props> = ({
           onSuccess(imageUrl);
           setIsImageUploading(false);
           setImage(null);
+
+          if (value) {
+            const index = value.indexOf(".com");
+            const asset = value.substring(index + 5);
+
+            fileServices.deleteFile(asset);
+          }
         })
         .catch((err) => {
           console.error(err);
@@ -157,7 +172,11 @@ export const ImageUploadModal: React.FC<Props> = ({
                 </div>
                 <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <PrimaryButton onClick={handleSubmit} loading={isImageUploading || !image}>
+                  <PrimaryButton
+                    onClick={handleSubmit}
+                    disabled={!image}
+                    loading={isImageUploading}
+                  >
                     {isImageUploading ? "Uploading..." : "Upload & Save"}
                   </PrimaryButton>
                 </div>

apps/app/pages/[workspaceSlug]/me/profile/index.tsx

@@ -79,13 +79,13 @@ const Profile: NextPage = () => {
           message: "Profile updated successfully.",
         });
       })
-      .catch(() => {
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "There was some error in updating your profile. Please try again.",
-        });
+        })
-      });
+      );
   };
 
   const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => {
@@ -101,7 +101,6 @@ const Profile: NextPage = () => {
         userService
           .updateUser({ avatar: "" })
           .then((res) => {
-            setIsRemoving(false);
             setToastAlert({
               type: "success",
               title: "Success!",
@@ -113,13 +112,13 @@ const Profile: NextPage = () => {
             }, false);
           })
           .catch(() => {
-            setIsRemoving(false);
             setToastAlert({
               type: "error",
               title: "Error!",
               message: "There was some error in deleting your profile picture. Please try again.",
             });
-          });
+          })
+          .finally(() => setIsRemoving(false));
     });
   };
 
@@ -140,7 +139,6 @@ const Profile: NextPage = () => {
         isOpen={isImageUploadModalOpen}
         onClose={() => setIsImageUploadModalOpen(false)}
         onSuccess={(url) => {
-          handleDelete(myProfile?.avatar);
           setValue("avatar", url);
           handleSubmit(onSubmit)();
           setIsImageUploadModalOpen(false);

apps/app/pages/[workspaceSlug]/settings/index.tsx

@@ -124,7 +124,6 @@ const WorkspaceSettings: NextPage<UserAuth> = (props) => {
         onClose={() => setIsImageUploadModalOpen(false)}
         onSuccess={(imageUrl) => {
           setIsImageUploading(true);
-          handleDelete(activeWorkspace?.logo);
           setValue("logo", imageUrl);
           setIsImageUploadModalOpen(false);
           handleSubmit(onSubmit)().then(() => setIsImageUploading(false));