fix: convert car stream to iterable (#317)

* feat: added support to convert stream to iterable
* chore: added condition to only accept .car files
* chore: removed the unused StrokeIpld

package.json

@@ -131,7 +131,8 @@
     "multibase": "4.0.2",
     "multiformats": "^9.6.4",
     "multihashes": "^4.0.3",
-    "react-joyride": "^2.3.0"
+    "react-joyride": "^2.3.0",
+    "stream-to-it": "^0.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",

src/bundles/explore.js

@@ -118,7 +118,8 @@ const makeBundle = () => {
 
 async function importCar (file, ipfs) {
   const inStream = file.stream()
-  for await (const result of ipfs.dag.import(inStream)) {
+  const toIterable = require('stream-to-it')
+  for await (const result of ipfs.dag.import(toIterable.source(inStream))) {
     return result
   }
 }

src/components/explore/IpldCarExploreForm.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
-import StrokeIpld from '../../icons/StrokeIpld'
 
 class IpldCarExploreForm extends React.Component {
   constructor (props) {
@@ -16,12 +15,12 @@ class IpldCarExploreForm extends React.Component {
 
   handleOnSubmit (evt) {
     evt.preventDefault()
-    this.props.doUploadUserProvidedCar(this.state.file)
   }
 
   handleOnChange () {
     const selectedFile = document.getElementById('car-file').files[0]
     this.setState({ file: selectedFile })
+    this.props.doUploadUserProvidedCar(selectedFile)
   }
 
   render () {
@@ -30,20 +29,10 @@ class IpldCarExploreForm extends React.Component {
       <form data-id='IpldCarExploreForm' className='sans-serif black-80 flex' onSubmit={this.handleOnSubmit} encType='multipart/form-data'>
         <div className='flex-auto'>
           <div className='relative'>
-            <input id='car-file' type='file' className='input-reset bn pa2 mb2 db w-100 f6 br-0 placeholder-light focus-outline' style={{ borderRadius: '3px 0 0 3px', backgroundColor: 'white', padding: '5px 0px 5px 5px', width: '99%' }} aria-describedby='name-desc' onChange={this.handleOnChange} />
+            <input id='car-file' type='file' accept='.car' className='input-reset bn pa2 mb2 db w-100 f6 br-0 placeholder-light focus-outline' style={{ borderRadius: '3px 0 0 3px', backgroundColor: 'white', padding: '5px 0px 5px 5px', width: '99%' }} aria-describedby='name-desc' onChange={this.handleOnChange} />
             <small id='car-file-desc' className='o-0 absolute f6 black-60 db mb2'>{t('IpldCarExploreForm.uploadCarFile')}</small>
           </div>
         </div>
-        <div className='flex-none'>
-          <button
-            type='submit'
-            className='button-reset dib lh-copy pv1 pl2 pr3 ba f7 fw4 focus-outline white bg-aqua bn'
-            style={{ borderRadius: '0 3px 3px 0' }}
-          >
-            <StrokeIpld style={{ height: 24 }} className='dib fill-current-color v-mid' />
-            <span className='ml2'>{t('IpldExploreForm.explore')}</span>
-          </button>
-        </div>
       </form>
     )
   }