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)} /> - ) } 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'} + {this.state.selectedFile && (

Selected file: {this.state.selectedFile.name}

)} + {this.state.validationError && ( +

+ {this.state.validationError} +

+ )}