WIP, need to debug modal UX

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')

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'

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>
     )