From b05c1c69908db9565c6f2bb408bdf176940bcaf8 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Mon, 30 Oct 2023 17:07:55 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Support=20uploading=20multiple=20fi?=
 =?UTF-8?q?les=20(#400)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Support uploading multiple files in Step1

* ✨ Support uploading multiple Arweave hash to ISCN in Step 2

* 🚸 Store arweave payment tx hashes in Map

* 💄 Add Info button to display Exif info

* 🎨 Support upload mutiple files to numbers

* 🩹 Change exinfo default type to object

* ✏️ Improve formatting & naming

* ✏️ Reset data array

* 🐛 Prevent duplicate Arweave uploads

* 🎨 Increase ISCN gas fee

* 🎨 Update ipfsHash and arweaveId types

* 🎨 Update sentArweaveTransactionHashes types
---
 components/IscnRegisterForm.vue | 443 +++++++++++++++++++++-----------
 components/IscnUploadForm.vue   | 379 ++++++++++++++-------------
 components/Previewer.vue        |   9 +-
 constant/index.ts               |   1 +
 locales/en.json                 |   4 +-
 pages/new/index.vue             |  89 +++----
 utils/cosmos/iscn/index.ts      |   4 +-
 utils/cosmos/iscn/iscn.type.ts  |   8 +-
 utils/cosmos/iscn/sign.ts       |  58 ++++-
 9 files changed, 590 insertions(+), 405 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 4c2f29f8..233d17f9 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -34,20 +34,82 @@
           '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,
+                    exifInfo,
+                  }, index) 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>
+                  <td class="py-[4px]">
+                    <div class="flex gap-[8px] items-center justify-end ml-[4px]">
+                      <div
+                        v-if="exifInfo"
+                        :class="['cursor-pointer']"
+                        @click="handleClickExifInfo(index)"
+                      >
+                        <IconInfo />
+                      </div>
+                      <div
+                        v-if="exifInfo || isFileImage"
+                      >
+                        <input
+                          v-model="isRegisterNumbersProtocolAsset"
+                          type="checkbox"
+                          name="numbers"
+                          disabled
+                        >
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
             <div
               v-if="uploadStatus === 'loading'"
               :class="[
                 'flex',
                 'items-center',
-                'mb-[24px]',
+                'mt-[32px]',
               ]"
             >
               <ProgressIndicator />
@@ -60,7 +122,7 @@
               v-else
               :class="[
                 'w-min',
-                'mb-[16px]',
+                'mt-[32px]',
               ]"
               :text="$t('IscnRegisterForm.title.ready')"
               tag="div"
@@ -73,18 +135,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 +146,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="formatIpfs(ipfs)" />
+        <ContentFingerprintLink v-for="ar of uploadArweaveIdList" :key="ar" :item="formatArweave(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 },
@@ -122,7 +172,7 @@
       </FormField>
       <!-- Numbers Protocol -->
       <FormField
-        v-if="!showUploadOnly && (isPhoto || isImage)"
+        v-if="shouldShowUploadToNumbers"
         :label="$t('IscnRegisterForm.label.numbersProtocol')"
         class="mb-[12px]"
       >
@@ -149,8 +199,8 @@
             'overflow-y-scroll',
             'scrollbar-hidden',
           ]"
-          :img-src="fileData"
-          :all-exif="exifInfo"
+          :img-src="displayImageSrc"
+          :all-exif="displayExifInfo"
         />
       </Dialog>
       <div v-if="showUploadOnly" :class="[
@@ -697,6 +747,7 @@ import { estimateBundlrFilePrice, uploadSingleFileToBundlr } from '~/utils/arwea
 import { signISCNTx } from '~/utils/cosmos/iscn';
 import { DEFAULT_TRANSFER_FEE, sendLIKE } from '~/utils/cosmos/sign';
 import { estimateISCNTxGasAndFee, formatISCNTxPayload } from '~/utils/cosmos/iscn/sign';
+import { ISCN_GAS_MULTIPLIER } from '~/constant';
 import {
   getLikerIdMinApi,
   API_POST_NUMBERS_PROTOCOL_ASSETS,
@@ -726,17 +777,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
@@ -783,10 +827,12 @@ export default class IscnRegisterForm extends Vue {
   authorName: string = ''
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
-  arweavePaymentTransactionHash: string = ''
+  sentArweaveTransactionHashes = new Map<
+    string, { transactionHash?: string, arweaveId?: string }
+  >()
+
   uploadStatus: string = ''
-  uploadIpfsHash: string = this.ipfsHash || ''
-  uploadArweaveId: string = this.arweaveId || ''
+  uploadArweaveIdList: string[] = []
   error: string = ''
   likerId: string = ''
   likerIdsAddresses: (string | void)[] = []
@@ -795,14 +841,18 @@ export default class IscnRegisterForm extends Vue {
   customContentFingerprints: string[] = []
   type: string = this.defaultType
 
+  displayImageSrc: string = ''
+  displayExifInfo: any = null
+
   arweaveFeeTargetAddress: string = ''
   arweaveFee = new BigNumber(0)
   iscnFee = new BigNumber(0)
+  iscnGasFee = ''
   balance = new BigNumber(0)
   debouncedCalculateISCNFee = debounce(this.calculateISCNFee, 400)
 
   isRegisterNumbersProtocolAsset = false
-  numbersProtocolAssetId = ''
+  numbersProtocolAssetIds = new Map<string, string>()
 
   isOpenFileInfoDialog = false
   isOpenAuthorDialog = false
@@ -827,6 +877,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(',')
   }
@@ -853,14 +916,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'
   }
 
@@ -870,21 +929,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.formatArweave(id)))
     }
-    if (this.ipfsHash){
-      array.push(this.formattedIpfs)
+    if (this.ipfsHashList.length) {
+      array.push(...this.ipfsHashList.map(ipfs => this.formatIpfs(ipfs)))
     }
     if (this.customContentFingerprints.length){
       array.push(...this.customContentFingerprints)
@@ -944,32 +995,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() {
@@ -980,12 +1029,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,
-      numbersProtocolAssetId: this.numbersProtocolAssetId,
-      fileSHA256: this.fileSHA256,
+      ipfsHash: this.ipfsHashList,
+      arweaveId: this.uploadArweaveIdList,
+      numbersProtocolAssetId: [...this.numbersProtocolAssetIds.values()],
+      fileSHA256: this.fileRecords.map(file => file.fileSHA256),
       author: this.author.name,
       authorNames: this.authorNames,
       authorUrls: this.authorUrls,
@@ -1011,11 +1060,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;
   }
 
@@ -1028,14 +1077,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;
   }
 
@@ -1058,6 +1107,10 @@ export default class IscnRegisterForm extends Vue {
     )
   }
 
+  get shouldShowUploadToNumbers() {
+    return this.fileRecords.some(file => file.isFileImage || file.exifInfo)
+  }
+
   @Watch('payload', { immediate: true, deep: true })
   change() {
     this.debouncedCalculateISCNFee()
@@ -1069,6 +1122,9 @@ export default class IscnRegisterForm extends Vue {
   }
 
   async mounted() {
+    if (this.arweaveId) {
+      this.uploadArweaveIdList = [this.arweaveId];
+    }
     this.uploadStatus = 'loading'
     await this.estimateArweaveFee();
     // ISCN Fee needs Arweave fee to calculate
@@ -1194,6 +1250,14 @@ export default class IscnRegisterForm extends Vue {
     this.license = value
   }
 
+  formatIpfs(ipfsHash: string) {
+    return this.$t('IscnRegisterForm.ipfs.link', { hash: ipfsHash })
+  }
+
+  formatArweave(arweaveId: string) {
+    return this.$t('IscnRegisterForm.arweave.link', { arweaveId })
+  }
+
   handleOpenSameAsDialog() {
     this.isOpenSameAsDialog = true
   }
@@ -1229,11 +1293,12 @@ export default class IscnRegisterForm extends Vue {
     ])
     this.balance = new BigNumber(balance);
     const { iscnFee, gas: iscnGasEstimation } = estimation;
-    const iscnGasNanolike = iscnGasEstimation.fee.amount[0].amount
+    const iscnGasNanolike = new BigNumber(iscnGasEstimation.fee.amount[0].amount).times(ISCN_GAS_MULTIPLIER)
     const iscnFeeNanolike = iscnFee.amount
     this.iscnFee =  new BigNumber(iscnFeeNanolike)
       .plus(iscnGasNanolike)
       .shiftedBy(-9);
+    this.iscnGasFee = iscnGasNanolike.integerValue().toString();
   }
 
   handleSignDialogClose() {
@@ -1307,17 +1372,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,
       })
     }
   }
@@ -1336,26 +1417,65 @@ 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);
+          if (this.isRegisterNumbersProtocolAsset && !this.numbersProtocolAssetIds.has(record.ipfsHash)) {
+          // eslint-disable-next-line no-await-in-loop
+            await this.submitToNumbers(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
@@ -1363,18 +1483,26 @@ export default class IscnRegisterForm extends Vue {
     }
   }
 
-  async sendArweaveFeeTx(): Promise<string> {
+  async sendArweaveFeeTx(records: any): Promise<string> {
     logTrackerEvent(this, 'ISCNCreate', 'SendArFeeTx', '', 1);
-    if (this.arweavePaymentTransactionHash) return this.arweavePaymentTransactionHash;
+    if (this.sentArweaveTransactionHashes.has(records.ipfsHash)) {
+      const transactionInfo = this.sentArweaveTransactionHashes.get(records.ipfsHash);
+      if (transactionInfo && transactionInfo.transactionHash) {
+        return transactionInfo.transactionHash;
+      }
+    }
     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);
-      if (transactionHash) this.arweavePaymentTransactionHash = transactionHash;
-      return transactionHash;
+      if (transactionHash) {
+        const existingData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
+        this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...existingData, transactionHash });
+        return transactionHash;
+      }
     } catch (err) {
       this.signDialogError = (err as Error).toString()
       // TODO: Handle error
@@ -1386,60 +1514,62 @@ export default class IscnRegisterForm extends Vue {
     return '';
   }
 
-  async submitToArweave(): Promise<void> {
+  async submitToArweave(records: any): Promise<void> {
+    const existingData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
+    const { transactionHash, arweaveId: uploadArweaveId } = existingData;
+    if (transactionHash && uploadArweaveId) return
+    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();
-    let transactionHash = this.arweavePaymentTransactionHash
-    if (!transactionHash) {
-       transactionHash = await this.sendArweaveFeeTx();
+    tempRecord.transactionHash = transactionHash
+    if (!tempRecord.transactionHash) {
+      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 buffer = Buffer.from(arrayBuffer);
-      const arweaveId = await uploadSingleFileToBundlr(buffer, {
-        fileSize: this.fileByteSize,
-        ipfsHash: this.ipfsHash,
-        fileType: this.fileType as string,
-        txHash: transactionHash,
-      });
-      if (arweaveId) {
-        this.uploadArweaveId = arweaveId
-        this.$emit('arweaveUploaded', { arweaveId })
-        this.isOpenSignDialog = false
-      } else {
+
+    if (tempRecord.transactionHash && !uploadArweaveId) {
+      try {
+        const arrayBuffer = await tempRecord.fileBlob.arrayBuffer();
+        const buffer = Buffer.from(arrayBuffer);
+        const arweaveId = await uploadSingleFileToBundlr(buffer, {
+          fileSize: tempRecord.fileBlob?.size || 0,
+          ipfsHash: tempRecord.ipfsHash,
+          fileType: tempRecord.fileType as string,
+          txHash: tempRecord.transactionHash,
+        });
+        if (arweaveId) {
+          const uploadedData = this.sentArweaveTransactionHashes.get(records.ipfsHash) || {};
+          this.sentArweaveTransactionHashes.set(records.ipfsHash, { ...uploadedData, arweaveId });
+          this.uploadArweaveIdList.push(arweaveId)
+          this.$emit('arweaveUploaded', { arweaveId })
+          this.isOpenSignDialog = false
+        } else {
+          this.shouldShowAlert = true
+          this.errorMessage = this.$t('IscnRegisterForm.error.arweave') as string
+          this.$emit('handleContinue')
+        }
+      } catch (err) {
+        // TODO: Handle error
+        // eslint-disable-next-line no-console
+        console.error(err)
         this.shouldShowAlert = true
-        this.errorMessage = this.$t('IscnRegisterForm.error.arweave') as string
-        this.$emit('handleContinue')
+        this.errorMessage = (err as Error).toString()
       }
-    } catch (err) {
-      // TODO: Handle error
-      // eslint-disable-next-line no-console
-      console.error(err)
-      this.shouldShowAlert = true
-      this.errorMessage = (err as Error).toString()
-    } finally {
-      this.isUploadingArweave = false;
-      this.uploadStatus = '';
     }
   }
 
-  async submitToNumbers(): Promise<void> {
+  async submitToNumbers(record: any): 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);
+      if (record.fileBlob) formData.append('file', record.fileBlob);
       const {
         numAssetIds: [numbersProtocolAssetId],
       } = await this.$axios.$post(
@@ -1451,7 +1581,7 @@ export default class IscnRegisterForm extends Vue {
           },
         },
       )
-      this.numbersProtocolAssetId = numbersProtocolAssetId
+      this.numbersProtocolAssetIds.set(record.ipfsHash, numbersProtocolAssetId)
       this.$emit('numbers-protocol-registed', { numbersProtocolAssetId })
       this.isOpenSignDialog = false;
     } catch (error) {
@@ -1483,7 +1613,12 @@ export default class IscnRegisterForm extends Vue {
     }
     try {
       this.uploadStatus = 'signing'
-      const res = await signISCNTx(formatISCNTxPayload(this.payload), this.signer, this.address)
+      const res = await signISCNTx(
+        formatISCNTxPayload(this.payload),
+        this.signer,
+        this.address,
+        { gas: this.iscnGasFee },
+      )
       this.uploadStatus = 'success'
       this.$emit('txBroadcasted', res)
       this.isOpenSignDialog = false;
@@ -1497,5 +1632,11 @@ export default class IscnRegisterForm extends Vue {
       this.isOpenQuitAlertDialog = false;
     }
   }
+
+  handleClickExifInfo(index: number) {
+    this.isOpenFileInfoDialog = true
+    this.displayImageSrc = this.fileRecords[index].fileData
+    this.displayExifInfo = this.fileRecords[index].exifInfo
+  }
 }
 </script>
diff --git a/components/IscnUploadForm.vue b/components/IscnUploadForm.vue
index c15a222f..193b4e4d 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,119 @@
               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, exifInfo},
+                    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="h6"
+                        :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="flex gap-[4px] items-center justify-end ml-[4px]">
+                      <div
+                        v-if="exifInfo"
+                        :class="['cursor-pointer']"
+                        @click="handleClickExifInfo(index)"
+                      >
+                        <IconInfo />
+                      </div>
+                      <div
+                        :class="['cursor-pointer']"
+                        @click="handleDeleteFile(index)"
+                      >
+                        <IconDelete />
+                      </div>
+                    </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="displayImageSrc"
+          :all-exif="displayExifInfo"
+        />
+      </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 +184,26 @@ export default class UploadForm extends Vue {
   fileSize: number = 0
   fileType: string = ''
 
+  displayImageSrc: string = ''
+  displayExifInfo: any = null
+
+  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 +217,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 +226,76 @@ 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
+                const exif = await exifr.parse(file)
+                if (exif) {
+                  fileRecord.exifInfo = exif
+                }
+              } 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 +321,18 @@ 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)
+  }
+
+  handleDeleteFile(index: number) {
+    this.fileRecords.splice(index, 1)
   }
 
-  handleInitFile() {
-    this.isImage = false
-    this.ipfsURL = ''
-    this.ipfsHash = ''
-    this.fileData = ''
-    this.fileSHA256 = ''
-    this.fileBlob = null
-    this.exifInfo = null
-    this.fileName = ''
-    this.fileSize = 0
+  handleClickExifInfo(index: number) {
+    this.isOpenFileInfoDialog = true
+    this.displayImageSrc = this.fileRecords[index].fileData
+    this.displayExifInfo = this.fileRecords[index].exifInfo
   }
 }
 </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/constant/index.ts b/constant/index.ts
index 4ea9e079..a09ffea7 100644
--- a/constant/index.ts
+++ b/constant/index.ts
@@ -17,6 +17,7 @@ export const IPFS_VIEW_GATEWAY_URL = 'https://ipfs.io/ipfs';
 export const ISCN_MIN_BALANCE = 0.01;
 
 export const ISCN_GAS_FEE = 200000;
+export const ISCN_GAS_MULTIPLIER = 1.5;
 
 export const ISCN_REGISTRY_NAME = 'likecoin-chain';
 
diff --git a/locales/en.json b/locales/en.json
index 0cedbeb2..50e5bc5f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -217,7 +217,7 @@
   "IscnRegisterForm.label.fileName": "File name",
   "IscnRegisterForm.label.fileType": "File type",
   "IscnRegisterForm.label.numbersProtocol": "Numbers Protocol",
-  "IscnRegisterForm.label.numbersProtocol.details": "Register your asset in {link}",
+  "IscnRegisterForm.label.numbersProtocol.details": "Register your image asset in {link}",
   "IscnRegisterForm.label.numbersProtocol.details.link": "Numbers Protocol",
   "IscnRegisterForm.label.registrant": "Registrant",
   "IscnRegisterForm.label.tags": "Tags",
@@ -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..f592ea60 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 = [{
+          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 = [...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
diff --git a/utils/cosmos/iscn/index.ts b/utils/cosmos/iscn/index.ts
index 9c9ed0eb..6cb1b42c 100644
--- a/utils/cosmos/iscn/index.ts
+++ b/utils/cosmos/iscn/index.ts
@@ -9,10 +9,10 @@ export async function signISCNTx(
   tx: ISCNSignPayload,
   signer: OfflineSigner,
   address: string,
-  { iscnId, memo }: { iscnId?: string, memo?: string } = {},
+  { iscnId, memo, gas}: { iscnId?: string, memo?: string, gas?: string } = {},
 ) {
   const client = await getQueryClient();
-  const res = await sign(tx, signer, address, { memo, iscnId });
+  const res = await sign(tx, signer, address, { memo, iscnId, gas });
   const [newIscnId] = await client.queryISCNIdsByTx(res.transactionHash);
   return {
     iscnId: newIscnId,
diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index 50abb4f9..d450ead7 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;
-  numbersProtocolAssetId: string;
-  fileSHA256: string;
+  ipfsHash: string | string[];
+  arweaveId: string | string[];
+  numbersProtocolAssetId: string | string[];
+  fileSHA256: string | string[];
   type: string;
   publisher?: string,
   author: string;
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index ba43299e..b297003d 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -4,7 +4,7 @@ import { ISCNSignPayload, ISCNSigningClient } from '@likecoin/iscn-js';
 import network from '@/constant/network';
 import { DeliverTxResponse } from '@cosmjs/stargate';
 import { ISCNRegisterPayload } from './iscn.type';
-import { WALLET_TYPE_REPLACER } from '~/constant'
+import { WALLET_TYPE_REPLACER, ISCN_GAS_FEE, DEFAULT_GAS_PRICE } from '~/constant'
 import { getPublisherISCNPayload } from '.';
 import { ISCN_PUBLISHERS } from '~/constant/iscn';
 
@@ -72,10 +72,19 @@ 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}`);
-  if (numbersProtocolAssetId) contentFingerprints.push(`num://${numbersProtocolAssetId}`);
+
+  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://');
+  pushContentFingerprint(numbersProtocolAssetId, 'num://');
+
   if (authorNames.length) {
     for (let i = 0; i < authorNames.length; i += 1) {
       const authorName: string = authorNames[i]
@@ -146,13 +155,36 @@ export async function signISCN(
   tx: ISCNSignPayload,
   signer: OfflineSigner,
   address: string,
-  { iscnId, memo }: { iscnId?: string, memo?: string } = {},
+  {
+    iscnId,
+    memo,
+    gas = ISCN_GAS_FEE.toString(),
+  }: { iscnId?: string, memo?: string, gas?: string } = {},
 ) {
-  const isUpdate = !!iscnId;
-  const signingClient = await getSigningClient();
-  await signingClient.connectWithSigner(network.rpcURL, signer);
-  const signingPromise = isUpdate ? signingClient.updateISCNRecord(address, iscnId as string, tx, { memo: memo || 'app.like.co' })
-    : signingClient.createISCNRecord(address, tx, { memo: memo || 'app.like.co' });
-  const res = await signingPromise;
-  return res as DeliverTxResponse;
+  const isUpdate = !!iscnId
+  const signingClient = await getSigningClient()
+  await signingClient.connectWithSigner(network.rpcURL, signer)
+  const signingPromise = isUpdate
+    ? signingClient.updateISCNRecord(address, iscnId as string, tx, {
+        memo: memo || 'app.like.co',
+        fee: {
+          gas,
+          amount: [{
+              denom: DEFAULT_GAS_PRICE[0].denom,
+              amount: DEFAULT_GAS_PRICE[0].amount.toString(),
+            }],
+        },
+      })
+    : signingClient.createISCNRecord(address, tx, {
+        memo: memo || 'app.like.co',
+        fee: {
+          gas,
+          amount: [{
+              denom: DEFAULT_GAS_PRICE[0].denom,
+              amount: DEFAULT_GAS_PRICE[0].amount.toString(),
+            }],
+        },
+      })
+  const res = await signingPromise
+  return res as DeliverTxResponse
 }