From 16c9c926804108dd6816a44766a9099910f94e0d Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 29 Nov 2024 20:51:12 -0500
Subject: [PATCH 01/44] Start bulk CID import

---
 src/bundles/files/actions.js      | 1 +
 src/files/file-input/FileInput.js | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index d3f349a33..55b80cfa5 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -378,6 +378,7 @@ const actions = () => ({
    * @param {string} src
    * @param {string} name
    */
+  // HERE
   doFilesAddPath: (root, src, name = '') => perform(ACTIONS.ADD_BY_PATH, async (ipfs, { store }) => {
     ensureMFS(store)
 
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index c83ddfbc1..ec9bfb6e6 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -92,6 +92,11 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
+            <Option onClick={this.onAddByPath} id='add-by-path' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
+              isCliTutorModeEnabled={isCliTutorModeEnabled}>
+              <DocumentIcon className='fill-aqua w2 mr1' />
+              Bulk CID Import
+            </Option>
           </DropdownMenu>
         </Dropdown>
 

From 31a6cd06a4a3259ffbec3f5e7c70fef08ea7055b Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 30 Nov 2024 14:08:55 -0500
Subject: [PATCH 02/44] Get functional MVP working with csv file

---
 src/bundles/files/actions.js      | 48 +++++++++++++++++++++++++++++++
 src/files/FilesPage.js            |  9 +++++-
 src/files/file-input/FileInput.js | 30 +++++++++++++++++--
 src/files/header/Header.js        |  1 +
 4 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 55b80cfa5..73c506429 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -399,6 +399,54 @@ const actions = () => ({
     }
   }),
 
+  /**
+ * Reads a CSV file containing CIDs and adds each one to IPFS at the given root path.
+ * @param {FileStream[]} source - The CSV file containing CIDs
+ * @param {string} root - Destination directory in IPFS
+ */
+  doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+    ensureMFS(store)
+
+    if (source.length !== 1) {
+      throw new Error('Please provide exactly one CSV file')
+    }
+
+    // Read the CSV file content
+    const file = source[0]
+    const content = await new Response(file.content).text()
+
+    // Split content into CIDs (assuming one CID per line, comma-separated)
+    const cids = content.split(/[\n,]/).map(cid => cid.trim()).filter(Boolean)
+
+    /** @type {Array<{ path: string, cid: string }>} */
+    const entries = []
+    let progress = 0
+    const totalCids = cids.length
+
+    yield { entries, progress: 0 }
+
+    for (const cid of cids) {
+      try {
+        const src = `/ipfs/${cid}`
+        const dst = realMfsPath(join(root || '/files', cid))
+
+        await ipfs.files.cp(src, dst)
+
+        entries.push({ path: dst, cid })
+        progress = (entries.length / totalCids) * 100
+
+        yield { entries, progress }
+      } catch (err) {
+        console.error(`Failed to add CID ${cid}:`, err)
+        // Continue with next CID even if one fails
+      }
+    }
+
+    yield { entries, progress: 100 }
+    await store.doFilesFetch()
+    return entries
+  }),
+
   /**
    * Creates a download link for the provided files.
    * @param {FileStat[]} files
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index d9a837330..ccad9f994 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -21,7 +21,7 @@ import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
 
 const FilesPage = ({
-  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddPath, doUpdateHash,
+  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddBulkCid, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
@@ -72,6 +72,11 @@ const FilesPage = ({
     doFilesWrite(raw, root)
   }
 
+  const onAddBulkCid = (raw, root = '') => {
+    if (root === '') root = files.path
+    doFilesAddBulkCid(raw, root)
+  }
+
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })
@@ -204,6 +209,7 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
+        onAddBulkCid={onAddBulkCid}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
         onNewFolder={(files) => showModal(NEW_FOLDER, files)}
@@ -277,6 +283,7 @@ export default connect(
   'selectFilesSorting',
   'selectToursEnabled',
   'doFilesWrite',
+  'doFilesAddBulkCid',
   'doFilesDownloadLink',
   'doFilesDownloadCarLink',
   'doFilesSizeGet',
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index ec9bfb6e6..6a1ba964f 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -40,11 +40,21 @@ class FileInput extends React.Component {
     return this.filesInput.click()
   }
 
+  onAddBulkCid = async () => {
+    this.toggleDropdown()
+    return this.bulkCidInput.click()
+  }
+
   onInputChange = (input) => async () => {
     this.props.onAddFiles(normalizeFiles(input.files))
     input.value = null
   }
 
+  onBulkCidInputChange = (input) => async () => {
+    this.props.onAddBulkCid(normalizeFiles(input.files))
+    input.value = null
+  }
+
   onAddByPath = () => {
     this.props.onAddByPath()
     this.toggleDropdown()
@@ -92,8 +102,12 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
-            <Option onClick={this.onAddByPath} id='add-by-path' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
-              isCliTutorModeEnabled={isCliTutorModeEnabled}>
+            <Option onClick={this.onAddBulkCid}
+              // TO-DO:
+              // id='add-bulk-cid'
+              // onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
+              // isCliTutorModeEnabled={isCliTutorModeEnabled}
+            >
               <DocumentIcon className='fill-aqua w2 mr1' />
               Bulk CID Import
             </Option>
@@ -116,6 +130,15 @@ class FileInput extends React.Component {
           webkitdirectory='true'
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
+
+        <input
+          // TO-DO id='file-input'
+          type='file'
+          className='dn'
+          multiple
+          accept='.csv'
+          ref={el => { this.bulkCidInput = el }}
+          onChange={this.onBulkCidInputChange(this.bulkCidInput)} />
       </div>
     )
   }
@@ -125,7 +148,8 @@ FileInput.propTypes = {
   t: PropTypes.func.isRequired,
   onAddFiles: PropTypes.func.isRequired,
   onAddByPath: PropTypes.func.isRequired,
-  onNewFolder: PropTypes.func.isRequired
+  onNewFolder: PropTypes.func.isRequired,
+  onAddBulkCid: PropTypes.func.isRequired
 }
 
 export default connect(
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index ce9142109..a1df8f537 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -93,6 +93,7 @@ class Header extends React.Component {
                   onNewFolder={this.props.onNewFolder}
                   onAddFiles={this.props.onAddFiles}
                   onAddByPath={this.props.onAddByPath}
+                  onAddBulkCid={this.props.onAddBulkCid}
                   onCliTutorMode={this.props.onCliTutorMode}
                 />
                 : <div ref={el => { this.dotsWrapper = el }}>

From 35e392d9fc1d3003809901ebe7f0b2e6a8775cd7 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 30 Nov 2024 20:03:56 -0500
Subject: [PATCH 03/44] Get it working with txt file

---
 src/bundles/files/actions.js      | 27 ++++++++++++++++++++-------
 src/files/file-input/FileInput.js |  2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 73c506429..c8e8d5520 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -408,27 +408,40 @@ const actions = () => ({
     ensureMFS(store)
 
     if (source.length !== 1) {
-      throw new Error('Please provide exactly one CSV file')
+      throw new Error('Please provide exactly one text file')
     }
 
-    // Read the CSV file content
+    // Read the text file content
     const file = source[0]
     const content = await new Response(file.content).text()
 
-    // Split content into CIDs (assuming one CID per line, comma-separated)
-    const cids = content.split(/[\n,]/).map(cid => cid.trim()).filter(Boolean)
+    const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
+    // NOTE: need to add finally fetch later
+    const cidObjects = lines.map((line) => {
+      let actualCid = line
+      let name = line
+      const cidParts = line.split(' ')
+      if (cidParts.length > 1) {
+        actualCid = cidParts[0]
+        name = cidParts.slice(1).join(' ')
+      }
+      return {
+        name,
+        cid: actualCid
+      }
+    })
 
     /** @type {Array<{ path: string, cid: string }>} */
     const entries = []
     let progress = 0
-    const totalCids = cids.length
+    const totalCids = cidObjects.length
 
     yield { entries, progress: 0 }
 
-    for (const cid of cids) {
+    for (const { cid, name } of cidObjects) {
       try {
         const src = `/ipfs/${cid}`
-        const dst = realMfsPath(join(root || '/files', cid))
+        const dst = realMfsPath(join(root || '/files', name || cid))
 
         await ipfs.files.cp(src, dst)
 
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 6a1ba964f..8092cc03f 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -136,7 +136,7 @@ class FileInput extends React.Component {
           type='file'
           className='dn'
           multiple
-          accept='.csv'
+          accept='.txt'
           ref={el => { this.bulkCidInput = el }}
           onChange={this.onBulkCidInputChange(this.bulkCidInput)} />
       </div>

From 31ea2522a266087ee7496e0dcb6b626efde4adfd Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 14:38:09 -0500
Subject: [PATCH 04/44] WIP: bulk import modal UX

---
 src/files/FilesPage.js                        |   9 +-
 src/files/file-input/FileInput.js             |  14 +-
 src/files/header/Header.js                    |   2 +-
 src/files/modals/Modals.js                    |  18 ++
 .../bulk-import-modal/BulkImportModal.js      | 185 ++++++++++++++++++
 5 files changed, 221 insertions(+), 7 deletions(-)
 create mode 100644 src/files/modals/bulk-import-modal/BulkImportModal.js

diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index ccad9f994..e36cf8406 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -15,7 +15,7 @@ import FilesList from './files-list/FilesList.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Icons
-import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
+import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, BULK_CID_IMPORT, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
 import Header from './header/Header.js'
 import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
@@ -72,7 +72,7 @@ const FilesPage = ({
     doFilesWrite(raw, root)
   }
 
-  const onAddBulkCid = (raw, root = '') => {
+  const onBulkCidImport = (raw, root = '') => {
     if (root === '') root = files.path
     doFilesAddBulkCid(raw, root)
   }
@@ -209,9 +209,11 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
-        onAddBulkCid={onAddBulkCid}
+        // onAddBulkCid={onAddBulkCid}
+        // onBulkCidImport={onBulkCidImport}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
+        onBulkCidImport={(files) => showModal(BULK_CID_IMPORT, files)}
         onNewFolder={(files) => showModal(NEW_FOLDER, files)}
         onCliTutorMode={() => showModal(CLI_TUTOR_MODE)}
         handleContextMenu={(...args) => handleContextMenu(...args, true)} />
@@ -232,6 +234,7 @@ const FilesPage = ({
         onShareLink={doFilesShareLink}
         onRemove={doFilesDelete}
         onAddByPath={onAddByPath}
+        onBulkCidImport={onBulkCidImport}
         onPinningSet={doSetPinning}
         onPublish={doPublishIpnsKey}
         cliOptions={cliOptions}
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 8092cc03f..7b6cf6650 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -51,7 +51,8 @@ class FileInput extends React.Component {
   }
 
   onBulkCidInputChange = (input) => async () => {
-    this.props.onAddBulkCid(normalizeFiles(input.files))
+    console.log('onBulkCidInputChange', input)
+    this.props.onBulkCidImport(normalizeFiles(input.files))
     input.value = null
   }
 
@@ -60,6 +61,11 @@ class FileInput extends React.Component {
     this.toggleDropdown()
   }
 
+  onBulkCidImport = () => {
+    this.props.onBulkCidImport()
+    this.toggleDropdown()
+  }
+
   onNewFolder = () => {
     this.props.onNewFolder()
     this.toggleDropdown()
@@ -102,7 +108,9 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
-            <Option onClick={this.onAddBulkCid}
+            <Option
+              // onClick={this.onAddBulkCid}
+              onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
               // onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
@@ -149,7 +157,7 @@ FileInput.propTypes = {
   onAddFiles: PropTypes.func.isRequired,
   onAddByPath: PropTypes.func.isRequired,
   onNewFolder: PropTypes.func.isRequired,
-  onAddBulkCid: PropTypes.func.isRequired
+  onBulkCidImport: PropTypes.func.isRequired
 }
 
 export default connect(
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index a1df8f537..9c438025c 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -93,7 +93,7 @@ class Header extends React.Component {
                   onNewFolder={this.props.onNewFolder}
                   onAddFiles={this.props.onAddFiles}
                   onAddByPath={this.props.onAddByPath}
-                  onAddBulkCid={this.props.onAddBulkCid}
+                  onBulkCidImport={this.props.onBulkCidImport}
                   onCliTutorMode={this.props.onCliTutorMode}
                 />
                 : <div ref={el => { this.dotsWrapper = el }}>
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index 33208190b..dc3eaee97 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -10,6 +10,7 @@ import RenameModal from './rename-modal/RenameModal.js'
 import PinningModal from './pinning-modal/PinningModal.js'
 import RemoveModal from './remove-modal/RemoveModal.js'
 import AddByPathModal from './add-by-path-modal/AddByPathModal.js'
+import BulkImportModal from './bulk-import-modal/BulkImportModal.js'
 import PublishModal from './publish-modal/PublishModal.js'
 import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
 import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
@@ -20,6 +21,7 @@ const SHARE = 'share'
 const RENAME = 'rename'
 const DELETE = 'delete'
 const ADD_BY_PATH = 'add_by_path'
+const BULK_CID_IMPORT = 'bulk_cid_import'
 const CLI_TUTOR_MODE = 'cli_tutor_mode'
 const PINNING = 'pinning'
 const PUBLISH = 'publish'
@@ -30,6 +32,7 @@ export {
   RENAME,
   DELETE,
   ADD_BY_PATH,
+  BULK_CID_IMPORT,
   CLI_TUTOR_MODE,
   PINNING,
   PUBLISH
@@ -63,6 +66,11 @@ class Modals extends React.Component {
     this.leave()
   }
 
+  onBulkCidImport = () => {
+    this.props.onBulkCidImport()
+    this.leave()
+  }
+
   makeDir = (path) => {
     this.props.onMakeDir(join(this.props.root, path))
     this.leave()
@@ -152,6 +160,9 @@ class Modals extends React.Component {
       case ADD_BY_PATH:
         this.setState({ readyToShow: true })
         break
+      case BULK_CID_IMPORT:
+        this.setState({ readyToShow: true })
+        break
       case CLI_TUTOR_MODE:
         this.setState({ command: this.cliCommand(cliOptions, files, root) }, () => {
           this.setState({ readyToShow: true })
@@ -254,6 +265,13 @@ class Modals extends React.Component {
             onCancel={this.leave} />
         </Overlay>
 
+        <Overlay show={show === BULK_CID_IMPORT && readyToShow} onLeave={this.leave}>
+          <BulkImportModal
+            className='outline-0'
+            onBulkCidImport={this.onBulkCidImport}
+            onCancel={this.leave} />
+        </Overlay>
+
         <Overlay show={show === CLI_TUTOR_MODE && readyToShow} onLeave={this.leave}>
           <CliTutorMode onLeave={this.leave} filesPage={true} command={command} t={t}/>
         </Overlay>
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
new file mode 100644
index 000000000..c708b1241
--- /dev/null
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -0,0 +1,185 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../components/button/button.tsx'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
+import { withTranslation } from 'react-i18next'
+import * as isIPFS from 'is-ipfs'
+import Icon from '../../../icons/StrokeDocument.js'
+import { normalizeFiles } from '../../../lib/files.js'
+
+class BulkImportModal extends React.Component {
+  static propTypes = {
+    onCancel: PropTypes.func.isRequired,
+    onBulkCidImport: PropTypes.func.isRequired,
+    className: PropTypes.string
+  }
+
+  static defaultProps = {
+    className: ''
+  }
+
+  state = {
+    path: '',
+    name: '',
+    selectedFile: null
+  }
+
+  validatePath = (p) => {
+    if (!p.startsWith('/ipfs/')) {
+      p = `/ipfs/${p}`
+    }
+
+    return isIPFS.ipfsPath(p)
+  }
+
+  onChange = (event) => {
+    const target = event.target
+    const value = target.value
+    const name = target.name
+    this.setState({ [name]: value })
+  }
+
+  handleFileSelect = (event) => {
+    console.log('File select triggered', event)
+    const file = event.target.files[0]
+    this.setState({ selectedFile: file })
+  }
+
+  onBulkCidInputChange = (event) => async () => {
+    console.log('event', event)
+    console.log('event.files', event.files)
+    // const input = event.target
+    // console.log('Input element:', input)
+    // console.log('Input files:', input?.files)
+    // if (!input || !input.files) {
+    //   console.error('Input or files not available')
+    //   return
+    // }
+    this.props.onBulkCidImport(normalizeFiles(event))
+    // input.value = null
+  }
+
+  onSubmit = () => {
+    console.log('submit')
+  }
+
+  //   onSubmit = () => {
+  //     let { path, name } = this.state
+  //     if (this.validatePath(path)) {
+  //       // avoid issues with paths by forcing a flat filename without leading/trailing spaces
+  //       name = name.replaceAll('/', '_').trim()
+  //       this.props.onSubmit(path, name)
+  //     }
+  //   }
+
+  //   onKeyPress = (event) => {
+  //     if (event.key === 'Enter') {
+  //       this.onSubmit()
+  //     }
+  //   }
+
+  get inputClass () {
+    if (this.state.path === '') {
+      return ''
+    }
+
+    if (this.validatePath(this.state.path)) {
+      return 'b--green-muted focus-outline-green'
+    }
+
+    return 'b--red-muted focus-outline-red'
+  }
+
+  //   get isDisabled () {
+  //     if (this.state.path === '') {
+  //       return true
+  //     }
+
+  //     return !this.validatePath(this.state.path)
+  //   }
+
+  render () {
+    const {
+      t, onCancel, className
+    } = this.props
+
+    const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
+
+    return (
+      <Modal className={className} onCancel={onCancel}>
+        <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
+          <div className='mb3 flex flex-column items-center'>
+            <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
+            <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br/>QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br/>QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
+          </div>
+
+          <input
+            type='file'
+            className='dn'
+            multiple
+            accept='.txt'
+            onChange={this.handleFileSelect}
+            // className='input-reset'
+            id='bulk-import'
+            ref={el => {
+              console.log('Setting ref:', el)
+              this.bulkCidInput = el
+            }}
+            // onChange={this.onBulkCidInputChange(this.bulkCidInput)}
+            // onChange={(e) => {
+            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
+            //   console.log('onChange event:', e)
+            //   console.log('onChange target:', e.target)
+            //   console.log('onChange files:', e.target.files)
+            //   this.onBulkCidInputChange(this.bulkCidInput)
+            // }}
+            // onChange={() => {
+            //   // Make sure we're using the current ref
+            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
+            //   this.onBulkCidInputChange(this.bulkCidInput)()
+            // }}
+          />
+          <Button
+            // onClick={() => {
+            //   if (this.bulkCidInput) {
+            //     this.bulkCidInput.click()
+            //   }
+            // }}
+            onClick={(e) => {
+              console.log('clicked')
+              document.getElementById('bulk-import').click()
+            }}
+            className='ma2 tc'
+            bg='bg-teal'
+            type='button'
+          >
+            {'Select File'}
+          </Button>
+          {this.state.selectedFile && (
+            <p className='mt2 charcoal'>
+              Selected file: {this.state.selectedFile.name}
+            </p>
+          )}
+
+          {/* <input
+            onChange={this.onChange}
+            onKeyPress={this.onKeyPress}
+            value={this.state.value}
+            name='path'
+            required
+            placeholder={t('addByPathModal.importPathPlaceholder')}
+            className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-90 center focus-outline ${this.inputClass}`}
+            type='text' /> */}
+
+        </ModalBody>
+
+        <ModalActions>
+          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onBulkCidInputChange(this.bulkCidInput)}>{t('app:actions.import')}</Button>
+        </ModalActions>
+      </Modal>
+    )
+  }
+}
+
+export default withTranslation('files')(BulkImportModal)

From a85432f2c032b0c7114ac58b17d5956a8c4c548c Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 19:25:54 -0500
Subject: [PATCH 05/44] WIP, need to debug modal UX

---
 src/bundles/files/actions.js                  |  1 +
 src/files/file-input/FileInput.js             |  3 +
 .../bulk-import-modal/BulkImportModal.js      | 68 +++----------------
 3 files changed, 15 insertions(+), 57 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index c8e8d5520..2626a3f89 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -406,6 +406,7 @@ const actions = () => ({
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
     ensureMFS(store)
+    console.log('doFilesAddBulkCid source', source)
 
     if (source.length !== 1) {
       throw new Error('Please provide exactly one text file')
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 7b6cf6650..e73aeca9b 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -50,8 +50,10 @@ class FileInput extends React.Component {
     input.value = null
   }
 
+  // Old implementation that worked
   onBulkCidInputChange = (input) => async () => {
     console.log('onBulkCidInputChange', input)
+    console.log('onBulkCidInputChange files', input.files)
     this.props.onBulkCidImport(normalizeFiles(input.files))
     input.value = null
   }
@@ -139,6 +141,7 @@ class FileInput extends React.Component {
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
 
+        {/* Old implementation that worked */}
         <input
           // TO-DO id='file-input'
           type='file'
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index c708b1241..0f366b445 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -39,45 +39,17 @@ class BulkImportModal extends React.Component {
     this.setState({ [name]: value })
   }
 
-  handleFileSelect = (event) => {
-    console.log('File select triggered', event)
-    const file = event.target.files[0]
-    this.setState({ selectedFile: file })
-  }
-
-  onBulkCidInputChange = (event) => async () => {
-    console.log('event', event)
-    console.log('event.files', event.files)
-    // const input = event.target
-    // console.log('Input element:', input)
-    // console.log('Input files:', input?.files)
-    // if (!input || !input.files) {
-    //   console.error('Input or files not available')
-    //   return
-    // }
-    this.props.onBulkCidImport(normalizeFiles(event))
-    // input.value = null
+  onBulkCidInputChange = (input) => async () => {
+    console.log('input: ', input)
+    this.setState({ selectedFile: input.files })
   }
 
   onSubmit = () => {
-    console.log('submit')
+    console.log('Files to import:', this.state.selectedFile)
+    this.props.onBulkCidImport(normalizeFiles(this.state.selectedFile))
+    // input.value = null
   }
 
-  //   onSubmit = () => {
-  //     let { path, name } = this.state
-  //     if (this.validatePath(path)) {
-  //       // avoid issues with paths by forcing a flat filename without leading/trailing spaces
-  //       name = name.replaceAll('/', '_').trim()
-  //       this.props.onSubmit(path, name)
-  //     }
-  //   }
-
-  //   onKeyPress = (event) => {
-  //     if (event.key === 'Enter') {
-  //       this.onSubmit()
-  //     }
-  //   }
-
   get inputClass () {
     if (this.state.path === '') {
       return ''
@@ -118,36 +90,18 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.handleFileSelect}
+            onChange={this.onBulkCidInputChange(this.bulkCidInput)}
             // className='input-reset'
-            id='bulk-import'
+            // id='bulk-import'
             ref={el => {
               console.log('Setting ref:', el)
               this.bulkCidInput = el
             }}
-            // onChange={this.onBulkCidInputChange(this.bulkCidInput)}
-            // onChange={(e) => {
-            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
-            //   console.log('onChange event:', e)
-            //   console.log('onChange target:', e.target)
-            //   console.log('onChange files:', e.target.files)
-            //   this.onBulkCidInputChange(this.bulkCidInput)
-            // }}
-            // onChange={() => {
-            //   // Make sure we're using the current ref
-            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
-            //   this.onBulkCidInputChange(this.bulkCidInput)()
-            // }}
           />
           <Button
-            // onClick={() => {
-            //   if (this.bulkCidInput) {
-            //     this.bulkCidInput.click()
-            //   }
-            // }}
-            onClick={(e) => {
+            onClick={() => {
               console.log('clicked')
-              document.getElementById('bulk-import').click()
+              this.bulkCidInput.click()
             }}
             className='ma2 tc'
             bg='bg-teal'
@@ -175,7 +129,7 @@ class BulkImportModal extends React.Component {
 
         <ModalActions>
           <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onBulkCidInputChange(this.bulkCidInput)}>{t('app:actions.import')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onSubmit}>{t('app:actions.import')}</Button>
         </ModalActions>
       </Modal>
     )

From 481e7a986366e4d78b9fe6af5cd4a0e89604b461 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 23:39:49 -0500
Subject: [PATCH 06/44] Modal UX working, need to clean up code

---
 src/bundles/files/actions.js                  | 27 +++++++++++---
 src/files/FilesPage.js                        |  2 +
 src/files/file-input/FileInput.js             |  2 +-
 src/files/modals/Modals.js                    |  4 +-
 .../bulk-import-modal/BulkImportModal.js      | 37 +++++++++++--------
 5 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 2626a3f89..bc8fb7716 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -405,15 +405,32 @@ const actions = () => ({
  * @param {string} root - Destination directory in IPFS
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+    console.log('Action parameters:', { source, root })
+    console.log('Arguments:', arguments)
+
     ensureMFS(store)
-    console.log('doFilesAddBulkCid source', source)
 
-    if (source.length !== 1) {
-      throw new Error('Please provide exactly one text file')
+    // Ensure source is properly passed
+    if (!source) {
+      throw new Error('Source is required')
+    }
+
+    // If source is passed as first argument of spawn callback
+    const actualSource = Array.isArray(source) ? source : arguments[0]
+    console.log('Actual source:', actualSource)
+
+    if (!Array.isArray(actualSource)) {
+      throw new Error('Source must be an array')
+    }
+
+    const fileStream = actualSource[0]
+    console.log('fileStream:', fileStream)
+
+    if (!fileStream || !fileStream.content) {
+      throw new Error('Invalid file format')
     }
 
-    // Read the text file content
-    const file = source[0]
+    const file = fileStream
     const content = await new Response(file.content).text()
 
     const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index e36cf8406..7f3e7b29e 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -73,7 +73,9 @@ const FilesPage = ({
   }
 
   const onBulkCidImport = (raw, root = '') => {
+    console.log('FilesPage onBulkCidImport:', { raw, root, filesPath: files.path })
     if (root === '') root = files.path
+    console.log('Calling doFilesAddBulkCid with:', { raw, root })
     doFilesAddBulkCid(raw, root)
   }
 
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index e73aeca9b..332b605e4 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -111,7 +111,7 @@ class FileInput extends React.Component {
               {t('newFolder')}
             </Option>
             <Option
-              // onClick={this.onAddBulkCid}
+              // onClick={this.onAddBulkCid} // This worked before
               onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index dc3eaee97..beb966aed 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -66,8 +66,8 @@ class Modals extends React.Component {
     this.leave()
   }
 
-  onBulkCidImport = () => {
-    this.props.onBulkCidImport()
+  onBulkCidImport = (files, root) => {
+    this.props.onBulkCidImport(files, root)
     this.leave()
   }
 
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 0f366b445..499f6a92f 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -39,15 +39,25 @@ class BulkImportModal extends React.Component {
     this.setState({ [name]: value })
   }
 
-  onBulkCidInputChange = (input) => async () => {
-    console.log('input: ', input)
-    this.setState({ selectedFile: input.files })
+  onBulkCidInputChange = (event) => {
+    const files = event.target.files
+    console.log('files: ', files)
+    this.setState({ selectedFile: files[0] })
+    // console.log('input: ', input)
+    // this.setState({ selectedFile: input.files })
   }
 
-  onSubmit = () => {
-    console.log('Files to import:', this.state.selectedFile)
-    this.props.onBulkCidImport(normalizeFiles(this.state.selectedFile))
-    // input.value = null
+  selectFile = async () => {
+    return this.bulkCidInputt.click()
+  }
+
+  onSubmit = async () => {
+    console.log('BulkImportModal onSubmit:', this.state.selectedFile)
+    if (this.state.selectedFile) {
+      const normalizedFiles = normalizeFiles([this.state.selectedFile])
+      console.log('Calling onBulkCidImport with:', { normalizedFiles, root: '/files' })
+      await this.props.onBulkCidImport(normalizedFiles, '/files')
+    }
   }
 
   get inputClass () {
@@ -72,13 +82,13 @@ class BulkImportModal extends React.Component {
 
   render () {
     const {
-      t, onCancel, className
+      t, tReady, onCancel, onSubmit, className, ...props
     } = this.props
 
     const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
 
     return (
-      <Modal className={className} onCancel={onCancel}>
+      <Modal {...props} className={className} onCancel={onCancel}>
         <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
           <div className='mb3 flex flex-column items-center'>
             <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
@@ -90,19 +100,16 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onBulkCidInputChange(this.bulkCidInput)}
+            onChange={this.onBulkCidInputChange}
             // className='input-reset'
             // id='bulk-import'
             ref={el => {
               console.log('Setting ref:', el)
-              this.bulkCidInput = el
+              this.bulkCidInputt = el
             }}
           />
           <Button
-            onClick={() => {
-              console.log('clicked')
-              this.bulkCidInput.click()
-            }}
+            onClick={this.selectFile}
             className='ma2 tc'
             bg='bg-teal'
             type='button'

From c47e403cfe90490e994c67ded6d8b6c0fb64d874 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 14:45:49 -0500
Subject: [PATCH 07/44] Remove comments

---
 src/bundles/files/actions.js                  |  5 +--
 .../bulk-import-modal/BulkImportModal.js      | 32 +++++--------------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index bc8fb7716..482ba42f0 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -378,7 +378,7 @@ const actions = () => ({
    * @param {string} src
    * @param {string} name
    */
-  // HERE
+
   doFilesAddPath: (root, src, name = '') => perform(ACTIONS.ADD_BY_PATH, async (ipfs, { store }) => {
     ensureMFS(store)
 
@@ -405,9 +405,6 @@ const actions = () => ({
  * @param {string} root - Destination directory in IPFS
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
-    console.log('Action parameters:', { source, root })
-    console.log('Arguments:', arguments)
-
     ensureMFS(store)
 
     // Ensure source is properly passed
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 499f6a92f..2c586dfdf 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -19,8 +19,8 @@ class BulkImportModal extends React.Component {
   }
 
   state = {
-    path: '',
-    name: '',
+    // path: '',
+    // name: '',
     selectedFile: null
   }
 
@@ -33,18 +33,8 @@ class BulkImportModal extends React.Component {
   }
 
   onChange = (event) => {
-    const target = event.target
-    const value = target.value
-    const name = target.name
-    this.setState({ [name]: value })
-  }
-
-  onBulkCidInputChange = (event) => {
     const files = event.target.files
-    console.log('files: ', files)
     this.setState({ selectedFile: files[0] })
-    // console.log('input: ', input)
-    // this.setState({ selectedFile: input.files })
   }
 
   selectFile = async () => {
@@ -52,11 +42,9 @@ class BulkImportModal extends React.Component {
   }
 
   onSubmit = async () => {
-    console.log('BulkImportModal onSubmit:', this.state.selectedFile)
     if (this.state.selectedFile) {
       const normalizedFiles = normalizeFiles([this.state.selectedFile])
-      console.log('Calling onBulkCidImport with:', { normalizedFiles, root: '/files' })
-      await this.props.onBulkCidImport(normalizedFiles, '/files')
+      await this.props.onBulkCidImport(normalizedFiles)
     }
   }
 
@@ -72,13 +60,9 @@ class BulkImportModal extends React.Component {
     return 'b--red-muted focus-outline-red'
   }
 
-  //   get isDisabled () {
-  //     if (this.state.path === '') {
-  //       return true
-  //     }
-
-  //     return !this.validatePath(this.state.path)
-  //   }
+  get isDisabled () {
+    return !this.state.selectedFile
+  }
 
   render () {
     const {
@@ -100,7 +84,7 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onBulkCidInputChange}
+            onChange={this.onChange}
             // className='input-reset'
             // id='bulk-import'
             ref={el => {
@@ -136,7 +120,7 @@ class BulkImportModal extends React.Component {
 
         <ModalActions>
           <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onSubmit}>{t('app:actions.import')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{t('app:actions.import')}</Button>
         </ModalActions>
       </Modal>
     )

From 2d2157df7db99240ba0c63641ff39eec998dfde0 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 15:20:36 -0500
Subject: [PATCH 08/44] Clean code

---
 src/bundles/files/actions.js                  |  3 +--
 src/files/FilesPage.js                        | 11 ++++-----
 src/files/file-input/FileInput.js             | 23 -------------------
 .../bulk-import-modal/BulkImportModal.js      | 12 ----------
 4 files changed, 5 insertions(+), 44 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 482ba42f0..43f9a7d95 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -378,7 +378,6 @@ const actions = () => ({
    * @param {string} src
    * @param {string} name
    */
-
   doFilesAddPath: (root, src, name = '') => perform(ACTIONS.ADD_BY_PATH, async (ipfs, { store }) => {
     ensureMFS(store)
 
@@ -404,7 +403,7 @@ const actions = () => ({
  * @param {FileStream[]} source - The CSV file containing CIDs
  * @param {string} root - Destination directory in IPFS
  */
-  doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+  doFilesBulkCidImport: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
     ensureMFS(store)
 
     // Ensure source is properly passed
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 7f3e7b29e..b61678f16 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -21,7 +21,7 @@ import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
 
 const FilesPage = ({
-  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddBulkCid, doFilesAddPath, doUpdateHash,
+  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesBulkCidImport, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
@@ -73,10 +73,9 @@ const FilesPage = ({
   }
 
   const onBulkCidImport = (raw, root = '') => {
-    console.log('FilesPage onBulkCidImport:', { raw, root, filesPath: files.path })
     if (root === '') root = files.path
-    console.log('Calling doFilesAddBulkCid with:', { raw, root })
-    doFilesAddBulkCid(raw, root)
+
+    doFilesBulkCidImport(raw, root)
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
@@ -211,8 +210,6 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
-        // onAddBulkCid={onAddBulkCid}
-        // onBulkCidImport={onBulkCidImport}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
         onBulkCidImport={(files) => showModal(BULK_CID_IMPORT, files)}
@@ -288,7 +285,7 @@ export default connect(
   'selectFilesSorting',
   'selectToursEnabled',
   'doFilesWrite',
-  'doFilesAddBulkCid',
+  'doFilesBulkCidImport',
   'doFilesDownloadLink',
   'doFilesDownloadCarLink',
   'doFilesSizeGet',
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 332b605e4..a4b310a4c 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -40,24 +40,11 @@ class FileInput extends React.Component {
     return this.filesInput.click()
   }
 
-  onAddBulkCid = async () => {
-    this.toggleDropdown()
-    return this.bulkCidInput.click()
-  }
-
   onInputChange = (input) => async () => {
     this.props.onAddFiles(normalizeFiles(input.files))
     input.value = null
   }
 
-  // Old implementation that worked
-  onBulkCidInputChange = (input) => async () => {
-    console.log('onBulkCidInputChange', input)
-    console.log('onBulkCidInputChange files', input.files)
-    this.props.onBulkCidImport(normalizeFiles(input.files))
-    input.value = null
-  }
-
   onAddByPath = () => {
     this.props.onAddByPath()
     this.toggleDropdown()
@@ -111,7 +98,6 @@ class FileInput extends React.Component {
               {t('newFolder')}
             </Option>
             <Option
-              // onClick={this.onAddBulkCid} // This worked before
               onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
@@ -141,15 +127,6 @@ class FileInput extends React.Component {
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
 
-        {/* Old implementation that worked */}
-        <input
-          // TO-DO id='file-input'
-          type='file'
-          className='dn'
-          multiple
-          accept='.txt'
-          ref={el => { this.bulkCidInput = el }}
-          onChange={this.onBulkCidInputChange(this.bulkCidInput)} />
       </div>
     )
   }
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 2c586dfdf..b22223fa9 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -19,8 +19,6 @@ class BulkImportModal extends React.Component {
   }
 
   state = {
-    // path: '',
-    // name: '',
     selectedFile: null
   }
 
@@ -106,16 +104,6 @@ class BulkImportModal extends React.Component {
             </p>
           )}
 
-          {/* <input
-            onChange={this.onChange}
-            onKeyPress={this.onKeyPress}
-            value={this.state.value}
-            name='path'
-            required
-            placeholder={t('addByPathModal.importPathPlaceholder')}
-            className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-90 center focus-outline ${this.inputClass}`}
-            type='text' /> */}
-
         </ModalBody>
 
         <ModalActions>

From fa5490029e2fd41e3f547988252118adab8b1cd7 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 20:45:29 -0500
Subject: [PATCH 09/44] Add validation to file select

---
 src/files/file-input/FileInput.js             |  1 -
 .../bulk-import-modal/BulkImportModal.js      | 53 +++++++++++--------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index a4b310a4c..d67b2b58c 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -126,7 +126,6 @@ class FileInput extends React.Component {
           webkitdirectory='true'
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
-
       </div>
     )
   }
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index b22223fa9..25dc03172 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -19,20 +19,37 @@ class BulkImportModal extends React.Component {
   }
 
   state = {
-    selectedFile: null
+    selectedFile: null,
+    validationError: null
   }
 
-  validatePath = (p) => {
-    if (!p.startsWith('/ipfs/')) {
-      p = `/ipfs/${p}`
+  validateFileContents = async (file) => {
+    try {
+      const text = await file.text()
+      const lines = text.split('\n').filter(line => line.trim())
+
+      for (const line of lines) {
+        const [cid] = line.trim().split(' ')
+        if (!isIPFS.cid(cid)) {
+          return { isValid: false, error: '*Invalid CID(s) found' }
+        }
+      }
+
+      return { isValid: true }
+    } catch (err) {
+      return { isValid: false, error: '*Failed to read file contents' }
     }
-
-    return isIPFS.ipfsPath(p)
   }
 
-  onChange = (event) => {
-    const files = event.target.files
-    this.setState({ selectedFile: files[0] })
+  onChange = async (event) => {
+    const file = event.target.files[0]
+    if (!file) return
+
+    const validation = await this.validateFileContents(file)
+    this.setState({
+      selectedFile: validation.isValid ? file : null,
+      validationError: validation.error
+    })
   }
 
   selectFile = async () => {
@@ -46,18 +63,6 @@ class BulkImportModal extends React.Component {
     }
   }
 
-  get inputClass () {
-    if (this.state.path === '') {
-      return ''
-    }
-
-    if (this.validatePath(this.state.path)) {
-      return 'b--green-muted focus-outline-green'
-    }
-
-    return 'b--red-muted focus-outline-red'
-  }
-
   get isDisabled () {
     return !this.state.selectedFile
   }
@@ -98,12 +103,18 @@ class BulkImportModal extends React.Component {
           >
             {'Select File'}
           </Button>
+
           {this.state.selectedFile && (
             <p className='mt2 charcoal'>
               Selected file: {this.state.selectedFile.name}
             </p>
           )}
 
+          {this.state.validationError && (
+            <p className='mt2 red'>
+              {this.state.validationError}
+            </p>
+          )}
         </ModalBody>
 
         <ModalActions>

From 274bc3770cb3de0650cba9d026c35a1ff0bff720 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 21:20:53 -0500
Subject: [PATCH 10/44] Use localization

---
 public/locales/en/files.json                  |  9 +++++++++
 src/files/file-input/FileInput.js             |  2 +-
 .../bulk-import-modal/BulkImportModal.js      | 19 ++++++++-----------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 0614e005d..2d849ebe3 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -14,6 +14,7 @@
   "openWithLocalAndPublicGateway": "Try opening it instead with your <1>local gateway</1> or <3>public gateway</3>.",
   "cantBePreviewed": "Sorry, this file can’t be previewed",
   "addByPath": "From IPFS",
+  "bulkImport": "Bulk import",
   "newFolder": "New folder",
   "generating": "Generating…",
   "actions": {
@@ -59,6 +60,14 @@
     "namePlaceholder": "Name (optional)",
     "examples": "Examples:"
   },
+  "bulkImportModal": {
+    "title": "Bulk import with text file",
+    "description": "Upload a text file with a list of CIDs (names are optional). Example:",
+    "select": "Select file",
+    "selectedFile": "Selected file:",
+    "invalidCids": "*Invalid CID(s) found",
+    "failedToReadFile": "*Failed to read file contents"
+  },
   "newFolderModal": {
     "title": "New folder",
     "description": "Insert the name of the folder you want to create."
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index d67b2b58c..f56e55c8f 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -105,7 +105,7 @@ class FileInput extends React.Component {
               // isCliTutorModeEnabled={isCliTutorModeEnabled}
             >
               <DocumentIcon className='fill-aqua w2 mr1' />
-              Bulk CID Import
+              {t('bulkImport')}
             </Option>
           </DropdownMenu>
         </Dropdown>
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 25dc03172..edb94d797 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -31,13 +31,13 @@ class BulkImportModal extends React.Component {
       for (const line of lines) {
         const [cid] = line.trim().split(' ')
         if (!isIPFS.cid(cid)) {
-          return { isValid: false, error: '*Invalid CID(s) found' }
+          return { isValid: false, error: this.props.t('bulkImportModal.invalidCids') }
         }
       }
 
       return { isValid: true }
     } catch (err) {
-      return { isValid: false, error: '*Failed to read file contents' }
+      return { isValid: false, error: this.props.t('bulkImportModal.failedToReadFile') }
     }
   }
 
@@ -53,7 +53,7 @@ class BulkImportModal extends React.Component {
   }
 
   selectFile = async () => {
-    return this.bulkCidInputt.click()
+    return this.bulkCidInput.click()
   }
 
   onSubmit = async () => {
@@ -76,9 +76,9 @@ class BulkImportModal extends React.Component {
 
     return (
       <Modal {...props} className={className} onCancel={onCancel}>
-        <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
+        <ModalBody title={t('bulkImportModal.title')} Icon={Icon}>
           <div className='mb3 flex flex-column items-center'>
-            <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
+            <p className='mt0 charcoal tl w-100'>{t('bulkImportModal.description')}</p>
             <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br/>QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br/>QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
           </div>
 
@@ -90,10 +90,7 @@ class BulkImportModal extends React.Component {
             onChange={this.onChange}
             // className='input-reset'
             // id='bulk-import'
-            ref={el => {
-              console.log('Setting ref:', el)
-              this.bulkCidInputt = el
-            }}
+            ref={el => { this.bulkCidInput = el }}
           />
           <Button
             onClick={this.selectFile}
@@ -101,12 +98,12 @@ class BulkImportModal extends React.Component {
             bg='bg-teal'
             type='button'
           >
-            {'Select File'}
+            {t('bulkImportModal.select')}
           </Button>
 
           {this.state.selectedFile && (
             <p className='mt2 charcoal'>
-              Selected file: {this.state.selectedFile.name}
+              {`${t('bulkImportModal.selectedFile')}: ${this.state.selectedFile.name}`}
             </p>
           )}
 

From 85a9328b01a8741b851419710ce00ab852218f92 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 15:45:06 -0500
Subject: [PATCH 11/44] Add correct type, remove progress tracking

---
 public/locales/en/files.json  |  2 +-
 src/bundles/files/actions.js  | 43 ++++++-----------------------------
 src/bundles/files/consts.js   |  2 ++
 src/bundles/files/protocol.ts |  2 ++
 4 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 2d849ebe3..20db42bf5 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -64,7 +64,7 @@
     "title": "Bulk import with text file",
     "description": "Upload a text file with a list of CIDs (names are optional). Example:",
     "select": "Select file",
-    "selectedFile": "Selected file:",
+    "selectedFile": "Selected file",
     "invalidCids": "*Invalid CID(s) found",
     "failedToReadFile": "*Failed to read file contents"
   },
diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 43f9a7d95..ab7a0d770 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -399,34 +399,19 @@ const actions = () => ({
   }),
 
   /**
- * Reads a CSV file containing CIDs and adds each one to IPFS at the given root path.
- * @param {FileStream[]} source - The CSV file containing CIDs
+ * Reads a text file containing CIDs and adds each one to IPFS at the given root path.
+ * @param {FileStream[]} source - The text file containing CIDs
  * @param {string} root - Destination directory in IPFS
  */
-  doFilesBulkCidImport: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+  doFilesBulkCidImport: (source, root) => perform(ACTIONS.BULK_CID_IMPORT, async function (ipfs, { store }) {
     ensureMFS(store)
 
-    // Ensure source is properly passed
-    if (!source) {
-      throw new Error('Source is required')
+    if (!source?.[0]?.content) {
+      console.error('Invalid file format provided to doFilesBulkCidImport')
+      return
     }
 
-    // If source is passed as first argument of spawn callback
-    const actualSource = Array.isArray(source) ? source : arguments[0]
-    console.log('Actual source:', actualSource)
-
-    if (!Array.isArray(actualSource)) {
-      throw new Error('Source must be an array')
-    }
-
-    const fileStream = actualSource[0]
-    console.log('fileStream:', fileStream)
-
-    if (!fileStream || !fileStream.content) {
-      throw new Error('Invalid file format')
-    }
-
-    const file = fileStream
+    const file = source[0]
     const content = await new Response(file.content).text()
 
     const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
@@ -445,33 +430,19 @@ const actions = () => ({
       }
     })
 
-    /** @type {Array<{ path: string, cid: string }>} */
-    const entries = []
-    let progress = 0
-    const totalCids = cidObjects.length
-
-    yield { entries, progress: 0 }
-
     for (const { cid, name } of cidObjects) {
       try {
         const src = `/ipfs/${cid}`
         const dst = realMfsPath(join(root || '/files', name || cid))
 
         await ipfs.files.cp(src, dst)
-
-        entries.push({ path: dst, cid })
-        progress = (entries.length / totalCids) * 100
-
-        yield { entries, progress }
       } catch (err) {
         console.error(`Failed to add CID ${cid}:`, err)
         // Continue with next CID even if one fails
       }
     }
 
-    yield { entries, progress: 100 }
     await store.doFilesFetch()
-    return entries
   }),
 
   /**
diff --git a/src/bundles/files/consts.js b/src/bundles/files/consts.js
index b5fdac0dc..67383694a 100644
--- a/src/bundles/files/consts.js
+++ b/src/bundles/files/consts.js
@@ -23,6 +23,8 @@ export const ACTIONS = {
   SHARE_LINK: ('FILES_SHARE_LINK'),
   /** @type {'FILES_ADDBYPATH'} */
   ADD_BY_PATH: ('FILES_ADDBYPATH'),
+  /** @type {'FILES_BULK_CID_IMPORT'} */
+  BULK_CID_IMPORT: ('FILES_BULK_CID_IMPORT'),
   /** @type {'FILES_PIN_ADD'} */
   PIN_ADD: ('FILES_PIN_ADD'),
   /** @type {'FILES_PIN_REMOVE'} */
diff --git a/src/bundles/files/protocol.ts b/src/bundles/files/protocol.ts
index c6ca742e2..60076a255 100644
--- a/src/bundles/files/protocol.ts
+++ b/src/bundles/files/protocol.ts
@@ -63,6 +63,7 @@ export type Message =
   | Move
   | Write
   | AddByPath
+  | BulkCidImport
   | DownloadLink
   | Perform<'FILES_SHARE_LINK', Error, string, void>
   | Perform<'FILES_COPY', Error, void, void>
@@ -76,6 +77,7 @@ export type MakeDir = Perform<'FILES_MAKEDIR', Error, void, void>
 export type WriteProgress = { paths: string[], progress: number }
 export type Write = Spawn<'FILES_WRITE', WriteProgress, Error, void, void>
 export type AddByPath = Perform<'FILES_ADDBYPATH', Error, void, void>
+export type BulkCidImport = Perform<'FILES_BULK_CID_IMPORT', Error, void, void>
 export type Move = Perform<'FILES_MOVE', Error, void, void>
 export type Delete = Perform<'FILES_DELETE', Error, void, void>
 export type DownloadLink = Perform<'FILES_DOWNLOADLINK', Error, FileDownload, void>

From d343c881ac89aa8b29c974a3adf57784f79ff840 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 22:03:16 -0500
Subject: [PATCH 12/44] Refactor code

---
 src/bundles/files/actions.js                  | 56 +++++++++----------
 .../bulk-import-modal/BulkImportModal.js      |  2 +-
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index ab7a0d770..7381ff92b 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -411,38 +411,38 @@ const actions = () => ({
       return
     }
 
-    const file = source[0]
-    const content = await new Response(file.content).text()
-
-    const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
-    // NOTE: need to add finally fetch later
-    const cidObjects = lines.map((line) => {
-      let actualCid = line
-      let name = line
-      const cidParts = line.split(' ')
-      if (cidParts.length > 1) {
-        actualCid = cidParts[0]
-        name = cidParts.slice(1).join(' ')
-      }
-      return {
-        name,
-        cid: actualCid
-      }
-    })
+    try {
+      const file = source[0]
+      const content = await new Response(file.content).text()
+      const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
+
+      const cidObjects = lines.map((line) => {
+        let actualCid = line
+        let name = line
+        const cidParts = line.split(' ')
+        if (cidParts.length > 1) {
+          actualCid = cidParts[0]
+          name = cidParts.slice(1).join(' ')
+        }
+        return {
+          name,
+          cid: actualCid
+        }
+      })
 
-    for (const { cid, name } of cidObjects) {
-      try {
-        const src = `/ipfs/${cid}`
-        const dst = realMfsPath(join(root || '/files', name || cid))
+      for (const { cid, name } of cidObjects) {
+        try {
+          const src = `/ipfs/${cid}`
+          const dst = realMfsPath(join(root || '/files', name || cid))
 
-        await ipfs.files.cp(src, dst)
-      } catch (err) {
-        console.error(`Failed to add CID ${cid}:`, err)
-        // Continue with next CID even if one fails
+          await ipfs.files.cp(src, dst)
+        } catch (err) {
+          console.error(`Failed to add CID ${cid}:`, err)
+        }
       }
+    } finally {
+      await store.doFilesFetch()
     }
-
-    await store.doFilesFetch()
   }),
 
   /**
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index edb94d797..3c3b663a5 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -69,7 +69,7 @@ class BulkImportModal extends React.Component {
 
   render () {
     const {
-      t, tReady, onCancel, onSubmit, className, ...props
+      t, tReady, onCancel, className, onBulkCidImport, ...props
     } = this.props
 
     const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'

From 7b80a5dfdd42e0031bbe2d43ebd8ca89b6733cdf Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 22:40:22 -0500
Subject: [PATCH 13/44] Add storybook file

---
 .../BulkImportModal.stories.js                | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/files/modals/bulk-import-modal/BulkImportModal.stories.js

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.stories.js b/src/files/modals/bulk-import-modal/BulkImportModal.stories.js
new file mode 100644
index 000000000..a13e141a7
--- /dev/null
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.stories.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import i18n from '../../../i18n-decorator.js'
+import BulkImportModal from './BulkImportModal.js'
+
+/**
+ * @type {import('@storybook/react').Meta}
+ */
+export default {
+  title: 'Files/Modals',
+  decorators: [i18n]
+}
+
+/**
+ * @type {import('@storybook/react').StoryObj}
+ */
+export const BulkImport = () => (
+  <div className="ma3">
+    <BulkImportModal onCancel={action('Cancel')} onBulkCidImport={action('Bulk CID Import')} />
+  </div>
+)

From 88e787686f482b29595e2a25f7e218531ea5c188 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 23:24:28 -0500
Subject: [PATCH 14/44] Remove comments

---
 src/files/file-input/FileInput.js                     | 8 +-------
 src/files/modals/bulk-import-modal/BulkImportModal.js | 5 ++---
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index f56e55c8f..cd41f0623 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -97,13 +97,7 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
-            <Option
-              onClick={this.onBulkCidImport}
-              // TO-DO:
-              // id='add-bulk-cid'
-              // onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
-              // isCliTutorModeEnabled={isCliTutorModeEnabled}
-            >
+            <Option onClick={this.onBulkCidImport} id='bulk-cid-import'>
               <DocumentIcon className='fill-aqua w2 mr1' />
               {t('bulkImport')}
             </Option>
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 3c3b663a5..0d872804b 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -83,14 +83,13 @@ class BulkImportModal extends React.Component {
           </div>
 
           <input
+            id='bulk-import'
             type='file'
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onChange}
-            // className='input-reset'
-            // id='bulk-import'
             ref={el => { this.bulkCidInput = el }}
+            onChange={this.onChange}
           />
           <Button
             onClick={this.selectFile}

From 8af56b7ccc865e35d7dc4354be966f4af9d7a0d9 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 23:29:22 -0500
Subject: [PATCH 15/44] Update Add menu test

---
 test/e2e/files.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/e2e/files.test.js b/test/e2e/files.test.js
index 9ea7c9fbc..33fcbd578 100644
--- a/test/e2e/files.test.js
+++ b/test/e2e/files.test.js
@@ -19,6 +19,7 @@ test.describe('Files screen', () => {
     await page.waitForSelector('text=Folder')
     await page.waitForSelector('text=From IPFS')
     await page.waitForSelector('text=New folder')
+    await page.waitForSelector('text=Bulk import')
     await page.click(button, { force: true })
   })
 

From 8b56df3e11f343cf7e13ad56db80cabddca74a6d Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 12:53:36 -0500
Subject: [PATCH 16/44] Remove prop-types

---
 src/files/modals/bulk-import-modal/BulkImportModal.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 0d872804b..6a70d2d70 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 import { withTranslation } from 'react-i18next'
@@ -8,12 +7,6 @@ import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
 class BulkImportModal extends React.Component {
-  static propTypes = {
-    onCancel: PropTypes.func.isRequired,
-    onBulkCidImport: PropTypes.func.isRequired,
-    className: PropTypes.string
-  }
-
   static defaultProps = {
     className: ''
   }

From 542ac1b482205097fb5eef2e975b545367e8e1db Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 14:38:21 -0500
Subject: [PATCH 17/44] Use functional component

---
 .../bulk-import-modal/BulkImportModal.js      | 148 ++++++++----------
 1 file changed, 66 insertions(+), 82 deletions(-)

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 6a70d2d70..04dd375ac 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useRef } from 'react'
 import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 import { withTranslation } from 'react-i18next'
@@ -6,17 +6,12 @@ import * as isIPFS from 'is-ipfs'
 import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
-class BulkImportModal extends React.Component {
-  static defaultProps = {
-    className: ''
-  }
-
-  state = {
-    selectedFile: null,
-    validationError: null
-  }
+const BulkImportModal = ({ t, tReady, onCancel, className = '', onBulkCidImport, ...props }) => {
+  const [selectedFile, setSelectedFile] = useState(null)
+  const [validationError, setValidationError] = useState(null)
+  const bulkCidInputRef = useRef(null)
 
-  validateFileContents = async (file) => {
+  const validateFileContents = async (file) => {
     try {
       const text = await file.text()
       const lines = text.split('\n').filter(line => line.trim())
@@ -24,95 +19,84 @@ class BulkImportModal extends React.Component {
       for (const line of lines) {
         const [cid] = line.trim().split(' ')
         if (!isIPFS.cid(cid)) {
-          return { isValid: false, error: this.props.t('bulkImportModal.invalidCids') }
+          return { isValid: false, error: t('bulkImportModal.invalidCids') }
         }
       }
 
       return { isValid: true }
     } catch (err) {
-      return { isValid: false, error: this.props.t('bulkImportModal.failedToReadFile') }
+      return { isValid: false, error: t('bulkImportModal.failedToReadFile') }
     }
   }
 
-  onChange = async (event) => {
+  const onChange = async (event) => {
     const file = event.target.files[0]
     if (!file) return
 
-    const validation = await this.validateFileContents(file)
-    this.setState({
-      selectedFile: validation.isValid ? file : null,
-      validationError: validation.error
-    })
+    const validation = await validateFileContents(file)
+    setSelectedFile(validation.isValid ? file : null)
+    setValidationError(validation.error)
   }
 
-  selectFile = async () => {
-    return this.bulkCidInput.click()
+  const selectFile = () => {
+    bulkCidInputRef.current.click()
   }
 
-  onSubmit = async () => {
-    if (this.state.selectedFile) {
-      const normalizedFiles = normalizeFiles([this.state.selectedFile])
-      await this.props.onBulkCidImport(normalizedFiles)
+  const onSubmit = async () => {
+    if (selectedFile) {
+      const normalizedFiles = normalizeFiles([selectedFile])
+      await onBulkCidImport(normalizedFiles)
     }
   }
 
-  get isDisabled () {
-    return !this.state.selectedFile
-  }
-
-  render () {
-    const {
-      t, tReady, onCancel, className, onBulkCidImport, ...props
-    } = this.props
-
-    const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
-
-    return (
-      <Modal {...props} className={className} onCancel={onCancel}>
-        <ModalBody title={t('bulkImportModal.title')} Icon={Icon}>
-          <div className='mb3 flex flex-column items-center'>
-            <p className='mt0 charcoal tl w-100'>{t('bulkImportModal.description')}</p>
-            <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br/>QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br/>QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
-          </div>
-
-          <input
-            id='bulk-import'
-            type='file'
-            className='dn'
-            multiple
-            accept='.txt'
-            ref={el => { this.bulkCidInput = el }}
-            onChange={this.onChange}
-          />
-          <Button
-            onClick={this.selectFile}
-            className='ma2 tc'
-            bg='bg-teal'
-            type='button'
-          >
-            {t('bulkImportModal.select')}
-          </Button>
-
-          {this.state.selectedFile && (
-            <p className='mt2 charcoal'>
-              {`${t('bulkImportModal.selectedFile')}: ${this.state.selectedFile.name}`}
-            </p>
-          )}
-
-          {this.state.validationError && (
-            <p className='mt2 red'>
-              {this.state.validationError}
-            </p>
-          )}
-        </ModalBody>
-
-        <ModalActions>
-          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{t('app:actions.import')}</Button>
-        </ModalActions>
-      </Modal>
-    )
-  }
+  const isDisabled = !selectedFile
+  const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
+
+  return (
+    <Modal {...props} className={className} onCancel={onCancel}>
+      <ModalBody title={t('bulkImportModal.title')} Icon={Icon}>
+        <div className='mb3 flex flex-column items-center'>
+          <p className='mt0 charcoal tl w-100'>{t('bulkImportModal.description')}</p>
+          <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br />QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br />QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
+        </div>
+
+        <input
+          id='bulk-import'
+          type='file'
+          className='dn'
+          multiple
+          accept='.txt'
+          ref={bulkCidInputRef}
+          onChange={onChange}
+        />
+        <Button
+          onClick={selectFile}
+          className='ma2 tc'
+          bg='bg-teal'
+          type='button'
+        >
+          {t('bulkImportModal.select')}
+        </Button>
+
+        {selectedFile && (
+          <p className='mt2 charcoal'>
+            {`${t('bulkImportModal.selectedFile')}: ${selectedFile.name}`}
+          </p>
+        )}
+
+        {validationError && (
+          <p className='mt2 red'>
+            {validationError}
+          </p>
+        )}
+      </ModalBody>
+
+      <ModalActions>
+        <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+        <Button className='ma2 tc' bg='bg-teal' disabled={isDisabled} onClick={onSubmit}>{t('app:actions.import')}</Button>
+      </ModalActions>
+    </Modal>
+  )
 }
 
 export default withTranslation('files')(BulkImportModal)

From 90a648770ca479e0b2e1737b776d4db6ab26e868 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 14:58:49 -0500
Subject: [PATCH 18/44] Use useTranslation

---
 src/files/modals/bulk-import-modal/BulkImportModal.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 04dd375ac..86e5accbe 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -1,15 +1,16 @@
 import React, { useState, useRef } from 'react'
 import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
-import { withTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import * as isIPFS from 'is-ipfs'
 import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
-const BulkImportModal = ({ t, tReady, onCancel, className = '', onBulkCidImport, ...props }) => {
+const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }) => {
   const [selectedFile, setSelectedFile] = useState(null)
   const [validationError, setValidationError] = useState(null)
   const bulkCidInputRef = useRef(null)
+  const { t } = useTranslation('files')
 
   const validateFileContents = async (file) => {
     try {
@@ -99,4 +100,4 @@ const BulkImportModal = ({ t, tReady, onCancel, className = '', onBulkCidImport,
   )
 }
 
-export default withTranslation('files')(BulkImportModal)
+export default BulkImportModal

From 45eaacb23a43ed96b726a33ce8b4d4c05290e317 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 15:38:26 -0500
Subject: [PATCH 19/44] Update to TS file

---
 src/components/modal/Modal.js                       | 13 ++-----------
 src/files/modals/Modals.js                          |  2 +-
 ...odal.stories.js => bulk-import-modal.stories.js} |  2 +-
 .../{BulkImportModal.js => bulk-import-modal.tsx}   | 11 ++++++-----
 4 files changed, 10 insertions(+), 18 deletions(-)
 rename src/files/modals/bulk-import-modal/{BulkImportModal.stories.js => bulk-import-modal.stories.js} (89%)
 rename src/files/modals/bulk-import-modal/{BulkImportModal.js => bulk-import-modal.tsx} (91%)

diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
index 778d30ae2..05695bb3d 100644
--- a/src/components/modal/Modal.js
+++ b/src/components/modal/Modal.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import CancelIcon from '../../icons/GlyphSmallCancel.js'
 
-export const ModalActions = ({ justify, className, children, ...props }) => (
+export const ModalActions = ({ justify = 'between', className = '', children, ...props }) => (
   <div className={`flex justify-${justify} pa2 ${className}`} style={{ backgroundColor: '#f4f6f8' }} {...props}>
     { children }
   </div>
@@ -13,12 +13,7 @@ ModalActions.propTypes = {
   className: PropTypes.string
 }
 
-ModalActions.defaultProps = {
-  justify: 'between',
-  className: ''
-}
-
-export const ModalBody = ({ className, Icon, title, children, ...props }) => (
+export const ModalBody = ({ className = '', Icon, title, children, ...props }) => (
   <div className={`ph4 pv3 tc ${className}`} {...props}>
     { Icon && (
       <div className='center bg-snow br-100 flex justify-center items-center' style={{ width: '80px', height: '80px' }}>
@@ -40,10 +35,6 @@ ModalBody.propTypes = {
   ])
 }
 
-ModalBody.defaultProps = {
-  className: ''
-}
-
 export const Modal = ({ onCancel, children, className, ...props }) => {
   return (
     <div className={`${className} bg-white w-80 shadow-4 sans-serif relative`} style={{ maxWidth: '34em' }} {...props}>
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index beb966aed..5ccebac50 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -10,7 +10,7 @@ import RenameModal from './rename-modal/RenameModal.js'
 import PinningModal from './pinning-modal/PinningModal.js'
 import RemoveModal from './remove-modal/RemoveModal.js'
 import AddByPathModal from './add-by-path-modal/AddByPathModal.js'
-import BulkImportModal from './bulk-import-modal/BulkImportModal.js'
+import BulkImportModal from './bulk-import-modal/bulk-import-modal.tsx'
 import PublishModal from './publish-modal/PublishModal.js'
 import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
 import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.stories.js b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
similarity index 89%
rename from src/files/modals/bulk-import-modal/BulkImportModal.stories.js
rename to src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
index a13e141a7..2d3d10eb4 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.stories.js
+++ b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import i18n from '../../../i18n-decorator.js'
-import BulkImportModal from './BulkImportModal.js'
+import BulkImportModal from './bulk-import-modal.js'
 
 /**
  * @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/bulk-import-modal.tsx
similarity index 91%
rename from src/files/modals/bulk-import-modal/BulkImportModal.js
rename to src/files/modals/bulk-import-modal/bulk-import-modal.tsx
index 86e5accbe..6702a32c3 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/bulk-import-modal.tsx
@@ -7,9 +7,9 @@ import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
 const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }) => {
-  const [selectedFile, setSelectedFile] = useState(null)
-  const [validationError, setValidationError] = useState(null)
-  const bulkCidInputRef = useRef(null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [validationError, setValidationError] = useState<string | undefined>(undefined)
+  const bulkCidInputRef = useRef<HTMLInputElement>(null)
   const { t } = useTranslation('files')
 
   const validateFileContents = async (file) => {
@@ -40,7 +40,9 @@ const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }
   }
 
   const selectFile = () => {
-    bulkCidInputRef.current.click()
+    if (bulkCidInputRef.current) {
+      bulkCidInputRef.current.click()
+    }
   }
 
   const onSubmit = async () => {
@@ -74,7 +76,6 @@ const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }
           onClick={selectFile}
           className='ma2 tc'
           bg='bg-teal'
-          type='button'
         >
           {t('bulkImportModal.select')}
         </Button>

From fb30c308fcc998e2fb3392509d256d4394947d7e Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 17:27:53 -0500
Subject: [PATCH 20/44] Update import path

---
 src/files/modals/bulk-import-modal/bulk-import-modal.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
index 2d3d10eb4..17d585019 100644
--- a/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
+++ b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import i18n from '../../../i18n-decorator.js'
-import BulkImportModal from './bulk-import-modal.js'
+import BulkImportModal from './bulk-import-modal.tsx'
 
 /**
  * @type {import('@storybook/react').Meta}

From 0e00a85e83771a201080c66f353aa03e73d28815 Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Fri, 29 Nov 2024 22:11:43 +0100
Subject: [PATCH 21/44] fix(explore): browsing chunked files and inspecting via
 context menu (#2305)

* fix(explore): chunked files

This includes latest ipld-explorer-components with fix from
https://github.com/ipfs/ipld-explorer-components/issues/462

also bumped kubo and caniuse and non-breaking audit suggestions

* fix(files): Inspect via context menu

Closes #2306
---
 package-lock.json      | 82 +++++++++++++++++++++---------------------
 package.json           |  4 +--
 src/files/FilesPage.js |  2 +-
 test/e2e/files.test.js | 33 +++++++++++++++++
 4 files changed, 77 insertions(+), 44 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dd68ec2c7..c28dea85e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "ipfs-css": "^1.4.0",
         "ipfs-geoip": "^9.1.0",
         "ipfs-provider": "^2.1.0",
-        "ipld-explorer-components": "^8.1.0",
+        "ipld-explorer-components": "^8.1.2",
         "is-ipfs": "^8.0.1",
         "istextorbinary": "^6.0.0",
         "it-all": "^1.0.5",
@@ -135,7 +135,7 @@
         "ipfsd-ctl": "^14.1.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "kubo": "^0.30.0",
+        "kubo": "^0.32.1",
         "npm-run-all": "^4.1.5",
         "nyc": "^15.1.0",
         "os-browserify": "^0.3.0",
@@ -17891,6 +17891,16 @@
         "@types/json-schema": "*"
       }
     },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/esm": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/esm/-/esm-3.2.2.tgz",
@@ -27681,9 +27691,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001676",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001676.tgz",
-      "integrity": "sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==",
+      "version": "1.0.30001684",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz",
+      "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -27697,8 +27707,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/capital-case": {
       "version": "1.0.4",
@@ -30034,9 +30043,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -41688,9 +41697,9 @@
       }
     },
     "node_modules/ipld-explorer-components": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/ipld-explorer-components/-/ipld-explorer-components-8.1.0.tgz",
-      "integrity": "sha512-NtpIX1zFTol/IZUVlWQPc9RNGpBKZv4dxTMW3HUiEkshg134noA8cLYTA+ntaxQShlYZKcAZxZSZDIvwMQN1bQ==",
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/ipld-explorer-components/-/ipld-explorer-components-8.1.2.tgz",
+      "integrity": "sha512-dCUMTw/z28GGrrW3QkwD3inQ5Mg+BGJjGvfh9m/QSAibsHV3vBJuBb7Q1qp/BsvnktbCfLMgM8Km+K+F9E8tPQ==",
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "@helia/block-brokers": "^4.0.0",
@@ -47697,9 +47706,9 @@
       }
     },
     "node_modules/kubo": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/kubo/-/kubo-0.30.0.tgz",
-      "integrity": "sha512-wrHaNtlyn59SQmkIiXSP3VAwebqImNkCuhTDJ70lSDXr3Rd9av8s2YzYblSHShtiEC5ylC0pofwDNPP8+F2yiw==",
+      "version": "0.32.1",
+      "resolved": "https://registry.npmjs.org/kubo/-/kubo-0.32.1.tgz",
+      "integrity": "sha512-vXTprOeWACNpU86ldCBSBMRgq4MahLIr/YBn6DBb0SvHHVe4ZD8Djma6ncfVmxzrWxEiIMq9XOxJcQ27UOZ6kw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -53521,9 +53530,9 @@
       "license": "MIT"
     },
     "node_modules/npm-run-all/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -57889,9 +57898,9 @@
       }
     },
     "node_modules/patch-package/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -66805,9 +66814,9 @@
       }
     },
     "node_modules/sane/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -74118,18 +74127,18 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.95.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
-      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
+      "version": "5.96.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.96.1.tgz",
+      "integrity": "sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==",
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "^1.0.5",
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.6",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
-        "acorn": "^8.7.1",
-        "acorn-import-attributes": "^1.9.5",
-        "browserslist": "^4.21.10",
+        "acorn": "^8.14.0",
+        "browserslist": "^4.24.0",
         "chrome-trace-event": "^1.0.2",
         "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
@@ -74550,15 +74559,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn-import-attributes": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
-      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "acorn": "^8"
-      }
-    },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
diff --git a/package.json b/package.json
index 6a721e48b..d5195c0cf 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "ipfs-css": "^1.4.0",
     "ipfs-geoip": "^9.1.0",
     "ipfs-provider": "^2.1.0",
-    "ipld-explorer-components": "^8.1.0",
+    "ipld-explorer-components": "^8.1.2",
     "is-ipfs": "^8.0.1",
     "istextorbinary": "^6.0.0",
     "it-all": "^1.0.5",
@@ -165,7 +165,7 @@
     "ipfsd-ctl": "^14.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "kubo": "^0.30.0",
+    "kubo": "^0.32.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 1692ec486..d9a837330 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -73,7 +73,7 @@ const FilesPage = ({
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
-  const onInspect = (cid) => doUpdateHash(`/explore/ipfs/${cid}`)
+  const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })
   const hideModal = () => setModals({})
   const handleContextMenu = (ev, clickType, file, pos) => {
diff --git a/test/e2e/files.test.js b/test/e2e/files.test.js
index b2566a550..9ea7c9fbc 100644
--- a/test/e2e/files.test.js
+++ b/test/e2e/files.test.js
@@ -62,4 +62,37 @@ test.describe('Files screen', () => {
       await page.waitForSelector(`text=${human(file.size)}`)
     }
   })
+
+  test('should have active Context menu that allows Inspection of the DAG', async ({ page }) => {
+    // dedicated test file to make this isolated from the rest
+    const testFilename = 'explorer-context-menu-test.txt'
+    const testCid = 'bafkqaddjnzzxazldoqwxizltoq'
+
+    // first: create a test file
+    const button = 'button[id="import-button"]'
+    await page.waitForSelector(button, { state: 'visible' })
+    await page.click(button)
+    await page.waitForSelector('#add-by-path', { state: 'visible' })
+    page.click('button[id="add-by-path"]')
+    await page.waitForSelector('div[role="dialog"] input[name="name"]')
+    await page.fill('div[role="dialog"] input[name="path"]', `/ipfs/${testCid}`)
+    await page.fill('div[role="dialog"] input[name="name"]', testFilename)
+    await page.keyboard.press('Enter')
+    // expect file with matching filename to be added to the file list
+    await page.waitForSelector(`.File:has-text("${testFilename}")`)
+
+    // open context menu
+    const cbutton = `button[aria-label="View more options for ${testFilename}"]`
+    await page.waitForSelector(cbutton, { state: 'visible' })
+    await page.click(cbutton, { force: true })
+    await page.waitForSelector('text=Inspect', { state: 'visible' })
+
+    // click on Inspect option
+    await page.waitForSelector('text=Inspect', { state: 'visible' })
+    await page.locator('button:has-text("Inspect"):enabled').click({ force: true })
+
+    // confirm Explore screen was opened with correct CID
+    await page.waitForURL(`/#/explore/${testCid}`)
+    await page.waitForSelector('text="CID info"')
+  })
 })

From 48b55fd6f1ab29bc3f477dee0912f09b109c8055 Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Sat, 30 Nov 2024 00:59:39 +0100
Subject: [PATCH 22/44] chore(ci): set cluster pin timeout to 30m

https://github.com/ipfs/ipfs-webui/actions/workflows/ci.yml?page=4&query=is%3Asuccess
are usually under 10-20 minutes
if something takes longer it will likely take ages and then fail,
so better to fail faster, allowing user to retry release
---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d0fbc0616..bde6197ae 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -135,6 +135,7 @@ jobs:
           CLUSTER_USER: ${{ secrets.CLUSTER_USER }}
           CLUSTER_PASSWORD: ${{ secrets.CLUSTER_PASSWORD }}
           PIN_NAME: "ipfs-webui@${{ github.sha }}"
+        timeout-minutes: 15
 
       - name: Fail job due to pinning failure
         # only fail if pinning failed for main commits

From 7177f71b9277ec275a3359a6dc1ef646808be31e Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Sat, 30 Nov 2024 02:16:54 +0100
Subject: [PATCH 23/44] chore(ci): use repo in offline mode

no need to start node and open outgoing connections
github CI may be punishing us by throttling egress
---
 .github/workflows/ci.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bde6197ae..e10177277 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -70,8 +70,7 @@ jobs:
         run: |
           # fix resolv - DNS provided by Github is unreliable for DNSLik/dnsaddr
           sudo sed -i -e 's/nameserver 127.0.0.*/nameserver 1.1.1.1/g' /etc/resolv.conf
-
-      - uses: ipfs/start-ipfs-daemon-action@v1
+      - run: ipfs init
       - name: Import build/ to IPFS
         id: ipfs
         run: |

From 991f019318ef93c2d51f4a596667b1ddc3ed03f4 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 30 Nov 2024 14:08:55 -0500
Subject: [PATCH 24/44] Get functional MVP working with csv file

---
 src/bundles/files/actions.js      | 48 +++++++++++++++++++++++++++++++
 src/files/FilesPage.js            |  9 +++++-
 src/files/file-input/FileInput.js | 30 +++++++++++++++++--
 src/files/header/Header.js        |  1 +
 4 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 55b80cfa5..73c506429 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -399,6 +399,54 @@ const actions = () => ({
     }
   }),
 
+  /**
+ * Reads a CSV file containing CIDs and adds each one to IPFS at the given root path.
+ * @param {FileStream[]} source - The CSV file containing CIDs
+ * @param {string} root - Destination directory in IPFS
+ */
+  doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+    ensureMFS(store)
+
+    if (source.length !== 1) {
+      throw new Error('Please provide exactly one CSV file')
+    }
+
+    // Read the CSV file content
+    const file = source[0]
+    const content = await new Response(file.content).text()
+
+    // Split content into CIDs (assuming one CID per line, comma-separated)
+    const cids = content.split(/[\n,]/).map(cid => cid.trim()).filter(Boolean)
+
+    /** @type {Array<{ path: string, cid: string }>} */
+    const entries = []
+    let progress = 0
+    const totalCids = cids.length
+
+    yield { entries, progress: 0 }
+
+    for (const cid of cids) {
+      try {
+        const src = `/ipfs/${cid}`
+        const dst = realMfsPath(join(root || '/files', cid))
+
+        await ipfs.files.cp(src, dst)
+
+        entries.push({ path: dst, cid })
+        progress = (entries.length / totalCids) * 100
+
+        yield { entries, progress }
+      } catch (err) {
+        console.error(`Failed to add CID ${cid}:`, err)
+        // Continue with next CID even if one fails
+      }
+    }
+
+    yield { entries, progress: 100 }
+    await store.doFilesFetch()
+    return entries
+  }),
+
   /**
    * Creates a download link for the provided files.
    * @param {FileStat[]} files
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index d9a837330..ccad9f994 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -21,7 +21,7 @@ import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
 
 const FilesPage = ({
-  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddPath, doUpdateHash,
+  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddBulkCid, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
@@ -72,6 +72,11 @@ const FilesPage = ({
     doFilesWrite(raw, root)
   }
 
+  const onAddBulkCid = (raw, root = '') => {
+    if (root === '') root = files.path
+    doFilesAddBulkCid(raw, root)
+  }
+
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })
@@ -204,6 +209,7 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
+        onAddBulkCid={onAddBulkCid}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
         onNewFolder={(files) => showModal(NEW_FOLDER, files)}
@@ -277,6 +283,7 @@ export default connect(
   'selectFilesSorting',
   'selectToursEnabled',
   'doFilesWrite',
+  'doFilesAddBulkCid',
   'doFilesDownloadLink',
   'doFilesDownloadCarLink',
   'doFilesSizeGet',
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index ec9bfb6e6..6a1ba964f 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -40,11 +40,21 @@ class FileInput extends React.Component {
     return this.filesInput.click()
   }
 
+  onAddBulkCid = async () => {
+    this.toggleDropdown()
+    return this.bulkCidInput.click()
+  }
+
   onInputChange = (input) => async () => {
     this.props.onAddFiles(normalizeFiles(input.files))
     input.value = null
   }
 
+  onBulkCidInputChange = (input) => async () => {
+    this.props.onAddBulkCid(normalizeFiles(input.files))
+    input.value = null
+  }
+
   onAddByPath = () => {
     this.props.onAddByPath()
     this.toggleDropdown()
@@ -92,8 +102,12 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
-            <Option onClick={this.onAddByPath} id='add-by-path' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
-              isCliTutorModeEnabled={isCliTutorModeEnabled}>
+            <Option onClick={this.onAddBulkCid}
+              // TO-DO:
+              // id='add-bulk-cid'
+              // onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
+              // isCliTutorModeEnabled={isCliTutorModeEnabled}
+            >
               <DocumentIcon className='fill-aqua w2 mr1' />
               Bulk CID Import
             </Option>
@@ -116,6 +130,15 @@ class FileInput extends React.Component {
           webkitdirectory='true'
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
+
+        <input
+          // TO-DO id='file-input'
+          type='file'
+          className='dn'
+          multiple
+          accept='.csv'
+          ref={el => { this.bulkCidInput = el }}
+          onChange={this.onBulkCidInputChange(this.bulkCidInput)} />
       </div>
     )
   }
@@ -125,7 +148,8 @@ FileInput.propTypes = {
   t: PropTypes.func.isRequired,
   onAddFiles: PropTypes.func.isRequired,
   onAddByPath: PropTypes.func.isRequired,
-  onNewFolder: PropTypes.func.isRequired
+  onNewFolder: PropTypes.func.isRequired,
+  onAddBulkCid: PropTypes.func.isRequired
 }
 
 export default connect(
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index ce9142109..a1df8f537 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -93,6 +93,7 @@ class Header extends React.Component {
                   onNewFolder={this.props.onNewFolder}
                   onAddFiles={this.props.onAddFiles}
                   onAddByPath={this.props.onAddByPath}
+                  onAddBulkCid={this.props.onAddBulkCid}
                   onCliTutorMode={this.props.onCliTutorMode}
                 />
                 : <div ref={el => { this.dotsWrapper = el }}>

From 21b0aa10f56484eaa729540960951090b029a878 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 30 Nov 2024 20:03:56 -0500
Subject: [PATCH 25/44] Get it working with txt file

---
 src/bundles/files/actions.js      | 27 ++++++++++++++++++++-------
 src/files/file-input/FileInput.js |  2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 73c506429..c8e8d5520 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -408,27 +408,40 @@ const actions = () => ({
     ensureMFS(store)
 
     if (source.length !== 1) {
-      throw new Error('Please provide exactly one CSV file')
+      throw new Error('Please provide exactly one text file')
     }
 
-    // Read the CSV file content
+    // Read the text file content
     const file = source[0]
     const content = await new Response(file.content).text()
 
-    // Split content into CIDs (assuming one CID per line, comma-separated)
-    const cids = content.split(/[\n,]/).map(cid => cid.trim()).filter(Boolean)
+    const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
+    // NOTE: need to add finally fetch later
+    const cidObjects = lines.map((line) => {
+      let actualCid = line
+      let name = line
+      const cidParts = line.split(' ')
+      if (cidParts.length > 1) {
+        actualCid = cidParts[0]
+        name = cidParts.slice(1).join(' ')
+      }
+      return {
+        name,
+        cid: actualCid
+      }
+    })
 
     /** @type {Array<{ path: string, cid: string }>} */
     const entries = []
     let progress = 0
-    const totalCids = cids.length
+    const totalCids = cidObjects.length
 
     yield { entries, progress: 0 }
 
-    for (const cid of cids) {
+    for (const { cid, name } of cidObjects) {
       try {
         const src = `/ipfs/${cid}`
-        const dst = realMfsPath(join(root || '/files', cid))
+        const dst = realMfsPath(join(root || '/files', name || cid))
 
         await ipfs.files.cp(src, dst)
 
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 6a1ba964f..8092cc03f 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -136,7 +136,7 @@ class FileInput extends React.Component {
           type='file'
           className='dn'
           multiple
-          accept='.csv'
+          accept='.txt'
           ref={el => { this.bulkCidInput = el }}
           onChange={this.onBulkCidInputChange(this.bulkCidInput)} />
       </div>

From febbc95d336036a10d507fca3b7a65350935fc87 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 14:38:09 -0500
Subject: [PATCH 26/44] WIP: bulk import modal UX

---
 src/files/FilesPage.js                        |   9 +-
 src/files/file-input/FileInput.js             |  14 +-
 src/files/header/Header.js                    |   2 +-
 src/files/modals/Modals.js                    |  18 ++
 .../bulk-import-modal/BulkImportModal.js      | 185 ++++++++++++++++++
 5 files changed, 221 insertions(+), 7 deletions(-)
 create mode 100644 src/files/modals/bulk-import-modal/BulkImportModal.js

diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index ccad9f994..e36cf8406 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -15,7 +15,7 @@ import FilesList from './files-list/FilesList.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Icons
-import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
+import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, BULK_CID_IMPORT, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
 import Header from './header/Header.js'
 import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
@@ -72,7 +72,7 @@ const FilesPage = ({
     doFilesWrite(raw, root)
   }
 
-  const onAddBulkCid = (raw, root = '') => {
+  const onBulkCidImport = (raw, root = '') => {
     if (root === '') root = files.path
     doFilesAddBulkCid(raw, root)
   }
@@ -209,9 +209,11 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
-        onAddBulkCid={onAddBulkCid}
+        // onAddBulkCid={onAddBulkCid}
+        // onBulkCidImport={onBulkCidImport}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
+        onBulkCidImport={(files) => showModal(BULK_CID_IMPORT, files)}
         onNewFolder={(files) => showModal(NEW_FOLDER, files)}
         onCliTutorMode={() => showModal(CLI_TUTOR_MODE)}
         handleContextMenu={(...args) => handleContextMenu(...args, true)} />
@@ -232,6 +234,7 @@ const FilesPage = ({
         onShareLink={doFilesShareLink}
         onRemove={doFilesDelete}
         onAddByPath={onAddByPath}
+        onBulkCidImport={onBulkCidImport}
         onPinningSet={doSetPinning}
         onPublish={doPublishIpnsKey}
         cliOptions={cliOptions}
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 8092cc03f..7b6cf6650 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -51,7 +51,8 @@ class FileInput extends React.Component {
   }
 
   onBulkCidInputChange = (input) => async () => {
-    this.props.onAddBulkCid(normalizeFiles(input.files))
+    console.log('onBulkCidInputChange', input)
+    this.props.onBulkCidImport(normalizeFiles(input.files))
     input.value = null
   }
 
@@ -60,6 +61,11 @@ class FileInput extends React.Component {
     this.toggleDropdown()
   }
 
+  onBulkCidImport = () => {
+    this.props.onBulkCidImport()
+    this.toggleDropdown()
+  }
+
   onNewFolder = () => {
     this.props.onNewFolder()
     this.toggleDropdown()
@@ -102,7 +108,9 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
-            <Option onClick={this.onAddBulkCid}
+            <Option
+              // onClick={this.onAddBulkCid}
+              onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
               // onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
@@ -149,7 +157,7 @@ FileInput.propTypes = {
   onAddFiles: PropTypes.func.isRequired,
   onAddByPath: PropTypes.func.isRequired,
   onNewFolder: PropTypes.func.isRequired,
-  onAddBulkCid: PropTypes.func.isRequired
+  onBulkCidImport: PropTypes.func.isRequired
 }
 
 export default connect(
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index a1df8f537..9c438025c 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -93,7 +93,7 @@ class Header extends React.Component {
                   onNewFolder={this.props.onNewFolder}
                   onAddFiles={this.props.onAddFiles}
                   onAddByPath={this.props.onAddByPath}
-                  onAddBulkCid={this.props.onAddBulkCid}
+                  onBulkCidImport={this.props.onBulkCidImport}
                   onCliTutorMode={this.props.onCliTutorMode}
                 />
                 : <div ref={el => { this.dotsWrapper = el }}>
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index 33208190b..dc3eaee97 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -10,6 +10,7 @@ import RenameModal from './rename-modal/RenameModal.js'
 import PinningModal from './pinning-modal/PinningModal.js'
 import RemoveModal from './remove-modal/RemoveModal.js'
 import AddByPathModal from './add-by-path-modal/AddByPathModal.js'
+import BulkImportModal from './bulk-import-modal/BulkImportModal.js'
 import PublishModal from './publish-modal/PublishModal.js'
 import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
 import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
@@ -20,6 +21,7 @@ const SHARE = 'share'
 const RENAME = 'rename'
 const DELETE = 'delete'
 const ADD_BY_PATH = 'add_by_path'
+const BULK_CID_IMPORT = 'bulk_cid_import'
 const CLI_TUTOR_MODE = 'cli_tutor_mode'
 const PINNING = 'pinning'
 const PUBLISH = 'publish'
@@ -30,6 +32,7 @@ export {
   RENAME,
   DELETE,
   ADD_BY_PATH,
+  BULK_CID_IMPORT,
   CLI_TUTOR_MODE,
   PINNING,
   PUBLISH
@@ -63,6 +66,11 @@ class Modals extends React.Component {
     this.leave()
   }
 
+  onBulkCidImport = () => {
+    this.props.onBulkCidImport()
+    this.leave()
+  }
+
   makeDir = (path) => {
     this.props.onMakeDir(join(this.props.root, path))
     this.leave()
@@ -152,6 +160,9 @@ class Modals extends React.Component {
       case ADD_BY_PATH:
         this.setState({ readyToShow: true })
         break
+      case BULK_CID_IMPORT:
+        this.setState({ readyToShow: true })
+        break
       case CLI_TUTOR_MODE:
         this.setState({ command: this.cliCommand(cliOptions, files, root) }, () => {
           this.setState({ readyToShow: true })
@@ -254,6 +265,13 @@ class Modals extends React.Component {
             onCancel={this.leave} />
         </Overlay>
 
+        <Overlay show={show === BULK_CID_IMPORT && readyToShow} onLeave={this.leave}>
+          <BulkImportModal
+            className='outline-0'
+            onBulkCidImport={this.onBulkCidImport}
+            onCancel={this.leave} />
+        </Overlay>
+
         <Overlay show={show === CLI_TUTOR_MODE && readyToShow} onLeave={this.leave}>
           <CliTutorMode onLeave={this.leave} filesPage={true} command={command} t={t}/>
         </Overlay>
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
new file mode 100644
index 000000000..c708b1241
--- /dev/null
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -0,0 +1,185 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../components/button/button.tsx'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
+import { withTranslation } from 'react-i18next'
+import * as isIPFS from 'is-ipfs'
+import Icon from '../../../icons/StrokeDocument.js'
+import { normalizeFiles } from '../../../lib/files.js'
+
+class BulkImportModal extends React.Component {
+  static propTypes = {
+    onCancel: PropTypes.func.isRequired,
+    onBulkCidImport: PropTypes.func.isRequired,
+    className: PropTypes.string
+  }
+
+  static defaultProps = {
+    className: ''
+  }
+
+  state = {
+    path: '',
+    name: '',
+    selectedFile: null
+  }
+
+  validatePath = (p) => {
+    if (!p.startsWith('/ipfs/')) {
+      p = `/ipfs/${p}`
+    }
+
+    return isIPFS.ipfsPath(p)
+  }
+
+  onChange = (event) => {
+    const target = event.target
+    const value = target.value
+    const name = target.name
+    this.setState({ [name]: value })
+  }
+
+  handleFileSelect = (event) => {
+    console.log('File select triggered', event)
+    const file = event.target.files[0]
+    this.setState({ selectedFile: file })
+  }
+
+  onBulkCidInputChange = (event) => async () => {
+    console.log('event', event)
+    console.log('event.files', event.files)
+    // const input = event.target
+    // console.log('Input element:', input)
+    // console.log('Input files:', input?.files)
+    // if (!input || !input.files) {
+    //   console.error('Input or files not available')
+    //   return
+    // }
+    this.props.onBulkCidImport(normalizeFiles(event))
+    // input.value = null
+  }
+
+  onSubmit = () => {
+    console.log('submit')
+  }
+
+  //   onSubmit = () => {
+  //     let { path, name } = this.state
+  //     if (this.validatePath(path)) {
+  //       // avoid issues with paths by forcing a flat filename without leading/trailing spaces
+  //       name = name.replaceAll('/', '_').trim()
+  //       this.props.onSubmit(path, name)
+  //     }
+  //   }
+
+  //   onKeyPress = (event) => {
+  //     if (event.key === 'Enter') {
+  //       this.onSubmit()
+  //     }
+  //   }
+
+  get inputClass () {
+    if (this.state.path === '') {
+      return ''
+    }
+
+    if (this.validatePath(this.state.path)) {
+      return 'b--green-muted focus-outline-green'
+    }
+
+    return 'b--red-muted focus-outline-red'
+  }
+
+  //   get isDisabled () {
+  //     if (this.state.path === '') {
+  //       return true
+  //     }
+
+  //     return !this.validatePath(this.state.path)
+  //   }
+
+  render () {
+    const {
+      t, onCancel, className
+    } = this.props
+
+    const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
+
+    return (
+      <Modal className={className} onCancel={onCancel}>
+        <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
+          <div className='mb3 flex flex-column items-center'>
+            <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
+            <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br/>QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br/>QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
+          </div>
+
+          <input
+            type='file'
+            className='dn'
+            multiple
+            accept='.txt'
+            onChange={this.handleFileSelect}
+            // className='input-reset'
+            id='bulk-import'
+            ref={el => {
+              console.log('Setting ref:', el)
+              this.bulkCidInput = el
+            }}
+            // onChange={this.onBulkCidInputChange(this.bulkCidInput)}
+            // onChange={(e) => {
+            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
+            //   console.log('onChange event:', e)
+            //   console.log('onChange target:', e.target)
+            //   console.log('onChange files:', e.target.files)
+            //   this.onBulkCidInputChange(this.bulkCidInput)
+            // }}
+            // onChange={() => {
+            //   // Make sure we're using the current ref
+            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
+            //   this.onBulkCidInputChange(this.bulkCidInput)()
+            // }}
+          />
+          <Button
+            // onClick={() => {
+            //   if (this.bulkCidInput) {
+            //     this.bulkCidInput.click()
+            //   }
+            // }}
+            onClick={(e) => {
+              console.log('clicked')
+              document.getElementById('bulk-import').click()
+            }}
+            className='ma2 tc'
+            bg='bg-teal'
+            type='button'
+          >
+            {'Select File'}
+          </Button>
+          {this.state.selectedFile && (
+            <p className='mt2 charcoal'>
+              Selected file: {this.state.selectedFile.name}
+            </p>
+          )}
+
+          {/* <input
+            onChange={this.onChange}
+            onKeyPress={this.onKeyPress}
+            value={this.state.value}
+            name='path'
+            required
+            placeholder={t('addByPathModal.importPathPlaceholder')}
+            className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-90 center focus-outline ${this.inputClass}`}
+            type='text' /> */}
+
+        </ModalBody>
+
+        <ModalActions>
+          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onBulkCidInputChange(this.bulkCidInput)}>{t('app:actions.import')}</Button>
+        </ModalActions>
+      </Modal>
+    )
+  }
+}
+
+export default withTranslation('files')(BulkImportModal)

From dbf6bdad28092a1ffa8d62cb45ef848ba890bf87 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 19:25:54 -0500
Subject: [PATCH 27/44] WIP, need to debug modal UX

---
 src/bundles/files/actions.js                  |  1 +
 src/files/file-input/FileInput.js             |  3 +
 .../bulk-import-modal/BulkImportModal.js      | 68 +++----------------
 3 files changed, 15 insertions(+), 57 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index c8e8d5520..2626a3f89 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -406,6 +406,7 @@ const actions = () => ({
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
     ensureMFS(store)
+    console.log('doFilesAddBulkCid source', source)
 
     if (source.length !== 1) {
       throw new Error('Please provide exactly one text file')
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 7b6cf6650..e73aeca9b 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -50,8 +50,10 @@ class FileInput extends React.Component {
     input.value = null
   }
 
+  // Old implementation that worked
   onBulkCidInputChange = (input) => async () => {
     console.log('onBulkCidInputChange', input)
+    console.log('onBulkCidInputChange files', input.files)
     this.props.onBulkCidImport(normalizeFiles(input.files))
     input.value = null
   }
@@ -139,6 +141,7 @@ class FileInput extends React.Component {
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
 
+        {/* Old implementation that worked */}
         <input
           // TO-DO id='file-input'
           type='file'
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index c708b1241..0f366b445 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -39,45 +39,17 @@ class BulkImportModal extends React.Component {
     this.setState({ [name]: value })
   }
 
-  handleFileSelect = (event) => {
-    console.log('File select triggered', event)
-    const file = event.target.files[0]
-    this.setState({ selectedFile: file })
-  }
-
-  onBulkCidInputChange = (event) => async () => {
-    console.log('event', event)
-    console.log('event.files', event.files)
-    // const input = event.target
-    // console.log('Input element:', input)
-    // console.log('Input files:', input?.files)
-    // if (!input || !input.files) {
-    //   console.error('Input or files not available')
-    //   return
-    // }
-    this.props.onBulkCidImport(normalizeFiles(event))
-    // input.value = null
+  onBulkCidInputChange = (input) => async () => {
+    console.log('input: ', input)
+    this.setState({ selectedFile: input.files })
   }
 
   onSubmit = () => {
-    console.log('submit')
+    console.log('Files to import:', this.state.selectedFile)
+    this.props.onBulkCidImport(normalizeFiles(this.state.selectedFile))
+    // input.value = null
   }
 
-  //   onSubmit = () => {
-  //     let { path, name } = this.state
-  //     if (this.validatePath(path)) {
-  //       // avoid issues with paths by forcing a flat filename without leading/trailing spaces
-  //       name = name.replaceAll('/', '_').trim()
-  //       this.props.onSubmit(path, name)
-  //     }
-  //   }
-
-  //   onKeyPress = (event) => {
-  //     if (event.key === 'Enter') {
-  //       this.onSubmit()
-  //     }
-  //   }
-
   get inputClass () {
     if (this.state.path === '') {
       return ''
@@ -118,36 +90,18 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.handleFileSelect}
+            onChange={this.onBulkCidInputChange(this.bulkCidInput)}
             // className='input-reset'
-            id='bulk-import'
+            // id='bulk-import'
             ref={el => {
               console.log('Setting ref:', el)
               this.bulkCidInput = el
             }}
-            // onChange={this.onBulkCidInputChange(this.bulkCidInput)}
-            // onChange={(e) => {
-            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
-            //   console.log('onChange event:', e)
-            //   console.log('onChange target:', e.target)
-            //   console.log('onChange files:', e.target.files)
-            //   this.onBulkCidInputChange(this.bulkCidInput)
-            // }}
-            // onChange={() => {
-            //   // Make sure we're using the current ref
-            //   console.log('onChange triggered, current ref:', this.bulkCidInput)
-            //   this.onBulkCidInputChange(this.bulkCidInput)()
-            // }}
           />
           <Button
-            // onClick={() => {
-            //   if (this.bulkCidInput) {
-            //     this.bulkCidInput.click()
-            //   }
-            // }}
-            onClick={(e) => {
+            onClick={() => {
               console.log('clicked')
-              document.getElementById('bulk-import').click()
+              this.bulkCidInput.click()
             }}
             className='ma2 tc'
             bg='bg-teal'
@@ -175,7 +129,7 @@ class BulkImportModal extends React.Component {
 
         <ModalActions>
           <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onBulkCidInputChange(this.bulkCidInput)}>{t('app:actions.import')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onSubmit}>{t('app:actions.import')}</Button>
         </ModalActions>
       </Modal>
     )

From 7bd6081f055c0774a398974c2f8a0ad73dcfc4bc Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 23:39:49 -0500
Subject: [PATCH 28/44] Modal UX working, need to clean up code

---
 src/bundles/files/actions.js                  | 27 +++++++++++---
 src/files/FilesPage.js                        |  2 +
 src/files/file-input/FileInput.js             |  2 +-
 src/files/modals/Modals.js                    |  4 +-
 .../bulk-import-modal/BulkImportModal.js      | 37 +++++++++++--------
 5 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 2626a3f89..bc8fb7716 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -405,15 +405,32 @@ const actions = () => ({
  * @param {string} root - Destination directory in IPFS
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+    console.log('Action parameters:', { source, root })
+    console.log('Arguments:', arguments)
+
     ensureMFS(store)
-    console.log('doFilesAddBulkCid source', source)
 
-    if (source.length !== 1) {
-      throw new Error('Please provide exactly one text file')
+    // Ensure source is properly passed
+    if (!source) {
+      throw new Error('Source is required')
+    }
+
+    // If source is passed as first argument of spawn callback
+    const actualSource = Array.isArray(source) ? source : arguments[0]
+    console.log('Actual source:', actualSource)
+
+    if (!Array.isArray(actualSource)) {
+      throw new Error('Source must be an array')
+    }
+
+    const fileStream = actualSource[0]
+    console.log('fileStream:', fileStream)
+
+    if (!fileStream || !fileStream.content) {
+      throw new Error('Invalid file format')
     }
 
-    // Read the text file content
-    const file = source[0]
+    const file = fileStream
     const content = await new Response(file.content).text()
 
     const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index e36cf8406..7f3e7b29e 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -73,7 +73,9 @@ const FilesPage = ({
   }
 
   const onBulkCidImport = (raw, root = '') => {
+    console.log('FilesPage onBulkCidImport:', { raw, root, filesPath: files.path })
     if (root === '') root = files.path
+    console.log('Calling doFilesAddBulkCid with:', { raw, root })
     doFilesAddBulkCid(raw, root)
   }
 
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index e73aeca9b..332b605e4 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -111,7 +111,7 @@ class FileInput extends React.Component {
               {t('newFolder')}
             </Option>
             <Option
-              // onClick={this.onAddBulkCid}
+              // onClick={this.onAddBulkCid} // This worked before
               onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index dc3eaee97..beb966aed 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -66,8 +66,8 @@ class Modals extends React.Component {
     this.leave()
   }
 
-  onBulkCidImport = () => {
-    this.props.onBulkCidImport()
+  onBulkCidImport = (files, root) => {
+    this.props.onBulkCidImport(files, root)
     this.leave()
   }
 
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 0f366b445..499f6a92f 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -39,15 +39,25 @@ class BulkImportModal extends React.Component {
     this.setState({ [name]: value })
   }
 
-  onBulkCidInputChange = (input) => async () => {
-    console.log('input: ', input)
-    this.setState({ selectedFile: input.files })
+  onBulkCidInputChange = (event) => {
+    const files = event.target.files
+    console.log('files: ', files)
+    this.setState({ selectedFile: files[0] })
+    // console.log('input: ', input)
+    // this.setState({ selectedFile: input.files })
   }
 
-  onSubmit = () => {
-    console.log('Files to import:', this.state.selectedFile)
-    this.props.onBulkCidImport(normalizeFiles(this.state.selectedFile))
-    // input.value = null
+  selectFile = async () => {
+    return this.bulkCidInputt.click()
+  }
+
+  onSubmit = async () => {
+    console.log('BulkImportModal onSubmit:', this.state.selectedFile)
+    if (this.state.selectedFile) {
+      const normalizedFiles = normalizeFiles([this.state.selectedFile])
+      console.log('Calling onBulkCidImport with:', { normalizedFiles, root: '/files' })
+      await this.props.onBulkCidImport(normalizedFiles, '/files')
+    }
   }
 
   get inputClass () {
@@ -72,13 +82,13 @@ class BulkImportModal extends React.Component {
 
   render () {
     const {
-      t, onCancel, className
+      t, tReady, onCancel, onSubmit, className, ...props
     } = this.props
 
     const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
 
     return (
-      <Modal className={className} onCancel={onCancel}>
+      <Modal {...props} className={className} onCancel={onCancel}>
         <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
           <div className='mb3 flex flex-column items-center'>
             <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
@@ -90,19 +100,16 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onBulkCidInputChange(this.bulkCidInput)}
+            onChange={this.onBulkCidInputChange}
             // className='input-reset'
             // id='bulk-import'
             ref={el => {
               console.log('Setting ref:', el)
-              this.bulkCidInput = el
+              this.bulkCidInputt = el
             }}
           />
           <Button
-            onClick={() => {
-              console.log('clicked')
-              this.bulkCidInput.click()
-            }}
+            onClick={this.selectFile}
             className='ma2 tc'
             bg='bg-teal'
             type='button'

From c701fb77f78ec78cd31413266a6cefc608ac73f7 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 14:45:49 -0500
Subject: [PATCH 29/44] Remove comments

---
 src/bundles/files/actions.js                  |  5 +--
 .../bulk-import-modal/BulkImportModal.js      | 32 +++++--------------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index bc8fb7716..482ba42f0 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -378,7 +378,7 @@ const actions = () => ({
    * @param {string} src
    * @param {string} name
    */
-  // HERE
+
   doFilesAddPath: (root, src, name = '') => perform(ACTIONS.ADD_BY_PATH, async (ipfs, { store }) => {
     ensureMFS(store)
 
@@ -405,9 +405,6 @@ const actions = () => ({
  * @param {string} root - Destination directory in IPFS
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
-    console.log('Action parameters:', { source, root })
-    console.log('Arguments:', arguments)
-
     ensureMFS(store)
 
     // Ensure source is properly passed
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 499f6a92f..2c586dfdf 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -19,8 +19,8 @@ class BulkImportModal extends React.Component {
   }
 
   state = {
-    path: '',
-    name: '',
+    // path: '',
+    // name: '',
     selectedFile: null
   }
 
@@ -33,18 +33,8 @@ class BulkImportModal extends React.Component {
   }
 
   onChange = (event) => {
-    const target = event.target
-    const value = target.value
-    const name = target.name
-    this.setState({ [name]: value })
-  }
-
-  onBulkCidInputChange = (event) => {
     const files = event.target.files
-    console.log('files: ', files)
     this.setState({ selectedFile: files[0] })
-    // console.log('input: ', input)
-    // this.setState({ selectedFile: input.files })
   }
 
   selectFile = async () => {
@@ -52,11 +42,9 @@ class BulkImportModal extends React.Component {
   }
 
   onSubmit = async () => {
-    console.log('BulkImportModal onSubmit:', this.state.selectedFile)
     if (this.state.selectedFile) {
       const normalizedFiles = normalizeFiles([this.state.selectedFile])
-      console.log('Calling onBulkCidImport with:', { normalizedFiles, root: '/files' })
-      await this.props.onBulkCidImport(normalizedFiles, '/files')
+      await this.props.onBulkCidImport(normalizedFiles)
     }
   }
 
@@ -72,13 +60,9 @@ class BulkImportModal extends React.Component {
     return 'b--red-muted focus-outline-red'
   }
 
-  //   get isDisabled () {
-  //     if (this.state.path === '') {
-  //       return true
-  //     }
-
-  //     return !this.validatePath(this.state.path)
-  //   }
+  get isDisabled () {
+    return !this.state.selectedFile
+  }
 
   render () {
     const {
@@ -100,7 +84,7 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onBulkCidInputChange}
+            onChange={this.onChange}
             // className='input-reset'
             // id='bulk-import'
             ref={el => {
@@ -136,7 +120,7 @@ class BulkImportModal extends React.Component {
 
         <ModalActions>
           <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onSubmit}>{t('app:actions.import')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{t('app:actions.import')}</Button>
         </ModalActions>
       </Modal>
     )

From 108068a967de833694de144c1c634320c683bf94 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 15:20:36 -0500
Subject: [PATCH 30/44] Clean code

---
 src/bundles/files/actions.js                  |  3 +--
 src/files/FilesPage.js                        | 11 ++++-----
 src/files/file-input/FileInput.js             | 23 -------------------
 .../bulk-import-modal/BulkImportModal.js      | 12 ----------
 4 files changed, 5 insertions(+), 44 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 482ba42f0..43f9a7d95 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -378,7 +378,6 @@ const actions = () => ({
    * @param {string} src
    * @param {string} name
    */
-
   doFilesAddPath: (root, src, name = '') => perform(ACTIONS.ADD_BY_PATH, async (ipfs, { store }) => {
     ensureMFS(store)
 
@@ -404,7 +403,7 @@ const actions = () => ({
  * @param {FileStream[]} source - The CSV file containing CIDs
  * @param {string} root - Destination directory in IPFS
  */
-  doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+  doFilesBulkCidImport: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
     ensureMFS(store)
 
     // Ensure source is properly passed
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 7f3e7b29e..b61678f16 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -21,7 +21,7 @@ import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
 
 const FilesPage = ({
-  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddBulkCid, doFilesAddPath, doUpdateHash,
+  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesBulkCidImport, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
@@ -73,10 +73,9 @@ const FilesPage = ({
   }
 
   const onBulkCidImport = (raw, root = '') => {
-    console.log('FilesPage onBulkCidImport:', { raw, root, filesPath: files.path })
     if (root === '') root = files.path
-    console.log('Calling doFilesAddBulkCid with:', { raw, root })
-    doFilesAddBulkCid(raw, root)
+
+    doFilesBulkCidImport(raw, root)
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
@@ -211,8 +210,6 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
-        // onAddBulkCid={onAddBulkCid}
-        // onBulkCidImport={onBulkCidImport}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
         onBulkCidImport={(files) => showModal(BULK_CID_IMPORT, files)}
@@ -288,7 +285,7 @@ export default connect(
   'selectFilesSorting',
   'selectToursEnabled',
   'doFilesWrite',
-  'doFilesAddBulkCid',
+  'doFilesBulkCidImport',
   'doFilesDownloadLink',
   'doFilesDownloadCarLink',
   'doFilesSizeGet',
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 332b605e4..a4b310a4c 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -40,24 +40,11 @@ class FileInput extends React.Component {
     return this.filesInput.click()
   }
 
-  onAddBulkCid = async () => {
-    this.toggleDropdown()
-    return this.bulkCidInput.click()
-  }
-
   onInputChange = (input) => async () => {
     this.props.onAddFiles(normalizeFiles(input.files))
     input.value = null
   }
 
-  // Old implementation that worked
-  onBulkCidInputChange = (input) => async () => {
-    console.log('onBulkCidInputChange', input)
-    console.log('onBulkCidInputChange files', input.files)
-    this.props.onBulkCidImport(normalizeFiles(input.files))
-    input.value = null
-  }
-
   onAddByPath = () => {
     this.props.onAddByPath()
     this.toggleDropdown()
@@ -111,7 +98,6 @@ class FileInput extends React.Component {
               {t('newFolder')}
             </Option>
             <Option
-              // onClick={this.onAddBulkCid} // This worked before
               onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
@@ -141,15 +127,6 @@ class FileInput extends React.Component {
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
 
-        {/* Old implementation that worked */}
-        <input
-          // TO-DO id='file-input'
-          type='file'
-          className='dn'
-          multiple
-          accept='.txt'
-          ref={el => { this.bulkCidInput = el }}
-          onChange={this.onBulkCidInputChange(this.bulkCidInput)} />
       </div>
     )
   }
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 2c586dfdf..b22223fa9 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -19,8 +19,6 @@ class BulkImportModal extends React.Component {
   }
 
   state = {
-    // path: '',
-    // name: '',
     selectedFile: null
   }
 
@@ -106,16 +104,6 @@ class BulkImportModal extends React.Component {
             </p>
           )}
 
-          {/* <input
-            onChange={this.onChange}
-            onKeyPress={this.onKeyPress}
-            value={this.state.value}
-            name='path'
-            required
-            placeholder={t('addByPathModal.importPathPlaceholder')}
-            className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-90 center focus-outline ${this.inputClass}`}
-            type='text' /> */}
-
         </ModalBody>
 
         <ModalActions>

From 6fa7da64914d4a562c764c0e345b54610eba9dc0 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 20:45:29 -0500
Subject: [PATCH 31/44] Add validation to file select

---
 src/files/file-input/FileInput.js             |  1 -
 .../bulk-import-modal/BulkImportModal.js      | 53 +++++++++++--------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index a4b310a4c..d67b2b58c 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -126,7 +126,6 @@ class FileInput extends React.Component {
           webkitdirectory='true'
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
-
       </div>
     )
   }
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index b22223fa9..25dc03172 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -19,20 +19,37 @@ class BulkImportModal extends React.Component {
   }
 
   state = {
-    selectedFile: null
+    selectedFile: null,
+    validationError: null
   }
 
-  validatePath = (p) => {
-    if (!p.startsWith('/ipfs/')) {
-      p = `/ipfs/${p}`
+  validateFileContents = async (file) => {
+    try {
+      const text = await file.text()
+      const lines = text.split('\n').filter(line => line.trim())
+
+      for (const line of lines) {
+        const [cid] = line.trim().split(' ')
+        if (!isIPFS.cid(cid)) {
+          return { isValid: false, error: '*Invalid CID(s) found' }
+        }
+      }
+
+      return { isValid: true }
+    } catch (err) {
+      return { isValid: false, error: '*Failed to read file contents' }
     }
-
-    return isIPFS.ipfsPath(p)
   }
 
-  onChange = (event) => {
-    const files = event.target.files
-    this.setState({ selectedFile: files[0] })
+  onChange = async (event) => {
+    const file = event.target.files[0]
+    if (!file) return
+
+    const validation = await this.validateFileContents(file)
+    this.setState({
+      selectedFile: validation.isValid ? file : null,
+      validationError: validation.error
+    })
   }
 
   selectFile = async () => {
@@ -46,18 +63,6 @@ class BulkImportModal extends React.Component {
     }
   }
 
-  get inputClass () {
-    if (this.state.path === '') {
-      return ''
-    }
-
-    if (this.validatePath(this.state.path)) {
-      return 'b--green-muted focus-outline-green'
-    }
-
-    return 'b--red-muted focus-outline-red'
-  }
-
   get isDisabled () {
     return !this.state.selectedFile
   }
@@ -98,12 +103,18 @@ class BulkImportModal extends React.Component {
           >
             {'Select File'}
           </Button>
+
           {this.state.selectedFile && (
             <p className='mt2 charcoal'>
               Selected file: {this.state.selectedFile.name}
             </p>
           )}
 
+          {this.state.validationError && (
+            <p className='mt2 red'>
+              {this.state.validationError}
+            </p>
+          )}
         </ModalBody>
 
         <ModalActions>

From 5c82550420259c5d592c7441961d904d461d5974 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sat, 7 Dec 2024 21:20:53 -0500
Subject: [PATCH 32/44] Use localization

---
 public/locales/en/files.json                  |  9 +++++++++
 src/files/file-input/FileInput.js             |  2 +-
 .../bulk-import-modal/BulkImportModal.js      | 19 ++++++++-----------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 0614e005d..2d849ebe3 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -14,6 +14,7 @@
   "openWithLocalAndPublicGateway": "Try opening it instead with your <1>local gateway</1> or <3>public gateway</3>.",
   "cantBePreviewed": "Sorry, this file can’t be previewed",
   "addByPath": "From IPFS",
+  "bulkImport": "Bulk import",
   "newFolder": "New folder",
   "generating": "Generating…",
   "actions": {
@@ -59,6 +60,14 @@
     "namePlaceholder": "Name (optional)",
     "examples": "Examples:"
   },
+  "bulkImportModal": {
+    "title": "Bulk import with text file",
+    "description": "Upload a text file with a list of CIDs (names are optional). Example:",
+    "select": "Select file",
+    "selectedFile": "Selected file:",
+    "invalidCids": "*Invalid CID(s) found",
+    "failedToReadFile": "*Failed to read file contents"
+  },
   "newFolderModal": {
     "title": "New folder",
     "description": "Insert the name of the folder you want to create."
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index d67b2b58c..f56e55c8f 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -105,7 +105,7 @@ class FileInput extends React.Component {
               // isCliTutorModeEnabled={isCliTutorModeEnabled}
             >
               <DocumentIcon className='fill-aqua w2 mr1' />
-              Bulk CID Import
+              {t('bulkImport')}
             </Option>
           </DropdownMenu>
         </Dropdown>
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 25dc03172..edb94d797 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -31,13 +31,13 @@ class BulkImportModal extends React.Component {
       for (const line of lines) {
         const [cid] = line.trim().split(' ')
         if (!isIPFS.cid(cid)) {
-          return { isValid: false, error: '*Invalid CID(s) found' }
+          return { isValid: false, error: this.props.t('bulkImportModal.invalidCids') }
         }
       }
 
       return { isValid: true }
     } catch (err) {
-      return { isValid: false, error: '*Failed to read file contents' }
+      return { isValid: false, error: this.props.t('bulkImportModal.failedToReadFile') }
     }
   }
 
@@ -53,7 +53,7 @@ class BulkImportModal extends React.Component {
   }
 
   selectFile = async () => {
-    return this.bulkCidInputt.click()
+    return this.bulkCidInput.click()
   }
 
   onSubmit = async () => {
@@ -76,9 +76,9 @@ class BulkImportModal extends React.Component {
 
     return (
       <Modal {...props} className={className} onCancel={onCancel}>
-        <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
+        <ModalBody title={t('bulkImportModal.title')} Icon={Icon}>
           <div className='mb3 flex flex-column items-center'>
-            <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
+            <p className='mt0 charcoal tl w-100'>{t('bulkImportModal.description')}</p>
             <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br/>QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br/>QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
           </div>
 
@@ -90,10 +90,7 @@ class BulkImportModal extends React.Component {
             onChange={this.onChange}
             // className='input-reset'
             // id='bulk-import'
-            ref={el => {
-              console.log('Setting ref:', el)
-              this.bulkCidInputt = el
-            }}
+            ref={el => { this.bulkCidInput = el }}
           />
           <Button
             onClick={this.selectFile}
@@ -101,12 +98,12 @@ class BulkImportModal extends React.Component {
             bg='bg-teal'
             type='button'
           >
-            {'Select File'}
+            {t('bulkImportModal.select')}
           </Button>
 
           {this.state.selectedFile && (
             <p className='mt2 charcoal'>
-              Selected file: {this.state.selectedFile.name}
+              {`${t('bulkImportModal.selectedFile')}: ${this.state.selectedFile.name}`}
             </p>
           )}
 

From 28e3725785a88ce237ba265d783e410228cf9388 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 15:45:06 -0500
Subject: [PATCH 33/44] Add correct type, remove progress tracking

---
 public/locales/en/files.json  |  2 +-
 src/bundles/files/actions.js  | 43 ++++++-----------------------------
 src/bundles/files/consts.js   |  2 ++
 src/bundles/files/protocol.ts |  2 ++
 4 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 2d849ebe3..20db42bf5 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -64,7 +64,7 @@
     "title": "Bulk import with text file",
     "description": "Upload a text file with a list of CIDs (names are optional). Example:",
     "select": "Select file",
-    "selectedFile": "Selected file:",
+    "selectedFile": "Selected file",
     "invalidCids": "*Invalid CID(s) found",
     "failedToReadFile": "*Failed to read file contents"
   },
diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 43f9a7d95..ab7a0d770 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -399,34 +399,19 @@ const actions = () => ({
   }),
 
   /**
- * Reads a CSV file containing CIDs and adds each one to IPFS at the given root path.
- * @param {FileStream[]} source - The CSV file containing CIDs
+ * Reads a text file containing CIDs and adds each one to IPFS at the given root path.
+ * @param {FileStream[]} source - The text file containing CIDs
  * @param {string} root - Destination directory in IPFS
  */
-  doFilesBulkCidImport: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+  doFilesBulkCidImport: (source, root) => perform(ACTIONS.BULK_CID_IMPORT, async function (ipfs, { store }) {
     ensureMFS(store)
 
-    // Ensure source is properly passed
-    if (!source) {
-      throw new Error('Source is required')
+    if (!source?.[0]?.content) {
+      console.error('Invalid file format provided to doFilesBulkCidImport')
+      return
     }
 
-    // If source is passed as first argument of spawn callback
-    const actualSource = Array.isArray(source) ? source : arguments[0]
-    console.log('Actual source:', actualSource)
-
-    if (!Array.isArray(actualSource)) {
-      throw new Error('Source must be an array')
-    }
-
-    const fileStream = actualSource[0]
-    console.log('fileStream:', fileStream)
-
-    if (!fileStream || !fileStream.content) {
-      throw new Error('Invalid file format')
-    }
-
-    const file = fileStream
+    const file = source[0]
     const content = await new Response(file.content).text()
 
     const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
@@ -445,33 +430,19 @@ const actions = () => ({
       }
     })
 
-    /** @type {Array<{ path: string, cid: string }>} */
-    const entries = []
-    let progress = 0
-    const totalCids = cidObjects.length
-
-    yield { entries, progress: 0 }
-
     for (const { cid, name } of cidObjects) {
       try {
         const src = `/ipfs/${cid}`
         const dst = realMfsPath(join(root || '/files', name || cid))
 
         await ipfs.files.cp(src, dst)
-
-        entries.push({ path: dst, cid })
-        progress = (entries.length / totalCids) * 100
-
-        yield { entries, progress }
       } catch (err) {
         console.error(`Failed to add CID ${cid}:`, err)
         // Continue with next CID even if one fails
       }
     }
 
-    yield { entries, progress: 100 }
     await store.doFilesFetch()
-    return entries
   }),
 
   /**
diff --git a/src/bundles/files/consts.js b/src/bundles/files/consts.js
index b5fdac0dc..67383694a 100644
--- a/src/bundles/files/consts.js
+++ b/src/bundles/files/consts.js
@@ -23,6 +23,8 @@ export const ACTIONS = {
   SHARE_LINK: ('FILES_SHARE_LINK'),
   /** @type {'FILES_ADDBYPATH'} */
   ADD_BY_PATH: ('FILES_ADDBYPATH'),
+  /** @type {'FILES_BULK_CID_IMPORT'} */
+  BULK_CID_IMPORT: ('FILES_BULK_CID_IMPORT'),
   /** @type {'FILES_PIN_ADD'} */
   PIN_ADD: ('FILES_PIN_ADD'),
   /** @type {'FILES_PIN_REMOVE'} */
diff --git a/src/bundles/files/protocol.ts b/src/bundles/files/protocol.ts
index c6ca742e2..60076a255 100644
--- a/src/bundles/files/protocol.ts
+++ b/src/bundles/files/protocol.ts
@@ -63,6 +63,7 @@ export type Message =
   | Move
   | Write
   | AddByPath
+  | BulkCidImport
   | DownloadLink
   | Perform<'FILES_SHARE_LINK', Error, string, void>
   | Perform<'FILES_COPY', Error, void, void>
@@ -76,6 +77,7 @@ export type MakeDir = Perform<'FILES_MAKEDIR', Error, void, void>
 export type WriteProgress = { paths: string[], progress: number }
 export type Write = Spawn<'FILES_WRITE', WriteProgress, Error, void, void>
 export type AddByPath = Perform<'FILES_ADDBYPATH', Error, void, void>
+export type BulkCidImport = Perform<'FILES_BULK_CID_IMPORT', Error, void, void>
 export type Move = Perform<'FILES_MOVE', Error, void, void>
 export type Delete = Perform<'FILES_DELETE', Error, void, void>
 export type DownloadLink = Perform<'FILES_DOWNLOADLINK', Error, FileDownload, void>

From 38ef8dfd159fafce3d023df01435095722e7ce4c Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 22:03:16 -0500
Subject: [PATCH 34/44] Refactor code

---
 src/bundles/files/actions.js                  | 56 +++++++++----------
 .../bulk-import-modal/BulkImportModal.js      |  2 +-
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index ab7a0d770..7381ff92b 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -411,38 +411,38 @@ const actions = () => ({
       return
     }
 
-    const file = source[0]
-    const content = await new Response(file.content).text()
-
-    const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
-    // NOTE: need to add finally fetch later
-    const cidObjects = lines.map((line) => {
-      let actualCid = line
-      let name = line
-      const cidParts = line.split(' ')
-      if (cidParts.length > 1) {
-        actualCid = cidParts[0]
-        name = cidParts.slice(1).join(' ')
-      }
-      return {
-        name,
-        cid: actualCid
-      }
-    })
+    try {
+      const file = source[0]
+      const content = await new Response(file.content).text()
+      const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
+
+      const cidObjects = lines.map((line) => {
+        let actualCid = line
+        let name = line
+        const cidParts = line.split(' ')
+        if (cidParts.length > 1) {
+          actualCid = cidParts[0]
+          name = cidParts.slice(1).join(' ')
+        }
+        return {
+          name,
+          cid: actualCid
+        }
+      })
 
-    for (const { cid, name } of cidObjects) {
-      try {
-        const src = `/ipfs/${cid}`
-        const dst = realMfsPath(join(root || '/files', name || cid))
+      for (const { cid, name } of cidObjects) {
+        try {
+          const src = `/ipfs/${cid}`
+          const dst = realMfsPath(join(root || '/files', name || cid))
 
-        await ipfs.files.cp(src, dst)
-      } catch (err) {
-        console.error(`Failed to add CID ${cid}:`, err)
-        // Continue with next CID even if one fails
+          await ipfs.files.cp(src, dst)
+        } catch (err) {
+          console.error(`Failed to add CID ${cid}:`, err)
+        }
       }
+    } finally {
+      await store.doFilesFetch()
     }
-
-    await store.doFilesFetch()
   }),
 
   /**
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index edb94d797..3c3b663a5 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -69,7 +69,7 @@ class BulkImportModal extends React.Component {
 
   render () {
     const {
-      t, tReady, onCancel, onSubmit, className, ...props
+      t, tReady, onCancel, className, onBulkCidImport, ...props
     } = this.props
 
     const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'

From 0b4b84a869f85f861a922ec0f03119ea6f564b70 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 22:40:22 -0500
Subject: [PATCH 35/44] Add storybook file

---
 .../BulkImportModal.stories.js                | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/files/modals/bulk-import-modal/BulkImportModal.stories.js

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.stories.js b/src/files/modals/bulk-import-modal/BulkImportModal.stories.js
new file mode 100644
index 000000000..a13e141a7
--- /dev/null
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.stories.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import i18n from '../../../i18n-decorator.js'
+import BulkImportModal from './BulkImportModal.js'
+
+/**
+ * @type {import('@storybook/react').Meta}
+ */
+export default {
+  title: 'Files/Modals',
+  decorators: [i18n]
+}
+
+/**
+ * @type {import('@storybook/react').StoryObj}
+ */
+export const BulkImport = () => (
+  <div className="ma3">
+    <BulkImportModal onCancel={action('Cancel')} onBulkCidImport={action('Bulk CID Import')} />
+  </div>
+)

From 275263428bfa0615e86ab48611e0849ace6f00c7 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 23:24:28 -0500
Subject: [PATCH 36/44] Remove comments

---
 src/files/file-input/FileInput.js                     | 8 +-------
 src/files/modals/bulk-import-modal/BulkImportModal.js | 5 ++---
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index f56e55c8f..cd41f0623 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -97,13 +97,7 @@ class FileInput extends React.Component {
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
               {t('newFolder')}
             </Option>
-            <Option
-              onClick={this.onBulkCidImport}
-              // TO-DO:
-              // id='add-bulk-cid'
-              // onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
-              // isCliTutorModeEnabled={isCliTutorModeEnabled}
-            >
+            <Option onClick={this.onBulkCidImport} id='bulk-cid-import'>
               <DocumentIcon className='fill-aqua w2 mr1' />
               {t('bulkImport')}
             </Option>
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 3c3b663a5..0d872804b 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -83,14 +83,13 @@ class BulkImportModal extends React.Component {
           </div>
 
           <input
+            id='bulk-import'
             type='file'
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onChange}
-            // className='input-reset'
-            // id='bulk-import'
             ref={el => { this.bulkCidInput = el }}
+            onChange={this.onChange}
           />
           <Button
             onClick={this.selectFile}

From 44cd9f8b09388f4f0bd4967181a87e45e89f6fc1 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Sun, 8 Dec 2024 23:29:22 -0500
Subject: [PATCH 37/44] Update Add menu test

---
 test/e2e/files.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/e2e/files.test.js b/test/e2e/files.test.js
index 9ea7c9fbc..33fcbd578 100644
--- a/test/e2e/files.test.js
+++ b/test/e2e/files.test.js
@@ -19,6 +19,7 @@ test.describe('Files screen', () => {
     await page.waitForSelector('text=Folder')
     await page.waitForSelector('text=From IPFS')
     await page.waitForSelector('text=New folder')
+    await page.waitForSelector('text=Bulk import')
     await page.click(button, { force: true })
   })
 

From 2ea51b14f35ab4c4f3c7dc0967d936c287f1b7fc Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sat, 30 Nov 2024 03:09:18 +0000
Subject: [PATCH 38/44] chore(release): 4.4.1 [skip ci]

## [4.4.1](https://github.com/ipfs/ipfs-webui/compare/v4.4.0...v4.4.1) (2024-11-30)

 CID `bafybeiatztgdllxnp5p6zu7bdwhjmozsmd7jprff4bdjqjljxtylitvss4`

 ---

### Bug Fixes

* add lithuanian to languages.json ([#2293](https://github.com/ipfs/ipfs-webui/issues/2293)) ([40c512b](https://github.com/ipfs/ipfs-webui/commit/40c512b146b0f35e5651de5de4ac3fc67bbaadf2))
* analyze script doesn't persist stats.json ([#2290](https://github.com/ipfs/ipfs-webui/issues/2290)) ([dbbdd70](https://github.com/ipfs/ipfs-webui/commit/dbbdd70d63f07cb4b0e62dac0a1fd4ec0fc34b4d))
* **explore:** browsing chunked files and inspecting via context menu ([#2305](https://github.com/ipfs/ipfs-webui/issues/2305)) ([0412970](https://github.com/ipfs/ipfs-webui/commit/041297041e61ea2dd9debb63e56c2ea376ed3e00)), closes [#2306](https://github.com/ipfs/ipfs-webui/issues/2306)

### Trivial Changes

* **ci:** add CAR file directly to cluster ([#2304](https://github.com/ipfs/ipfs-webui/issues/2304)) ([e2ae110](https://github.com/ipfs/ipfs-webui/commit/e2ae110650cffe341f60a088ba68ca0856d5e1ac))
* **ci:** no replication factor when pinning - use cluster's default ([#2302](https://github.com/ipfs/ipfs-webui/issues/2302)) ([81b8f29](https://github.com/ipfs/ipfs-webui/commit/81b8f29ec8bf6b7fe577c07261c83dce99eb7919))
* **ci:** set cluster pin timeout to 30m ([4b8fc00](https://github.com/ipfs/ipfs-webui/commit/4b8fc00ef9daa23f462bc174a93eeeeab8e575b2))
* **ci:** udpate artifact actions to v4 ([#2292](https://github.com/ipfs/ipfs-webui/issues/2292)) ([305908f](https://github.com/ipfs/ipfs-webui/commit/305908f6862723603ab49253eeed6b358243fb0e))
* **ci:** use repo in offline mode ([eaf63ed](https://github.com/ipfs/ipfs-webui/commit/eaf63ed577ebd291a7bf2dfd9e9279d75a275c89))
* pull new translations ([#2291](https://github.com/ipfs/ipfs-webui/issues/2291)) ([bfe7e40](https://github.com/ipfs/ipfs-webui/commit/bfe7e40f369dc6485b333b9bc5a3c804811538a9))
* pull transifex translations ([#2296](https://github.com/ipfs/ipfs-webui/issues/2296)) ([502abd4](https://github.com/ipfs/ipfs-webui/commit/502abd44586ebd878ce298f48de614b45cb32139))
* pull transifex translations ([#2303](https://github.com/ipfs/ipfs-webui/issues/2303)) ([89c094b](https://github.com/ipfs/ipfs-webui/commit/89c094b0edde3ac0d6edc26890d558887f4870ea))
* size-related labels in Files screen ([#2295](https://github.com/ipfs/ipfs-webui/issues/2295)) ([49019d4](https://github.com/ipfs/ipfs-webui/commit/49019d4f4cf33a6c2b0c99adefe6860a8a3c1f94))
---
 CHANGELOG.md      | 28 ++++++++++++++++++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc0a6f5e3..c0aff6548 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,31 @@
+## [4.4.1](https://github.com/ipfs/ipfs-webui/compare/v4.4.0...v4.4.1) (2024-11-30)
+
+
+ CID `bafybeiatztgdllxnp5p6zu7bdwhjmozsmd7jprff4bdjqjljxtylitvss4`
+
+ --- 
+
+
+
+### Bug Fixes
+
+* add lithuanian to languages.json ([#2293](https://github.com/ipfs/ipfs-webui/issues/2293)) ([40c512b](https://github.com/ipfs/ipfs-webui/commit/40c512b146b0f35e5651de5de4ac3fc67bbaadf2))
+* analyze script doesn't persist stats.json ([#2290](https://github.com/ipfs/ipfs-webui/issues/2290)) ([dbbdd70](https://github.com/ipfs/ipfs-webui/commit/dbbdd70d63f07cb4b0e62dac0a1fd4ec0fc34b4d))
+* **explore:** browsing chunked files and inspecting via context menu ([#2305](https://github.com/ipfs/ipfs-webui/issues/2305)) ([0412970](https://github.com/ipfs/ipfs-webui/commit/041297041e61ea2dd9debb63e56c2ea376ed3e00)), closes [#2306](https://github.com/ipfs/ipfs-webui/issues/2306)
+
+
+### Trivial Changes
+
+* **ci:** add CAR file directly to cluster ([#2304](https://github.com/ipfs/ipfs-webui/issues/2304)) ([e2ae110](https://github.com/ipfs/ipfs-webui/commit/e2ae110650cffe341f60a088ba68ca0856d5e1ac))
+* **ci:** no replication factor when pinning - use cluster's default ([#2302](https://github.com/ipfs/ipfs-webui/issues/2302)) ([81b8f29](https://github.com/ipfs/ipfs-webui/commit/81b8f29ec8bf6b7fe577c07261c83dce99eb7919))
+* **ci:** set cluster pin timeout to 30m ([4b8fc00](https://github.com/ipfs/ipfs-webui/commit/4b8fc00ef9daa23f462bc174a93eeeeab8e575b2))
+* **ci:** udpate artifact actions to v4 ([#2292](https://github.com/ipfs/ipfs-webui/issues/2292)) ([305908f](https://github.com/ipfs/ipfs-webui/commit/305908f6862723603ab49253eeed6b358243fb0e))
+* **ci:** use repo in offline mode ([eaf63ed](https://github.com/ipfs/ipfs-webui/commit/eaf63ed577ebd291a7bf2dfd9e9279d75a275c89))
+* pull new translations ([#2291](https://github.com/ipfs/ipfs-webui/issues/2291)) ([bfe7e40](https://github.com/ipfs/ipfs-webui/commit/bfe7e40f369dc6485b333b9bc5a3c804811538a9))
+* pull transifex translations ([#2296](https://github.com/ipfs/ipfs-webui/issues/2296)) ([502abd4](https://github.com/ipfs/ipfs-webui/commit/502abd44586ebd878ce298f48de614b45cb32139))
+* pull transifex translations ([#2303](https://github.com/ipfs/ipfs-webui/issues/2303)) ([89c094b](https://github.com/ipfs/ipfs-webui/commit/89c094b0edde3ac0d6edc26890d558887f4870ea))
+* size-related labels in Files screen ([#2295](https://github.com/ipfs/ipfs-webui/issues/2295)) ([49019d4](https://github.com/ipfs/ipfs-webui/commit/49019d4f4cf33a6c2b0c99adefe6860a8a3c1f94))
+
 ## [4.4.0](https://github.com/ipfs/ipfs-webui/compare/v4.3.3...v4.4.0) (2024-11-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index c28dea85e..86529c24c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ipfs-webui",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ipfs-webui",
-      "version": "4.4.0",
+      "version": "4.4.1",
       "hasInstallScript": true,
       "dependencies": {
         "@loadable/component": "^5.14.1",
diff --git a/package.json b/package.json
index d5195c0cf..040ca351a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ipfs-webui",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "type": "module",
   "private": true,
   "files": [

From ff3f8c1accb7596288c7de42a38c496c0ff8ac1d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 4 Dec 2024 07:03:15 -0800
Subject: [PATCH 39/44] chore: pull new translations (#2308)

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: lidel <lidel@users.noreply.github.com>
---
 public/locales/cs/files.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/locales/cs/files.json b/public/locales/cs/files.json
index 33daeae4e..844ce3c90 100644
--- a/public/locales/cs/files.json
+++ b/public/locales/cs/files.json
@@ -54,7 +54,7 @@
   "addByPathModal": {
     "title": "Import z IPFS",
     "description": "Vložte cestu IPFS (CID) pro import.",
-    "preloadNote": "NOTE: Imported path is lazy-loaded by default, and will be retrieved on-demand as you browse it. To proactively prefetch imported path to the local Datastore, choose ”Download” from the context menu.",
+    "preloadNote": "POZNÁMKA: Importovaná cesta je ve výchozím nastavení líně načtena a bude načtena na vyžádání při jejím procházení. Chcete-li proaktivně přednačíst importovanou cestu do místního datového úložiště, vyberte z kontextové nabídky možnost \"Stáhnout\"",
     "importPathPlaceholder": "Cesta nebo CID (povinné)",
     "namePlaceholder": "Název (nepovinné)",
     "examples": "Příklady:"
@@ -115,11 +115,11 @@
   "clickToDismiss": "Klikněte pro zamítnutí",
   "clickToCancel": "Kliknutím zrušte",
   "blocks": "Bloky",
-  "localDatastore": "Local Datastore",
-  "localDatastoreDescription": "Total size of all blocks currently stored in the Datastore of your IPFS node (“RepoSize” from “ipfs repo stat”). This includes everything in the Files view (MFS), low-level pins, and any recently removed or temporary cached blocks that were not garbage-collected yet.",
-  "currentLocationRoot": "My Files",
-  "currentLocation": "Current Location",
-  "currentLocationDescription": "Total size of the DAG behind the current directory (“CumulativeSize” from “ipfs files stat”). This value includes both local and remote blocks, and could be bigger than the size of your local datastore.",
+  "localDatastore": "Místní datové úložiště",
+  "localDatastoreDescription": "Celková velikost všech bloků aktuálně uložených v datovém úložišti uzlu IPFS (\"RepoSize\" z \"ipfs repo stat\"). Zahrnuje vše v zobrazení Soubory (MFS), nízkoúrovňové vývody a všechny nedávno odstraněné nebo dočasně uložené bloky, které ještě nebyly shromážděny do mezipaměti.",
+  "currentLocationRoot": "Moje soubory",
+  "currentLocation": "Současná poloha",
+  "currentLocationDescription": "Celková velikost DAG za aktuálním adresářem (\"CumulativeSize\" z \"ipfs files stat\"). Tato hodnota zahrnuje místní i vzdálené bloky a může být větší než velikost místního datového úložiště.",
   "pinningQueue": "Fronta připnutí",
   "more": "Více",
   "files": "Soubory",

From d74bf52e354575281e11b91b665c8589f3d9458d Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 12:53:36 -0500
Subject: [PATCH 40/44] Remove prop-types

---
 src/files/modals/bulk-import-modal/BulkImportModal.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 0d872804b..6a70d2d70 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 import { withTranslation } from 'react-i18next'
@@ -8,12 +7,6 @@ import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
 class BulkImportModal extends React.Component {
-  static propTypes = {
-    onCancel: PropTypes.func.isRequired,
-    onBulkCidImport: PropTypes.func.isRequired,
-    className: PropTypes.string
-  }
-
   static defaultProps = {
     className: ''
   }

From e9b4d8585823e92c6929bc72f6e5fa4fb857c6f0 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 14:38:21 -0500
Subject: [PATCH 41/44] Use functional component

---
 .../bulk-import-modal/BulkImportModal.js      | 148 ++++++++----------
 1 file changed, 66 insertions(+), 82 deletions(-)

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 6a70d2d70..04dd375ac 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useRef } from 'react'
 import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 import { withTranslation } from 'react-i18next'
@@ -6,17 +6,12 @@ import * as isIPFS from 'is-ipfs'
 import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
-class BulkImportModal extends React.Component {
-  static defaultProps = {
-    className: ''
-  }
-
-  state = {
-    selectedFile: null,
-    validationError: null
-  }
+const BulkImportModal = ({ t, tReady, onCancel, className = '', onBulkCidImport, ...props }) => {
+  const [selectedFile, setSelectedFile] = useState(null)
+  const [validationError, setValidationError] = useState(null)
+  const bulkCidInputRef = useRef(null)
 
-  validateFileContents = async (file) => {
+  const validateFileContents = async (file) => {
     try {
       const text = await file.text()
       const lines = text.split('\n').filter(line => line.trim())
@@ -24,95 +19,84 @@ class BulkImportModal extends React.Component {
       for (const line of lines) {
         const [cid] = line.trim().split(' ')
         if (!isIPFS.cid(cid)) {
-          return { isValid: false, error: this.props.t('bulkImportModal.invalidCids') }
+          return { isValid: false, error: t('bulkImportModal.invalidCids') }
         }
       }
 
       return { isValid: true }
     } catch (err) {
-      return { isValid: false, error: this.props.t('bulkImportModal.failedToReadFile') }
+      return { isValid: false, error: t('bulkImportModal.failedToReadFile') }
     }
   }
 
-  onChange = async (event) => {
+  const onChange = async (event) => {
     const file = event.target.files[0]
     if (!file) return
 
-    const validation = await this.validateFileContents(file)
-    this.setState({
-      selectedFile: validation.isValid ? file : null,
-      validationError: validation.error
-    })
+    const validation = await validateFileContents(file)
+    setSelectedFile(validation.isValid ? file : null)
+    setValidationError(validation.error)
   }
 
-  selectFile = async () => {
-    return this.bulkCidInput.click()
+  const selectFile = () => {
+    bulkCidInputRef.current.click()
   }
 
-  onSubmit = async () => {
-    if (this.state.selectedFile) {
-      const normalizedFiles = normalizeFiles([this.state.selectedFile])
-      await this.props.onBulkCidImport(normalizedFiles)
+  const onSubmit = async () => {
+    if (selectedFile) {
+      const normalizedFiles = normalizeFiles([selectedFile])
+      await onBulkCidImport(normalizedFiles)
     }
   }
 
-  get isDisabled () {
-    return !this.state.selectedFile
-  }
-
-  render () {
-    const {
-      t, tReady, onCancel, className, onBulkCidImport, ...props
-    } = this.props
-
-    const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
-
-    return (
-      <Modal {...props} className={className} onCancel={onCancel}>
-        <ModalBody title={t('bulkImportModal.title')} Icon={Icon}>
-          <div className='mb3 flex flex-column items-center'>
-            <p className='mt0 charcoal tl w-100'>{t('bulkImportModal.description')}</p>
-            <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br/>QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br/>QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
-          </div>
-
-          <input
-            id='bulk-import'
-            type='file'
-            className='dn'
-            multiple
-            accept='.txt'
-            ref={el => { this.bulkCidInput = el }}
-            onChange={this.onChange}
-          />
-          <Button
-            onClick={this.selectFile}
-            className='ma2 tc'
-            bg='bg-teal'
-            type='button'
-          >
-            {t('bulkImportModal.select')}
-          </Button>
-
-          {this.state.selectedFile && (
-            <p className='mt2 charcoal'>
-              {`${t('bulkImportModal.selectedFile')}: ${this.state.selectedFile.name}`}
-            </p>
-          )}
-
-          {this.state.validationError && (
-            <p className='mt2 red'>
-              {this.state.validationError}
-            </p>
-          )}
-        </ModalBody>
-
-        <ModalActions>
-          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={this.onSubmit}>{t('app:actions.import')}</Button>
-        </ModalActions>
-      </Modal>
-    )
-  }
+  const isDisabled = !selectedFile
+  const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
+
+  return (
+    <Modal {...props} className={className} onCancel={onCancel}>
+      <ModalBody title={t('bulkImportModal.title')} Icon={Icon}>
+        <div className='mb3 flex flex-column items-center'>
+          <p className='mt0 charcoal tl w-100'>{t('bulkImportModal.description')}</p>
+          <code className={codeClass}>bafkreibm6jg3ux5qumhcn2b3flc3tyu6dmlb4xa7u5bf44yegnrjhc4yeq<br />QmawceGscqN4o8Y8Fv26UUmB454kn2bnkXV5tEQYc4jBd6 barrel.png<br />QmbvrHYWXAU1BuxMPNRtfeF4DS2oPmo5hat7ocqAkNPr74 pi equals.png</code>
+        </div>
+
+        <input
+          id='bulk-import'
+          type='file'
+          className='dn'
+          multiple
+          accept='.txt'
+          ref={bulkCidInputRef}
+          onChange={onChange}
+        />
+        <Button
+          onClick={selectFile}
+          className='ma2 tc'
+          bg='bg-teal'
+          type='button'
+        >
+          {t('bulkImportModal.select')}
+        </Button>
+
+        {selectedFile && (
+          <p className='mt2 charcoal'>
+            {`${t('bulkImportModal.selectedFile')}: ${selectedFile.name}`}
+          </p>
+        )}
+
+        {validationError && (
+          <p className='mt2 red'>
+            {validationError}
+          </p>
+        )}
+      </ModalBody>
+
+      <ModalActions>
+        <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+        <Button className='ma2 tc' bg='bg-teal' disabled={isDisabled} onClick={onSubmit}>{t('app:actions.import')}</Button>
+      </ModalActions>
+    </Modal>
+  )
 }
 
 export default withTranslation('files')(BulkImportModal)

From 4d52a3c8a6bc6edb7db13b225ad8d986dcd9106d Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 14:58:49 -0500
Subject: [PATCH 42/44] Use useTranslation

---
 src/files/modals/bulk-import-modal/BulkImportModal.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 04dd375ac..86e5accbe 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -1,15 +1,16 @@
 import React, { useState, useRef } from 'react'
 import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
-import { withTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import * as isIPFS from 'is-ipfs'
 import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
-const BulkImportModal = ({ t, tReady, onCancel, className = '', onBulkCidImport, ...props }) => {
+const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }) => {
   const [selectedFile, setSelectedFile] = useState(null)
   const [validationError, setValidationError] = useState(null)
   const bulkCidInputRef = useRef(null)
+  const { t } = useTranslation('files')
 
   const validateFileContents = async (file) => {
     try {
@@ -99,4 +100,4 @@ const BulkImportModal = ({ t, tReady, onCancel, className = '', onBulkCidImport,
   )
 }
 
-export default withTranslation('files')(BulkImportModal)
+export default BulkImportModal

From eafec89f332322dccab0c033f8536060a21cee7e Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 15:38:26 -0500
Subject: [PATCH 43/44] Update to TS file

---
 src/components/modal/Modal.js                       | 13 ++-----------
 src/files/modals/Modals.js                          |  2 +-
 ...odal.stories.js => bulk-import-modal.stories.js} |  2 +-
 .../{BulkImportModal.js => bulk-import-modal.tsx}   | 11 ++++++-----
 4 files changed, 10 insertions(+), 18 deletions(-)
 rename src/files/modals/bulk-import-modal/{BulkImportModal.stories.js => bulk-import-modal.stories.js} (89%)
 rename src/files/modals/bulk-import-modal/{BulkImportModal.js => bulk-import-modal.tsx} (91%)

diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
index 778d30ae2..05695bb3d 100644
--- a/src/components/modal/Modal.js
+++ b/src/components/modal/Modal.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import CancelIcon from '../../icons/GlyphSmallCancel.js'
 
-export const ModalActions = ({ justify, className, children, ...props }) => (
+export const ModalActions = ({ justify = 'between', className = '', children, ...props }) => (
   <div className={`flex justify-${justify} pa2 ${className}`} style={{ backgroundColor: '#f4f6f8' }} {...props}>
     { children }
   </div>
@@ -13,12 +13,7 @@ ModalActions.propTypes = {
   className: PropTypes.string
 }
 
-ModalActions.defaultProps = {
-  justify: 'between',
-  className: ''
-}
-
-export const ModalBody = ({ className, Icon, title, children, ...props }) => (
+export const ModalBody = ({ className = '', Icon, title, children, ...props }) => (
   <div className={`ph4 pv3 tc ${className}`} {...props}>
     { Icon && (
       <div className='center bg-snow br-100 flex justify-center items-center' style={{ width: '80px', height: '80px' }}>
@@ -40,10 +35,6 @@ ModalBody.propTypes = {
   ])
 }
 
-ModalBody.defaultProps = {
-  className: ''
-}
-
 export const Modal = ({ onCancel, children, className, ...props }) => {
   return (
     <div className={`${className} bg-white w-80 shadow-4 sans-serif relative`} style={{ maxWidth: '34em' }} {...props}>
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index beb966aed..5ccebac50 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -10,7 +10,7 @@ import RenameModal from './rename-modal/RenameModal.js'
 import PinningModal from './pinning-modal/PinningModal.js'
 import RemoveModal from './remove-modal/RemoveModal.js'
 import AddByPathModal from './add-by-path-modal/AddByPathModal.js'
-import BulkImportModal from './bulk-import-modal/BulkImportModal.js'
+import BulkImportModal from './bulk-import-modal/bulk-import-modal.tsx'
 import PublishModal from './publish-modal/PublishModal.js'
 import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
 import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.stories.js b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
similarity index 89%
rename from src/files/modals/bulk-import-modal/BulkImportModal.stories.js
rename to src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
index a13e141a7..2d3d10eb4 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.stories.js
+++ b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import i18n from '../../../i18n-decorator.js'
-import BulkImportModal from './BulkImportModal.js'
+import BulkImportModal from './bulk-import-modal.js'
 
 /**
  * @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/bulk-import-modal.tsx
similarity index 91%
rename from src/files/modals/bulk-import-modal/BulkImportModal.js
rename to src/files/modals/bulk-import-modal/bulk-import-modal.tsx
index 86e5accbe..6702a32c3 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/bulk-import-modal.tsx
@@ -7,9 +7,9 @@ import Icon from '../../../icons/StrokeDocument.js'
 import { normalizeFiles } from '../../../lib/files.js'
 
 const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }) => {
-  const [selectedFile, setSelectedFile] = useState(null)
-  const [validationError, setValidationError] = useState(null)
-  const bulkCidInputRef = useRef(null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [validationError, setValidationError] = useState<string | undefined>(undefined)
+  const bulkCidInputRef = useRef<HTMLInputElement>(null)
   const { t } = useTranslation('files')
 
   const validateFileContents = async (file) => {
@@ -40,7 +40,9 @@ const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }
   }
 
   const selectFile = () => {
-    bulkCidInputRef.current.click()
+    if (bulkCidInputRef.current) {
+      bulkCidInputRef.current.click()
+    }
   }
 
   const onSubmit = async () => {
@@ -74,7 +76,6 @@ const BulkImportModal = ({ onCancel, className = '', onBulkCidImport, ...props }
           onClick={selectFile}
           className='ma2 tc'
           bg='bg-teal'
-          type='button'
         >
           {t('bulkImportModal.select')}
         </Button>

From fdef1f415807d19e375e56a33b53dd533396512d Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 13 Dec 2024 17:27:53 -0500
Subject: [PATCH 44/44] Update import path

---
 src/files/modals/bulk-import-modal/bulk-import-modal.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
index 2d3d10eb4..17d585019 100644
--- a/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
+++ b/src/files/modals/bulk-import-modal/bulk-import-modal.stories.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import i18n from '../../../i18n-decorator.js'
-import BulkImportModal from './bulk-import-modal.js'
+import BulkImportModal from './bulk-import-modal.tsx'
 
 /**
  * @type {import('@storybook/react').Meta}