feat: import DAG CAR

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