From a25966ee37e9e75907ce5849a00b4b0e25b91d6b Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 25 Oct 2023 09:58:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Support=20uploading=20multiple?=
 =?UTF-8?q?=20files=20in=20Step1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadForm.vue | 358 +++++++++++++++++-----------------
 components/Previewer.vue      |   9 +-
 locales/en.json               |   2 +-
 pages/new/index.vue           |  89 ++++-----
 4 files changed, 224 insertions(+), 234 deletions(-)

diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index c15a222f..70964c17 100644
--- a/components/IscnUploadForm.vue
+++ b/components/IscnUploadForm.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-      <Card class="p-[32px]" :has-padding="false">
-        <!-- header -->
-        <IscnFormHeader :step="step" :total-step="4"/>
-        <!-- guide text -->
-        <Label
-          :text="$t('UploadForm.guide.selectFile')"
-          class="text-medium-gray my-[12px]"
-        />
-        <!-- upload field__upload -->
-        <form @submit.prevent="onSubmit">
+    <Card class="p-[32px]" :has-padding="false">
+      <!-- header -->
+      <IscnFormHeader :step="step" :total-step="4" />
+      <!-- guide text -->
+      <Label
+        :text="$t('UploadForm.guide.selectFile')"
+        class="text-medium-gray my-[12px]"
+      />
+      <!-- upload field__upload -->
+      <form @submit.prevent="onSubmit">
+        <div class="flex gap-[12px]">
           <form
-            v-if="!ipfsHash"
             :class="formClasses"
             @drop.prevent="onFileUpload"
             @dragover.prevent="
@@ -38,114 +38,110 @@
               ref="imageFile"
               class="hidden"
               type="file"
+              multiple
               @change="onFileUpload"
             />
           </form>
-          <!-- upload field__Submit  -->
-          <div v-else :class="formClasses">
-            <div class="flex">
-              <Previewer
-                :is-image="isImage"
-                :file-data="fileData"
-              />
-              <div
-                :class="[
-                  'flex',
-                  'flex-col',
-                  'items-stretch',
-                  'justify-start',
-                ]"
-              >
-                <Label
-                  :text="fileName"
-                  :class="[
-                    'font-semibold',
-                    'text-dark-gray',
-                  ]"
-                />
-                <Label
-                  :text="size"
-                  :class="[
-                    'font-normal',
-                    'text-medium-gray',
-                    'my-[8px]',
-                  ]"
-                />
-                <Button
-                  v-if="exifInfo"
-                  class="w-min"
-                  type="button"
-                  :text="$t('UploadForm.view.file.button')"
-                  preset="outline"
-                  @click="isOpenFileInfoDialog = true"
+          <!-- uploaded file list -->
+          <div v-if="fileRecords.length" class="flex flex-col items-center w-full">
+            <table class="w-full">
+              <tbody class="w-full">
+                <tr
+                  v-for="(
+                    { isFileImage, fileData, fileName, fileSize },
+                    index
+                  ) of fileRecords"
+                  :key="fileName"
+                  class="border-b-shade-gray border-b-[1px] text-dark-gray hover:bg-light-gray transition-colors w-full"
                 >
-                  <template #prepend>
-                    <IconInfo />
-                  </template>
-                </Button>
-              </div>
-            </div>
-            <div
-              :class="[
-                'mr-[24px]',
-                'cursor-pointer',
-              ]"
-              @click="handleInitFile"
-            >
-              <IconDelete />
-            </div>
-          </div>
-          <div class="flex gap-[8px] justify-end text-medium-gray">
-            <NuxtLink
-              :class="[
-                'text-[12px]',
-                'underline',
-              ]"
-              :to="localeLocation({ name: 'nft-url' })"
-            >
-              {{ $t('UploadForm.button.mintUrl') }}
-            </NuxtLink>
-          </div>
-          <!-- Publish btn -->
-          <div class="flex gap-[8px] justify-end pt-[24px] text-medium-gray">
-            <Button
-              :preset="submitBtnClasses"
-              @click="onSkipUpload"
-              >{{ $t('UploadForm.button.skip') }}
-            </Button>
-            <Button
-              type="submit"
-              :preset="submitBtnClasses"
-              :is-disabled="!ipfsHash"
-              >{{ $t('UploadForm.button') }}
-              <template #append>
-                <IconArrowRight />
-              </template>
-            </Button>
+                  <td class="py-[4px]">
+                    <Previewer
+                      :is-image="isFileImage"
+                      :file-data="fileData"
+                      size="small"
+                    />
+                  </td>
+                  <td class="py-[4px]">
+                    <div
+                      :class="[
+                        'flex',
+                        'flex-col',
+                        'items-stretch',
+                        'justify-start',
+                      ]"
+                    >
+                      <Label
+                        :text="fileName"
+                        preset="h5"
+                        :class="['font-semibold', 'text-dark-gray']"
+                      />
+                      <Label
+                        :text="`${Math.round(fileSize * 0.001)} KB`"
+                        preset="h6"
+                        :class="['font-normal', 'text-medium-gray', 'mt-[8px]']"
+                      />
+                    </div>
+                  </td>
+                  <td class="py-[4px]">
+                    <div
+                      :class="['mr-[8px]', 'cursor-pointer']"
+                      @click="handleDeleteFile(index)"
+                    >
+                      <IconDelete />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </form>
-        <!-- Dialog -->
-        <Dialog
-          v-model="isOpenFileInfoDialog"
-          :has-padding="false"
-          preset="custom"
-        >
-          <MetadataCard
-            :class="[
-              'w-[616px]',
-              'max-h-[75vh]',
-              'overflow-y-scroll',
-              'scrollbar-hidden',
-            ]"
-            :img-src="fileData"
-            :all-exif="exifInfo"
-          />
-        </Dialog>
-      </Card>
+        </div>
+        <!-- upload field__Submit  -->
+        <div class="flex gap-[8px] justify-end text-medium-gray mt-[24px]">
+          <NuxtLink
+            :class="['text-[12px]', 'underline']"
+            :to="localeLocation({ name: 'nft-url' })"
+          >
+            {{ $t('UploadForm.button.mintUrl') }}
+          </NuxtLink>
+        </div>
+        <!-- Publish btn -->
+        <div class="flex gap-[8px] justify-end mt-[12px] text-medium-gray">
+          <Button preset="outline" @click="onSkipUpload"
+            >{{ $t('UploadForm.button.skip') }}
+          </Button>
+          <Button
+            type="submit"
+            :preset="submitBtnClasses"
+            :is-disabled="!fileRecords.length || isSizeExceeded"
+            >{{ $t('UploadForm.button') }}
+            <template #append>
+              <IconArrowRight />
+            </template>
+          </Button>
+        </div>
+      </form>
+      <!-- Dialog -->
+      <Dialog
+        v-model="isOpenFileInfoDialog"
+        :has-padding="false"
+        preset="custom"
+      >
+        <MetadataCard
+          :class="[
+            'w-[616px]',
+            'max-h-[75vh]',
+            'overflow-y-scroll',
+            'scrollbar-hidden',
+          ]"
+          :img-src="fileData"
+          :all-exif="exifInfo"
+        />
+      </Dialog>
+    </Card>
     <AttentionsLedger />
     <Snackbar
       v-model="isSizeExceeded"
-      :text="$t('UploadForm.warning')"
+      :text="$t('UploadForm.warning',{ size: Math.round(uploadSizeLimit / (1024*1024)) })"
       preset="warn"
     />
   </div>
@@ -179,17 +175,23 @@ export default class UploadForm extends Vue {
   fileSize: number = 0
   fileType: string = ''
 
+  fileRecords: any[] = []
+
   isOpenFileInfoDialog = false
   isSizeExceeded = false
 
+  uploadSizeLimit: number = UPLOAD_FILESIZE_MAX
+
   get formClasses() {
     return [
       'flex',
-      'w-[584px]',
+      'w-full',
+      'h-[196px]',
+      { 'max-w-[320px]': this.fileRecords.length},
+      'flex-col',
+      'justify-center',
       {
-        'flex-row justify-start': this.ipfsHash,
-        'h-[196px] flex-col justify-center': !this.ipfsHash,
-        'bg-transparent' : this.isSizeExceeded,
+        'bg-transparent': this.isSizeExceeded,
       },
       'items-center',
       'justify-between',
@@ -203,10 +205,8 @@ export default class UploadForm extends Vue {
     ]
   }
 
-  // eslint-disable-next-line class-methods-use-this
-
   get submitBtnClasses() {
-    return this.ipfsHash ? 'secondary' : 'outline'
+    return this.fileRecords.length ? 'secondary' : 'outline'
   }
 
   get size() {
@@ -214,56 +214,73 @@ export default class UploadForm extends Vue {
   }
 
   async onFileUpload(event: DragEvent) {
-    logTrackerEvent(this, 'ISCNCreate', 'SelectFile', '', 1);
+    logTrackerEvent(this, 'ISCNCreate', 'SelectFile', '', 1)
+    this.isSizeExceeded = false
     let files = null
     if (event.dataTransfer) {
       ;({ files } = event.dataTransfer)
     } else if (event.target) {
       ;({ files } = event.target as HTMLInputElement)
     }
+    if (event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.classList.remove('bg-shade-gray')
+    }
 
-    if (files && files[0]) {
-      const reader = new FileReader()
-      if (files[0].size < UPLOAD_FILESIZE_MAX) {
-        this.fileName = files[0].name
-        this.fileSize = files[0].size
-        this.fileType = `${files[0].type}`
-        reader.onload = (e) => {
-          if (!e.target) return
-          this.fileData = e.target.result as string
-        }
-        reader.readAsDataURL(files[0])
-        const fileBytes = (await fileToArrayBuffer(files[0])) as ArrayBuffer
-        if (fileBytes) {
-          const [
-            fileSHA256,
-            imageType,
-            ipfsHash,
-          ] = await Promise.all([
-            digestFileSHA256(fileBytes),
-            readImageType(fileBytes),
-            Hash.of(Buffer.from(fileBytes)),
-          ])
-          this.ipfsHash = ipfsHash
-          this.fileSHA256 = fileSHA256
-          this.isImage = !!imageType
-          // eslint-disable-next-line prefer-destructuring
-          this.fileBlob = files[0]
-          if (this.isImage) {
-            try {
-              this.exifInfo = await exifr.parse(files[0])
-            } catch (err) {
-              // eslint-disable-next-line no-console
-              console.error(err)
-              this.exifInfo = null
+    if (files && files.length) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const file of Array.from(files)) {
+        const reader = new FileReader()
+        let fileRecord: any = {}
+
+        if (file.size < UPLOAD_FILESIZE_MAX) {
+          reader.onload = (e) => {
+            if (!e.target) return
+            fileRecord.fileData = e.target.result as string
+          }
+          reader.readAsDataURL(file)
+
+          // eslint-disable-next-line no-await-in-loop
+          const fileBytes = (await fileToArrayBuffer(
+            file,
+          )) as unknown as ArrayBuffer
+          if (fileBytes) {
+            const [
+              fileSHA256,
+              imageType,
+              ipfsHash,
+              // eslint-disable-next-line no-await-in-loop
+            ] = await Promise.all([
+              digestFileSHA256(fileBytes),
+              readImageType(fileBytes),
+              Hash.of(Buffer.from(fileBytes)),
+            ])
+
+            fileRecord = {
+              ...fileRecord,
+              fileName: file.name,
+              fileSize: file.size,
+              fileType: file.type,
+              ipfsHash,
+              fileSHA256,
+              isFileImage: !!imageType,
+              fileBlob: file,
+              exifInfo: null, // default value, to be potentially updated below
+            }
+
+            if (imageType) {
+              try {
+                // eslint-disable-next-line no-await-in-loop
+                fileRecord.exifInfo = await exifr.parse(file)
+              } catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(err)
+              }
             }
-          } else {
-            this.exifInfo = null
           }
+        } else {
+          this.isSizeExceeded = true
         }
-      } else {
-        this.isSizeExceeded = true
-        this.handleInitFile()
+        this.fileRecords.push(fileRecord)
       }
     }
   }
@@ -289,29 +306,12 @@ export default class UploadForm extends Vue {
   }
 
   onSubmit() {
-    if (IS_CHAIN_UPGRADING) return;
-    this.$emit('submit', {
-      ipfsHash: this.ipfsHash,
-      fileData: this.fileData,
-      fileSHA256: this.fileSHA256,
-      fileBlob: this.fileBlob,
-      fileSize: this.size,
-      fileType: this.fileType,
-      isImage: this.isImage,
-      exifInfo: this.exifInfo,
-    })
+    if (IS_CHAIN_UPGRADING) return
+    this.$emit('submit', this.fileRecords)
   }
 
-  handleInitFile() {
-    this.isImage = false
-    this.ipfsURL = ''
-    this.ipfsHash = ''
-    this.fileData = ''
-    this.fileSHA256 = ''
-    this.fileBlob = null
-    this.exifInfo = null
-    this.fileName = ''
-    this.fileSize = 0
+  handleDeleteFile(index: number) {
+    this.fileRecords.splice(index, 1)
   }
 }
 </script>
diff --git a/components/Previewer.vue b/components/Previewer.vue
index d1a69804..b493ebbf 100644
--- a/components/Previewer.vue
+++ b/components/Previewer.vue
@@ -3,16 +3,18 @@
     :class="[
       'flex',
       'justify-center',
-      'w-[138px]',
+      { 'w-[138px]': size === 'large' },
+      { 'w-[48px]': size === 'small' },
       'mr-[16px]',
+      'overflow-hidden'
     ]"
   >
     <img
       v-if="isImage"
       :class="[
         'w-full',
-        'max-h-[150px]',
-        'object-cover',
+        'h-auto',
+        'object-contain',
         'rounded-[8px]',
       ]"
       :src="fileData"
@@ -28,5 +30,6 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 export default class Previewer extends Vue {
   @Prop({ default: false }) readonly isImage!: boolean
   @Prop(String) readonly fileData: string | undefined
+  @Prop({ default: 'large' }) readonly size: string | undefined
 }
 </script>
diff --git a/locales/en.json b/locales/en.json
index 0cedbeb2..98ea197a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -360,7 +360,7 @@
   "UploadForm.title.registerISCN": "Register ISCN",
   "UploadForm.url.placeholder": "Use existing IPFS content",
   "UploadForm.view.file.button": "View File Info",
-  "UploadForm.warning": "Oops, file is too large. The file size should not exceed 100MB",
+  "UploadForm.warning": "Oops, file is too large. The file size should not exceed {size}MB",
   "WorksPage.empty.label": "No works",
   "WorksPage.label.search.result": "Search result for :",
   "WorksPage.label.portfolio": "View my Writing NFT Portfolio",
diff --git a/pages/new/index.vue b/pages/new/index.vue
index e361c055..d2bb633e 100644
--- a/pages/new/index.vue
+++ b/pages/new/index.vue
@@ -35,20 +35,16 @@
     />
     <IscnRegisterForm
       v-else-if="state === 'iscn'"
-      :ipfs-hash="ipfsHash"
+      :file-records="formattedFileRecords"
+
+      :ipfs-hash="urlIpfsHash"
       :arweave-id="arweaveId"
-      :file-data="fileData"
-      :file-type="fileType"
-      :file-size="fileSize"
-      :file-s-h-a256="fileSHA256"
-      :file-blob="fileBlob"
-      :is-image="isImage"
+
       :is-upload-only="isUploadOnly"
-      :exif-info="exifInfo"
       :step="step"
       @arweaveUploaded="onArweaveIdUpdate"
       @txBroadcasted="onISCNTxInfo"
-      @fileUploaded="onFileOnlyUpload"
+      @fileUploaded="fileUploaded"
       @handleSubmit="isSubmit = true"
       @handleQuit="isSubmit = false"
     />
@@ -121,7 +117,7 @@ export default class NewIndexPage extends Vue {
   ) => ISCNRecordWithID[] | PromiseLike<ISCNRecordWithID[]>
 
   state = 'init'
-  ipfsHash = this.$route.query.ipfs_hash || ''
+  urlIpfsHash = this.$route.query.ipfs_hash || ''
   arweaveId = this.$route.query.arweave_id || ''
   isUploadOnly = this.$route.query.upload_only === '1'
   fileSHA256 = ''
@@ -131,12 +127,15 @@ export default class NewIndexPage extends Vue {
   iscnId = ''
   iscnTxHash = ''
   iscnTimestamp = ''
-  isImage = false
+  isFileImage = false
   fileBlob: Blob | null = null
   exifInfo: any | null = null
   isSubmit = false
   record: ISCNRecordWithID | null = null
 
+  uploadFileRecords: any[] = []
+  urlFileRecords: any[] = []
+
   get shouldSkipToMintNFT(): boolean {
     return this.$route.query.mint === '1'
   }
@@ -157,55 +156,43 @@ export default class NewIndexPage extends Vue {
     }
   }
 
+  get formattedFileRecords() {
+     if (this.uploadFileRecords.length) {
+      return this.uploadFileRecords
+     }
+     if (this.urlFileRecords.length) {
+      return this.urlFileRecords
+     }
+     return[]
+  }
+
   async mounted() {
-    if ((this.ipfsHash || this.arweaveId) && this.shouldSkipToMintNFT) {
+    if ((this.urlIpfsHash || this.arweaveId) && this.shouldSkipToMintNFT) {
       this.state = 'iscn';
       let url;
       if (this.arweaveId) url = `https://arweave.net/${this.arweaveId}`;
-      else if (this.ipfsHash) url = `https://ipfs.io/ipfs/${this.ipfsHash}`;
+      else if (this.urlIpfsHash) url = `https://ipfs.io/ipfs/${this.urlIpfsHash}`;
       if (url) {
         const { data, headers } = await this.$axios.get(url, { responseType: 'blob' })
-        this.fileBlob = data as Blob
-        this.isImage = headers['content-type'].startsWith('image')
-        this.fileType = headers['content-type']
-        this.fileSize = headers['content-length']
-        this.fileData = `data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`
+        this.urlFileRecords.push({
+        fileBlob:data as Blob,
+        ipfsHash:this.urlIpfsHash,
+        arweaveId: this.arweaveId,
+        isFileImage:headers['content-type'].startsWith('image'),
+        fileType:headers['content-type'],
+        fileSize:headers['content-length'],
+        fileData:`data:${this.fileType};base64,${Buffer.from(await data.arrayBuffer(), 'binary').toString('base64')}`,
+        })
       }
     }
   }
 
-  onSubmitUpload({
-    ipfsHash,
-    arweaveId,
-    fileData,
-    fileSHA256,
-    isImage,
-    fileBlob,
-    exifInfo,
-    fileType,
-    fileSize,
-  }: {
-    ipfsHash: string
-    arweaveId: string
-    fileData: string
-    fileSHA256: string
-    isImage: boolean
-    fileBlob: Blob | null
-    exifInfo: any
-    fileType: string
-    fileSize: string
-  }) {
-    this.ipfsHash = ipfsHash
-    this.arweaveId = arweaveId
-    this.fileData = fileData
-    this.fileSHA256 = fileSHA256
-    this.isImage = isImage
-    this.fileBlob = fileBlob
-    this.exifInfo = exifInfo
-    this.fileType = fileType
-    this.fileSize = fileSize
+  onSubmitUpload(fileRecords: any[] | []) {
+    if (fileRecords && fileRecords.length) {
+      this.uploadFileRecords.push(...fileRecords)
+    }
     this.state = 'iscn'
-    logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', this.fileType, 1);
+    logTrackerEvent(this, 'ISCNCreate', 'ISCNConfirmFile', '', 1);
   }
 
   onArweaveIdUpdate({ arweaveId }: { arweaveId: string }) {
@@ -245,7 +232,7 @@ export default class NewIndexPage extends Vue {
 
   handleCreateAnotherButtonClick() {
     this.state = 'init'
-    this.ipfsHash = ''
+    this.urlIpfsHash = ''
     this.arweaveId = ''
     this.fileSHA256 = ''
     this.fileData = ''
@@ -254,7 +241,7 @@ export default class NewIndexPage extends Vue {
     this.iscnId = ''
     this.iscnTxHash = ''
     this.iscnTimestamp = ''
-    this.isImage = false
+    this.isFileImage = false
     this.fileBlob = null
     this.exifInfo = null
     this.isSubmit = false

From 1aae8ebd9b14e9cd8929cc38977ac5e45409a4b9 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 25 Oct 2023 10:39:46 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20Support=20uploading=20multiple?=
 =?UTF-8?q?=20Arweave=20hash=20to=20ISCN=20in=20Step=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 384 +++++++++++++++++++-------------
 pages/nft/url/index.vue         |   2 +-
 utils/cosmos/iscn/iscn.type.ts  |   6 +-
 utils/cosmos/iscn/sign.ts       |  15 +-
 4 files changed, 246 insertions(+), 161 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 3a0b53cd..52f6bfa7 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -34,20 +34,60 @@
           'text-medium-gray',
         ]"
       >
-        <template v-if="fileData">
-          <Previewer :is-image="isImage" :file-data="fileData" />
+        <template v-if="fileRecords.length">
           <div
-            :class="[
-              'flex',
-              'flex-col',
-            ]"
+            v-if="fileRecords.length"
+            class="flex flex-col items-center w-full"
           >
+            <table class="w-full">
+              <tbody class="w-full">
+                <tr
+                  v-for="{
+                    isFileImage,
+                    fileData,
+                    fileName,
+                    fileSize,
+                  } of fileRecords"
+                  :key="fileName"
+                  class="border-b-shade-gray border-b-[1px] text-dark-gray hover:bg-light-gray transition-colors w-full"
+                >
+                  <td class="py-[4px]">
+                    <Previewer
+                      :is-image="isFileImage"
+                      :file-data="fileData"
+                      size="small"
+                    />
+                  </td>
+                  <td class="py-[4px]">
+                    <div
+                      :class="[
+                        'flex',
+                        'flex-col',
+                        'items-stretch',
+                        'justify-start',
+                      ]"
+                    >
+                      <Label
+                        :text="fileName"
+                        preset="h5"
+                        :class="['font-semibold', 'text-dark-gray']"
+                      />
+                      <Label
+                        :text="`${Math.round(fileSize * 0.001)} KB`"
+                        preset="h6"
+                        :class="['font-normal', 'text-medium-gray', 'mt-[8px]']"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
             <div
               v-if="uploadStatus === 'loading'"
               :class="[
                 'flex',
                 'items-center',
-                'mb-[24px]',
+                'mt-[32px]',
               ]"
             >
               <ProgressIndicator />
@@ -60,7 +100,7 @@
               v-else
               :class="[
                 'w-min',
-                'mb-[16px]',
+                'mt-[32px]',
               ]"
               :text="$t('IscnRegisterForm.title.ready')"
               tag="div"
@@ -73,18 +113,6 @@
                 <IconDone />
               </template>
             </Label>
-            <Button
-              v-if="exifInfo"
-              class="w-min"
-              type="button"
-              :text="$t('UploadForm.view.file.button')"
-              preset="outline"
-              @click="isOpenFileInfoDialog = true"
-            >
-              <template #prepend>
-                <IconInfo />
-              </template>
-            </Button>
           </div>
         </template>
         <div v-else>
@@ -96,11 +124,11 @@
         :label="$t('IscnRegisterForm.label.fingerprints')"
         class="mb-[12px]"
       >
-        <ContentFingerprintLink v-if="ipfsHash"  :item="formattedIpfs" />
-        <ContentFingerprintLink v-if="uploadArweaveId" :item="formattedArweave" />
+        <ContentFingerprintLink v-for="ipfs of ipfsHashList" :key="ipfs" :item="formattedIpfs(ipfs)" />
+        <ContentFingerprintLink v-for="ar of uploadArweaveIdList" :key="ar" :item="formattedArweave(ar)" />
         <ContentFingerprintLink v-for="f, i in customContentFingerprints" :key="f + i" :item="f" />
         <div
-          v-if="!fileData"
+          v-if="shouldShowContentFingerprintInput"
           :class="[
             'flex',
             { 'mt-[12px]': customContentFingerprints.length },
@@ -121,7 +149,7 @@
         </div>
       </FormField>
       <!-- Numbers Protocol -->
-      <FormField
+      <!-- <FormField
         v-if="!showUploadOnly && (isPhoto || isImage)"
         :label="$t('IscnRegisterForm.label.numbersProtocol')"
         class="mb-[12px]"
@@ -135,9 +163,9 @@
             >{{ $t('IscnRegisterForm.label.numbersProtocol.details.link') }}</Link>
           </i18n>
         </CheckBox>
-      </FormField>
+      </FormField> -->
       <!-- Dialog -->
-      <Dialog
+      <!-- <Dialog
         v-model="isOpenFileInfoDialog"
         :has-padding="false"
         preset="custom"
@@ -152,7 +180,7 @@
           :img-src="fileData"
           :all-exif="exifInfo"
         />
-      </Dialog>
+      </Dialog> -->
       <div v-if="showUploadOnly" :class="[
         'flex',
         'flex-col',
@@ -699,7 +727,7 @@ import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
 import { estimateISCNTxGasAndFee, formatISCNTxPayload } from '~/utils/cosmos/iscn/sign';
 import {
   getLikerIdMinApi,
-  API_POST_NUMBERS_PROTOCOL_ASSETS,
+  // API_POST_NUMBERS_PROTOCOL_ASSETS,
   } from '~/constant/api';
 import { getAccountBalance } from '~/utils/cosmos'
 import { logTrackerEvent } from '~/utils/logger'
@@ -726,17 +754,10 @@ export enum AuthorDialogType {
 
 @Component
 export default class IscnRegisterForm extends Vue {
-  @Prop({ default: false }) readonly isImage!: boolean
-  @Prop({ default: null }) readonly exifInfo: any | null | undefined
-  @Prop({ default: null }) readonly fileBlob: Blob | null | undefined
-  @Prop({ default: null }) readonly fileData: string | null | undefined
-  @Prop({ default: null }) readonly fileType: string | null | undefined
-  @Prop({ default: null }) readonly fileSize: string | null | undefined
-  @Prop(String) readonly fileSHA256!: string
-  @Prop({ default: false }) readonly isIPFSLink!: boolean
-  @Prop({ default: false }) readonly isUploadOnly!: boolean
+  @Prop({ default: [] }) readonly fileRecords!: any[]
   @Prop(String) readonly ipfsHash!: string
   @Prop(String) readonly arweaveId!: string
+  @Prop({ default: false }) readonly isUploadOnly!: boolean
   @Prop(Number) readonly step: number | undefined
 
   @walletModule.Getter('getWalletAddress') address!: string
@@ -784,8 +805,7 @@ export default class IscnRegisterForm extends Vue {
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
   uploadStatus: string = ''
-  uploadIpfsHash: string = this.ipfsHash || ''
-  uploadArweaveId: string = this.arweaveId || ''
+  uploadArweaveIdList: string[] = []
   error: string = ''
   likerId: string = ''
   likerIdsAddresses: (string | void)[] = []
@@ -826,6 +846,19 @@ export default class IscnRegisterForm extends Vue {
   currentAuthorDialogType: AuthorDialogType = AuthorDialogType.stakeholder
   sameAsList: any = []
 
+  get ipfsHashList() {
+    const list = []
+    if (this.ipfsHash) {
+      list.push(this.ipfsHash)
+    }
+    list.push(...this.fileRecords.map((file) => file.ipfsHash))
+    return list
+  }
+
+  get shouldShowContentFingerprintInput() {
+    return !this.fileRecords.some((file) => file.fileData)
+  }
+
   get tagsString(): string {
     return this.tags.join(',')
   }
@@ -852,14 +885,10 @@ export default class IscnRegisterForm extends Vue {
     return this.authors.map((a) => a.authorDescription)
   }
 
-  get isPhoto() {
-    return this.exifInfo && this.exifInfo.ExifImageWidth
-  }
-
   get defaultType() {
-    if (this.isPhoto) return 'Photo'
-    if (this.isImage) return 'Image'
-    if (this.fileType === 'application/pdf' || this.fileType === 'application/epub+zip') return 'Book'
+    if (this.fileRecords.some(file => file.fileType === 'application/pdf' || file.fileType === 'application/epub+zip')) return 'Book'
+    if (this.fileRecords.some(file => file.exifInfo && file.exifInfo.ExifImageWidth)) return 'Photo'
+    if (this.fileRecords.some(file => file.isFileImage)) return 'Image'
     return 'CreativeWork'
   }
 
@@ -869,21 +898,13 @@ export default class IscnRegisterForm extends Vue {
       : this.$t('IscnRegisterForm.title.editStakeholder')
   }
 
-  get formattedIpfs() {
-    return this.$t('IscnRegisterForm.ipfs.link', { hash: this.ipfsHash })
-  }
-
-  get formattedArweave() {
-    return this.$t('IscnRegisterForm.arweave.link', { arweaveId: this.uploadArweaveId })
-  }
-
   get contentFingerprintLinks() {
     const array=[]
-    if (this.uploadArweaveId) {
-      array.push(this.formattedArweave)
+    if (this.uploadArweaveIdList) {
+      array.push(...this.uploadArweaveIdList.map(id => this.formattedArweave(id)))
     }
-    if (this.ipfsHash){
-      array.push(this.formattedIpfs)
+    if (this.ipfsHashList.length) {
+      array.push(...this.ipfsHashList.map(ipfs => this.formattedIpfs(ipfs)))
     }
     if (this.customContentFingerprints.length){
       array.push(...this.customContentFingerprints)
@@ -943,32 +964,30 @@ export default class IscnRegisterForm extends Vue {
   }
 
   get exif() {
-    const extension = this.fileType?.split('/')
-    if (this.exifInfo) {
-      return {
-          ...this.exifInfo,
-          Format: this.fileType,
+    return this.fileRecords.map((file) => {
+      const extension = file.fileType?.split('/')
+      if (file.exifInfo) {
+        return {
+          ...file.exifInfo,
+          Format: file.fileType,
           Size:
-            this.exifInfo.ExifImageHeight && this.exifInfo.ExifImageWidth
-              ? `${this.exifInfo.ExifImageHeight} x ${
-                  this.exifInfo.ExifImageWidth
+            file.exifInfo.ExifImageHeight && file.exifInfo.ExifImageWidth
+              ? `${file.exifInfo.ExifImageHeight} x ${
+                  file.exifInfo.ExifImageWidth
                 } ${extension?.[extension.length - 1].toUpperCase()} (${
-                  this.fileSize
+                  file.fileSize
                 })`
-              : this.fileSize,
+              : file.fileSize,
         }
-    }
-    if (this.isImage || this.isPhoto) {
-      return {
-          Format: this.fileType,
-          Size: this.fileSize,
+      }
+      if (file.isFileImage || (file.exifInfo && file.exifInfo.ExifImageWidth)) {
+        return {
+          Format: file.fileType,
+          Size: file.fileSize,
         }
-  }
-    return undefined
-  }
-
-  get fileByteSize() {
-    return this.fileBlob?.size || 0
+      }
+      return undefined
+    })
   }
 
   get payload() {
@@ -979,12 +998,12 @@ export default class IscnRegisterForm extends Vue {
       tagsString: this.tagsString,
       sameAs: this.formattedSameAsList,
       url: this.url,
-      exifInfo: this.exif,
+      exifInfo: this.exif.filter(file => file),
       license: this.formattedLicense,
-      ipfsHash: this.uploadIpfsHash || this.ipfsHash,
-      arweaveId: this.uploadArweaveId || this.arweaveId,
+      ipfsHash: this.ipfsHashList,
+      arweaveId: this.uploadArweaveIdList,
       numbersProtocolAssetId: this.numbersProtocolAssetId,
-      fileSHA256: this.fileSHA256,
+      fileSHA256: this.fileRecords.map(file => file.fileSHA256),
       author: this.author.name,
       authorNames: this.authorNames,
       authorUrls: this.authorUrls,
@@ -1010,11 +1029,11 @@ export default class IscnRegisterForm extends Vue {
     if (this.arweaveFee.lte(0)) {
       return 1;
     }
-    return this.uploadArweaveId ? 2 : 1;
+    return this.uploadArweaveIdList.length ? 2 : 1;
   }
 
   get totalSignStep() {
-    if (this.uploadArweaveId && this.arweaveFee.lte(0)) return 1
+    if (this.uploadArweaveIdList.length && this.arweaveFee.lte(0)) return 1
     return 2;
   }
 
@@ -1027,14 +1046,14 @@ export default class IscnRegisterForm extends Vue {
     if (this.isUploadingArweave) {
       return this.$t('IscnRegisterForm.signDialog.closeWarning')
     }
-    if (this.uploadArweaveId) {
+    if (this.uploadArweaveIdList.length) {
       return this.$t('IscnRegisterForm.signDialog.sign.iscn.register');
     }
     return this.$t('IscnRegisterForm.signDialog.sign.arweave.upload');
   }
 
   get signDialogFee() {
-    if (this.uploadArweaveId) return this.iscnFee;
+    if (this.uploadArweaveIdList.length) return this.iscnFee;
     return this.arweaveFeePlusGas;
   }
 
@@ -1068,6 +1087,9 @@ export default class IscnRegisterForm extends Vue {
   }
 
   async mounted() {
+    if (this.arweaveId) {
+      this.uploadArweaveIdList.push(this.arweaveId)
+    }
     this.uploadStatus = 'loading'
     await this.estimateArweaveFee();
     // ISCN Fee needs Arweave fee to calculate
@@ -1193,6 +1215,14 @@ export default class IscnRegisterForm extends Vue {
     this.license = value
   }
 
+  formattedIpfs(ipfsHash: string) {
+    return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash })
+  }
+
+  formattedArweave(arweaveId: string) {
+    return this.$t('IscnRegisterForm.arweave.link', { arweaveId })
+  }
+
   handleOpenSameAsDialog() {
     this.isOpenSameAsDialog = true
   }
@@ -1306,17 +1336,33 @@ export default class IscnRegisterForm extends Vue {
       this.uploadStatus = ''
       return
     }
-    if (!this.fileBlob) {
+    if (!this.fileRecords.some(file => file.fileBlob)) {
       this.error = 'NO_FILE_TO_UPLOAD'
       this.isOpenWarningSnackbar = true
       this.uploadStatus = ''
       return
     }
-    await this.submitToArweave();
-    if (this.uploadArweaveId) {
+    try {
+      this.isUploadingArweave = true;
+      this.uploadStatus = 'uploading';
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const record of this.fileRecords) {
+        // eslint-disable-next-line no-await-in-loop
+        await this.submitToArweave(record);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    } finally {
+      this.isUploadingArweave = false;
+      this.uploadStatus = '';
+    }
+
+    if (this.uploadArweaveIdList.length) {
       this.$emit('fileUploaded', {
-        ipfsHash: this.ipfsHash,
-        arweaveId: this.uploadArweaveId,
+        ipfsHash: this.ipfsHashList,
+        arweaveId: this.uploadArweaveIdList,
       })
     }
   }
@@ -1335,26 +1381,61 @@ export default class IscnRegisterForm extends Vue {
       this.uploadStatus = ''
       return
     }
-    if (this.fileBlob) {
-    await this.submitToArweave();
-    if (this.isRegisterNumbersProtocolAsset && !this.numbersProtocolAssetId) {
-      await this.submitToNumbers();
-    }
+    if (this.fileRecords.some(file => file.fileBlob)) {
+      try {
+        this.isUploadingArweave = true;
+        this.uploadStatus = 'uploading';
+        // eslint-disable-next-line no-restricted-syntax
+        for (const record of this.fileRecords) {
+          // eslint-disable-next-line no-await-in-loop
+          await this.submitToArweave(record);
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error)
+      } finally {
+        this.isUploadingArweave = false;
+        this.uploadStatus = '';
+      }
     }
-    if (!this.fileBlob || this.uploadArweaveId) await this.submitToISCN()
+    if (!this.fileRecords.some(file => file.fileBlob) || this.uploadArweaveIdList.length) await this.submitToISCN()
   }
 
   async estimateArweaveFee(): Promise<void> {
     try {
-      const { address, arweaveId, LIKE } = await estimateBundlrFilePrice({
-        fileSize: this.fileByteSize, ipfsHash: this.ipfsHash,
-      })
-      this.uploadArweaveId = arweaveId;
-      if (arweaveId) {
-        this.$emit('arweaveUploaded', { arweaveId })
+      const pricePromises = this.fileRecords.map(record =>
+        estimateBundlrFilePrice({
+          fileSize: record.fileBlob?.size || 0,
+          ipfsHash: record.ipfsHash,
+        }),
+      );
+
+      const results = await Promise.all(pricePromises);
+      let totalFee = new BigNumber(0);
+      const arweaveIds: string[] = [];
+
+      results.forEach(result => {
+        const { address, arweaveId, LIKE } = result;
+        if (LIKE) {
+          totalFee = totalFee.plus(new BigNumber(LIKE));
+        }
+        if (arweaveId) {
+          arweaveIds.push(arweaveId);
+        }
+        if (!this.arweaveFeeTargetAddress) {
+          this.arweaveFeeTargetAddress = address;
+        }
+      });
+
+      this.arweaveFee = totalFee;
+      if (arweaveIds.length) {
+        this.uploadArweaveIdList = [
+          ...this.uploadArweaveIdList,
+          ...arweaveIds,
+          ];
+        this.$emit('arweaveUploaded', { arweaveId: arweaveIds[0] });
       }
-      if (LIKE) this.arweaveFee = new BigNumber(LIKE);
-      this.arweaveFeeTargetAddress = address;
+
     } catch (err) {
       // TODO: Handle error
       // eslint-disable-next-line no-console
@@ -1362,13 +1443,13 @@ export default class IscnRegisterForm extends Vue {
     }
   }
 
-  async sendArweaveFeeTx(): Promise<string> {
+  async sendArweaveFeeTx(records: any): Promise<string> {
     logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
     await this.initIfNecessary()
     if (!this.signer) throw new Error('SIGNER_NOT_INITED');
     if (!this.arweaveFeeTargetAddress) throw new Error('TARGET_ADDRESS_NOT_SET');
     this.uploadStatus = 'signing';
-    const memo = JSON.stringify({ ipfs: this.ipfsHash, fileSize: this.fileByteSize });
+    const memo = JSON.stringify({ ipfs: records.ipfsHash, fileSize: records.fileBlob?.size || 0 });
     try {
       const { transactionHash } = await sendLIKE(this.address, this.arweaveFeeTargetAddress, this.arweaveFee.toFixed(), this.signer, memo);
       return transactionHash;
@@ -1383,31 +1464,29 @@ export default class IscnRegisterForm extends Vue {
     return '';
   }
 
-  async submitToArweave(): Promise<void> {
+  async submitToArweave(records: any): Promise<void> {
+    const tempRecord = {...records}
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToArweave', '', 1);
-    if (this.uploadArweaveId) return;
-    if (!this.fileBlob) return;
+    if (!tempRecord.fileBlob) return;
     this.isOpenSignDialog = true;
     this.onOpenKeplr();
-    const transactionHash = await this.sendArweaveFeeTx();
-
+    tempRecord.transactionHash = await this.sendArweaveFeeTx(tempRecord);
     // Register Numbers Protocol assets along with Arweave
     if (this.isRegisterNumbersProtocolAsset) {
       logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
     }
-    this.isUploadingArweave = true;
-    this.uploadStatus = 'uploading';
+
     try {
-      const arrayBuffer = await this.fileBlob.arrayBuffer();
+      const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
       const buffer = Buffer.from(arrayBuffer);
       const arweaveId = await uploadSingleFileToBundlr(buffer, {
-        fileSize: this.fileByteSize,
-        ipfsHash: this.ipfsHash,
-        fileType: this.fileType as string,
-        txHash: transactionHash,
+        fileSize: tempRecord.fileBlob?.size || 0,
+        ipfsHash: tempRecord.ipfsHash,
+        fileType: tempRecord.fileType as string,
+        txHash: tempRecord.transactionHash,
       });
       if (arweaveId) {
-        this.uploadArweaveId = arweaveId
+        this.uploadArweaveIdList.push(arweaveId)
         this.$emit('arweaveUploaded', { arweaveId })
         this.isOpenSignDialog = false
       } else {
@@ -1421,42 +1500,39 @@ export default class IscnRegisterForm extends Vue {
       console.error(err)
       this.shouldShowAlert = true
       this.errorMessage = (err as Error).toString()
-    } finally {
-      this.isUploadingArweave = false;
-      this.uploadStatus = '';
     }
   }
 
-  async submitToNumbers(): Promise<void> {
-    logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
-    this.isOpenSignDialog = true;
-    try {
-      this.uploadStatus = 'loading';
-      const formData = new FormData();
-      if (this.fileBlob) formData.append('file', this.fileBlob);
-      const {
-        numAssetIds: [numbersProtocolAssetId],
-      } = await this.$axios.$post(
-        `${API_POST_NUMBERS_PROTOCOL_ASSETS}`,
-        formData,
-        {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        },
-      )
-      this.numbersProtocolAssetId = numbersProtocolAssetId
-      this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
-      this.isOpenSignDialog = false;
-    } catch (error) {
-      this.shouldShowAlert = true;
-      this.errorMessage = (error as Error).toString()
-      // eslint-disable-next-line no-console
-      console.error(error)
-    } finally {
-      this.uploadStatus = '';
-    }
-  }
+  // async submitToNumbers(): Promise<void> {
+  //   logTrackerEvent(this, 'ISCNCreate', 'SubmitToNumbers', '', 1);
+  //   this.isOpenSignDialog = true;
+  //   try {
+  //     this.uploadStatus = 'loading';
+  //     const formData = new FormData();
+  //     if (this.fileBlob) formData.append('file', this.fileBlob);
+  //     const {
+  //       numAssetIds: [numbersProtocolAssetId],
+  //     } = await this.$axios.$post(
+  //       `${API_POST_NUMBERS_PROTOCOL_ASSETS}`,
+  //       formData,
+  //       {
+  //         headers: {
+  //           'Content-Type': 'multipart/form-data',
+  //         },
+  //       },
+  //     )
+  //     this.numbersProtocolAssetId = numbersProtocolAssetId
+  //     this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
+  //     this.isOpenSignDialog = false;
+  //   } catch (error) {
+  //     this.shouldShowAlert = true;
+  //     this.errorMessage = (error as Error).toString()
+  //     // eslint-disable-next-line no-console
+  //     console.error(error)
+  //   } finally {
+  //     this.uploadStatus = '';
+  //   }
+  // }
 
   async submitToISCN(): Promise<void> {
     logTrackerEvent(this, 'ISCNCreate', 'SubmitToISCN', '', 1);
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index 98d25eb7..e1207939 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -291,7 +291,7 @@ export default class FetchIndex extends Vue {
       description,
       tagsString: keywords,
       url: this.iscnData.url || this.url,
-      exifInfo: {},
+      exifInfo: [],
       license,
       publisher,
       ipfsHash: this.ipfsHash,
diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index 50abb4f9..a7d16dfc 100644
--- a/utils/cosmos/iscn/iscn.type.ts
+++ b/utils/cosmos/iscn/iscn.type.ts
@@ -7,10 +7,10 @@ export interface ISCNRegisterPayload {
   url: string;
   exifInfo: any;
   license: string;
-  ipfsHash: string;
-  arweaveId: string;
+  ipfsHash: any;
+  arweaveId: any;
   numbersProtocolAssetId: string;
-  fileSHA256: string;
+  fileSHA256: any;
   type: string;
   publisher?: string,
   author: string;
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index ba43299e..d260954d 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -72,9 +72,18 @@ export function formatISCNTxPayload(payload: ISCNRegisterPayload): ISCNSignPaylo
       rewardProportion = Math.max(0, rewardProportion);
     }
   }
-  if (fileSHA256) contentFingerprints.push(`hash://sha256/${fileSHA256}`)
-  if (ipfsHash) contentFingerprints.push(`ipfs://${ipfsHash}`)
-  if (arweaveId) contentFingerprints.push(`ar://${arweaveId}`);
+
+  const pushContentFingerprint = (value: any, prefix:string) => {
+    if (Array.isArray(value)) {
+      value.forEach(item => contentFingerprints.push(`${prefix}${item}`));
+    } else if (typeof value === 'string' && value.length) {
+      contentFingerprints.push(`${prefix}${value}`);
+    }
+  };
+  pushContentFingerprint(fileSHA256, 'hash://sha256/');
+  pushContentFingerprint(ipfsHash, 'ipfs://');
+  pushContentFingerprint(arweaveId, 'ar://');
+
   if (numbersProtocolAssetId) contentFingerprints.push(`num://${numbersProtocolAssetId}`);
   if (authorNames.length) {
     for (let i = 0; i < authorNames.length; i += 1) {