wip: import car

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>

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",
+  "fromDagCar": "From CAR Archive",
   "newFolder": "New folder",
   "generating": "Generating…",
   "actions": {

src/bundles/files/actions.js

@@ -330,6 +330,19 @@ const actions = () => ({
     }
   }),
 
+  /**
+   * Imports given `source` CAR file to the provided `root` path. On completion
+   * (success or fail) will trigger `doFilesFetch` to update the state.
+   * @param {FileStream[]} source
+   * @param {string} root
+   */
+  doImportCar: (source, root) => spawn(ACTIONS.IMPORT_CAR, async function * (ipfs, { store }) {
+    console.log(source, root)
+
+    // const res = await ipfs.dag.import(source)
+    console.log(ipfs.dag)
+  }),
+
   /**
    * Deletes `files` with provided paths. On completion (success sor fail) will
    * trigger `doFilesFetch` to update the state.

src/bundles/files/consts.js

@@ -17,6 +17,8 @@ export const ACTIONS = {
   MAKE_DIR: ('FILES_MAKEDIR'),
   /** @type {'FILES_WRITE'} */
   WRITE: ('FILES_WRITE'),
+  /** @type {'IMPORT_CAR'} */
+  IMPORT_CAR: ('IMPORT_CAR'),
   /** @type {'FILES_DOWNLOADLINK'} */
   DOWNLOAD_LINK: ('FILES_DOWNLOADLINK'),
   /** @type {'FILES_SHARE_LINK'} */
@@ -78,6 +80,7 @@ export const cliCmdKeys = {
   ADD_DIRECTORY: 'addNewDirectory',
   CREATE_NEW_DIRECTORY: 'createNewDirectory',
   FROM_IPFS: 'fromIpfs',
+  FROM_DAG_CAR: 'fromDagCar',
   ADD_NEW_PEER: 'addNewPeer'
 }
 
@@ -124,5 +127,6 @@ export const cliCommandList = {
    * @param {string} path
    */
   [cliCmdKeys.FROM_IPFS]: (path) => `ipfs files cp /ipfs/<cid> "${path}/<dest-name>"`,
+  [cliCmdKeys.FROM_DAG_CAR]: () => 'ipfs dag import <car-file>',
   [cliCmdKeys.ADD_NEW_PEER]: () => 'ipfs swarm connect <peer-multiaddr>'
 }

src/files/FilesPage.js

@@ -21,7 +21,7 @@ import Header from './header/Header'
 import FileImportStatus from './file-import-status/FileImportStatus'
 
 const FilesPage = ({
-  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesWrite, doFilesAddPath, doUpdateHash,
+  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesWrite, doImportCar, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, doExploreUserProvidedPath,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
@@ -67,12 +67,18 @@ const FilesPage = ({
     const { abort } = await downloadFile(url, filename, updater, method)
     setDownloadAbort(() => abort)
   }
+
   const onAddFiles = (raw, root = '') => {
     if (root === '') root = files.path
 
     doFilesWrite(raw, root)
   }
 
+  const onImportCar = (raw, root = '') => {
+    if (root === '') root = files.path
+    doImportCar(raw, root)
+  }
+
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
   const onInspect = (cid) => doUpdateHash(`/explore/ipfs/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files: files })
@@ -212,6 +218,7 @@ const FilesPage = ({
         files={files}
         onNavigate={doFilesNavigateTo}
         onAddFiles={onAddFiles}
+        onImportCar={onImportCar}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
         onNewFolder={(files) => showModal(NEW_FOLDER, files)}
@@ -273,6 +280,7 @@ export default connect(
   'selectFilesSorting',
   'selectToursEnabled',
   'doFilesWrite',
+  'doImportCar',
   'doFilesDownloadLink',
   'doExploreUserProvidedPath',
   'doFilesSizeGet',

src/files/file-input/FileInput.js

@@ -7,6 +7,7 @@ import { normalizeFiles } from '../../lib/files'
 import DocumentIcon from '../../icons/StrokeDocument'
 import FolderIcon from '../../icons/StrokeFolder'
 import NewFolderIcon from '../../icons/StrokeNewFolder'
+import DataIcon from '../../icons/StrokeData'
 import DecentralizationIcon from '../../icons/StrokeDecentralization'
 // Components
 import { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown'
@@ -50,6 +51,16 @@ class FileInput extends React.Component {
     this.toggleDropdown()
   }
 
+  onAddByCar = () => {
+    this.toggleDropdown()
+    return this.carInput.click()
+  }
+
+  onCarInputChange = (input) => async () => {
+    this.props.onImportCar(normalizeFiles(input.files))
+    input.value = null
+  }
+
   onNewFolder = () => {
     this.props.onNewFolder()
     this.toggleDropdown()
@@ -87,6 +98,11 @@ class FileInput extends React.Component {
               <DecentralizationIcon className='fill-aqua w2 mr1' />
               {t('addByPath')}
             </Option>
+            <Option onClick={this.onAddByCar} id='add-by-car' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_DAG_CAR)}
+              isCliTutorModeEnabled={isCliTutorModeEnabled}>
+              <DataIcon className='fill-aqua w2 mr1' />
+              {t('fromDagCar')}
+            </Option>
             <Option onClick={this.onNewFolder} id='add-new-folder' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.CREATE_NEW_DIRECTORY)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
@@ -111,6 +127,13 @@ class FileInput extends React.Component {
           webkitdirectory='true'
           ref={el => { this.folderInput = el }}
           onChange={this.onInputChange(this.folderInput)} />
+
+        <input
+          id='car-input'
+          type='file'
+          className='dn'
+          ref={el => { this.carInput = el }}
+          onChange={this.onCarInputChange(this.carInput)} />
       </div>
     )
   }
@@ -120,7 +143,8 @@ FileInput.propTypes = {
   t: PropTypes.func.isRequired,
   onAddFiles: PropTypes.func.isRequired,
   onAddByPath: PropTypes.func.isRequired,
-  onNewFolder: PropTypes.func.isRequired
+  onNewFolder: PropTypes.func.isRequired,
+  onImportCar: PropTypes.func.isRequired
 }
 
 export default connect(

src/files/header/Header.js

@@ -78,8 +78,9 @@ class Header extends React.Component {
               { (files && files.type === 'directory' && filesPathInfo.isMfs)
                 ? <FileInput
                   onNewFolder={this.props.onNewFolder}
-                  onAddFiles={this.props.onAddFiles}
                   onAddByPath={this.props.onAddByPath}
+                  onImportCar={this.props.onImportCar}
+                  onAddFiles={this.props.onAddFiles}
                   onCliTutorMode={this.props.onCliTutorMode}
                 />
                 : <div ref={el => { this.dotsWrapper = el }}>