feat(image): await direct upload process

refs:
- 2023-09-dev-02#RB-0003

src/components/Editor/SetCover/Uploader.tsx

@@ -18,6 +18,7 @@ import {
   toast,
   Translate,
   useCreateDraft,
+  useDirectImageUpload,
   useMutation,
   useRoute,
   useUnloadConfirm,
@@ -77,6 +78,7 @@ const Uploader: React.FC<UploaderProps> = ({
     undefined,
     { showToast: false }
   )
+  const { upload: uploadImage, uploading } = useDirectImageUpload()
 
   const { isInPath } = useRoute()
   const { createDraft } = useCreateDraft()
@@ -123,9 +125,7 @@ const Uploader: React.FC<UploaderProps> = ({
       const { id: assetId, path, uploadURL } = data?.directImageUpload || {}
 
       if (assetId && path && uploadURL) {
-        const formData = new FormData()
-        formData.append('file', file)
-        await fetch(uploadURL, { method: 'POST', body: formData })
+        await uploadImage({ uploadURL, file })
 
         // (async) mark asset draft as false
         directImageUploadDone({
@@ -151,10 +151,10 @@ const Uploader: React.FC<UploaderProps> = ({
 
   const labelClasses = classNames({
     [styles.uploader]: true,
-    'u-area-disable': loading,
+    'u-area-disable': loading || uploading,
   })
 
-  useUnloadConfirm({ block: loading })
+  useUnloadConfirm({ block: loading || uploading })
 
   return (
     <label className={labelClasses} htmlFor={fieldId}>
@@ -169,7 +169,7 @@ const Uploader: React.FC<UploaderProps> = ({
           <Translate id="uploadCover" />
         </TextIcon>
 
-        {loading && <IconSpinner16 color="greyLight" />}
+        {(loading || uploading) && <IconSpinner16 color="greyLight" />}
       </h3>
 
       <p>

src/components/FileUploader/AvatarUploader/index.tsx

@@ -19,6 +19,7 @@ import {
   Spinner,
   toast,
   Translate,
+  useDirectImageUpload,
   useMutation,
 } from '~/components'
 import {
@@ -65,6 +66,8 @@ export const AvatarUploader: React.FC<AvatarUploaderProps> = ({
     undefined,
     { showToast: false }
   )
+  const { upload: uploadImage, uploading } = useDirectImageUpload()
+
   const [avatar, setAvatar] = useState<string | undefined | null>(
     avatarProps.src
   )
@@ -104,9 +107,7 @@ export const AvatarUploader: React.FC<AvatarUploaderProps> = ({
       const { id: assetId, path, uploadURL } = data?.directImageUpload || {}
 
       if (assetId && path && uploadURL) {
-        const formData = new FormData()
-        formData.append('file', file)
-        await fetch(uploadURL, { method: 'POST', body: formData })
+        await uploadImage({ uploadURL, file })
 
         // (async) mark asset draft as false
         directImageUploadDone({
@@ -144,7 +145,11 @@ export const AvatarUploader: React.FC<AvatarUploaderProps> = ({
       {isCircle && <CircleAvatar size="xxxl" {...avatarProps} src={avatar} />}
 
       <div className={styles.mask}>
-        {loading ? <Spinner /> : <IconCamera24 color="white" size="lg" />}
+        {loading || uploading ? (
+          <Spinner />
+        ) : (
+          <IconCamera24 color="white" size="lg" />
+        )}
       </div>
 
       <VisuallyHidden>

src/components/FileUploader/CoverUploader/index.tsx

@@ -18,6 +18,7 @@ import {
   Spinner,
   toast,
   Translate,
+  useDirectImageUpload,
   useMutation,
 } from '~/components'
 import {
@@ -97,6 +98,8 @@ export const CoverUploader = ({
     undefined,
     { showToast: false }
   )
+  const { upload: uploadImage, uploading } = useDirectImageUpload()
+
   const acceptTypes =
     type === 'collection'
       ? ACCEPTED_COLLECTION_UPLOAD_IMAGE_TYPES.join(',')
@@ -130,9 +133,7 @@ export const CoverUploader = ({
       const { id: assetId, path, uploadURL } = data?.directImageUpload || {}
 
       if (assetId && path && uploadURL) {
-        const formData = new FormData()
-        formData.append('file', file)
-        await fetch(uploadURL, { method: 'POST', body: formData })
+        await uploadImage({ uploadURL, file })
 
         // (async) mark asset draft as false
         directImageUploadDone({
@@ -159,7 +160,11 @@ export const CoverUploader = ({
 
   const Mask = () => (
     <div className={styles.mask}>
-      {loading ? <Spinner /> : <IconCamera24 color="white" size="xl" />}
+      {loading || uploading ? (
+        <Spinner />
+      ) : (
+        <IconCamera24 color="white" size="xl" />
+      )}
     </div>
   )
 

src/components/Hook/index.ts

@@ -5,6 +5,7 @@ export * from './useCountdown'
 export * from './useCreateDraft'
 export * from './useCuration'
 export * from './useDialogSwitch'
+export * from './useDirectImageUpload'
 export * from './useERC20'
 export * from './useEventListener'
 export * from './useFeatures'

src/components/Hook/useDirectImageUpload.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+
+export const useDirectImageUpload = () => {
+  const [uploading, setUploading] = useState(false)
+
+  const upload = async ({
+    uploadURL,
+    file,
+  }: {
+    uploadURL: string
+    file: File
+  }) => {
+    setUploading(true)
+
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+      await fetch(uploadURL, { method: 'POST', body: formData })
+      setUploading(false)
+    } catch (error) {
+      setUploading(false)
+      throw error
+    }
+  }
+
+  return { upload, uploading }
+}

src/views/Me/DraftDetail/index.tsx

@@ -19,6 +19,7 @@ import {
   Throw404,
   toast,
   useCreateDraft,
+  useDirectImageUpload,
   useRoute,
   useUnloadConfirm,
 } from '~/components'
@@ -101,6 +102,8 @@ const DraftDetail = () => {
     undefined,
     { showToast: false }
   )
+  const { upload: uploadImage } = useDirectImageUpload()
+
   const [saveStatus, setSaveStatus] = useState<
     'saved' | 'saving' | 'saveFailed'
   >()
@@ -187,9 +190,7 @@ const DraftDetail = () => {
 
       if (assetId && path && uploadURL) {
         try {
-          const data = new FormData()
-          data.append('file', input.file)
-          await fetch(uploadURL, { method: 'POST', body: data })
+          await uploadImage({ uploadURL, file: input.file })
         } catch (error) {
           console.error(error)
           throw new Error('upload not successful')