Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: CAR Upload loader #318

Merged
merged 14 commits into from
Apr 25, 2022
Merged

feat: CAR Upload loader #318

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9fc4ba7
feat: added support to convert stream to iterable
alvin-reyes Apr 13, 2022
14cf53d
Merge branch 'master' of https://github.com/ipfs/ipld-explorer-compon…
alvin-reyes Apr 15, 2022
548f545
feat: car upload spinner animation
alvin-reyes Apr 15, 2022
4454870
chore: removed unused import
alvin-reyes Apr 15, 2022
c7df739
chore: added alt on img
alvin-reyes Apr 15, 2022
798dda5
chore: fixed lint issues
alvin-reyes Apr 15, 2022
d213e65
chore: fixed lint issues
alvin-reyes Apr 15, 2022
9b202be
chore: moved the images to the ipld-explorer-components
alvin-reyes Apr 22, 2022
69d0bc3
chore: use navy 0-100 on explore button
alvin-reyes Apr 22, 2022
40f5847
chore: fix lint issues
alvin-reyes Apr 22, 2022
8612bd0
chore: fix lint issues
alvin-reyes Apr 22, 2022
da6126b
chore: fix lint issues
alvin-reyes Apr 22, 2022
8ffa2f4
chore: fixed more storybook lint issues
alvin-reyes Apr 22, 2022
5d0bdf6
fix: muted spinner when inactive
lidel Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/bundles/explore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,16 @@ const makeBundle = () => {
store.doUpdateHash(hash)
}

bundle.doUploadUserProvidedCar = (file) => (args) => {
bundle.doUploadUserProvidedCar = (file, uploadIcon) => (args) => {
const { store, getIpfs } = args
importCar(file, getIpfs()).then(result => {
const cid = result.root.cid
const hash = cid.toString() ? `#/explore${ensureLeadingSlash(cid.toString())}` : '#/explore'
store.doUpdateHash(hash)

// Grab the car loader image so we can change it's state
const imageFileLoader = document.getElementById('car-loader-image')
imageFileLoader.src = uploadIcon
})
}
return bundle
Expand Down
17 changes: 12 additions & 5 deletions src/components/explore/IpldCarExploreForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ class IpldCarExploreForm extends React.Component {
constructor (props) {
super(props)
this.state = {
file: { }
file: { },
uploadIcon: this.props.uploadIcon
}

this.handleOnChange = this.handleOnChange.bind(this)
this.handleOnSubmit = this.handleOnSubmit.bind(this)
}
Expand All @@ -18,9 +18,15 @@ class IpldCarExploreForm extends React.Component {
}

handleOnChange () {
const selectedFile = document.getElementById('car-file').files[0]
this.setState({ file: selectedFile })
this.props.doUploadUserProvidedCar(selectedFile)
this.setState({ uploadIcon: this.props.spinnerIcon }, () => {
// Change the state.
const imageFileLoader = document.getElementById('car-loader-image')
imageFileLoader.src = this.props.spinnerIcon

const selectedFile = document.getElementById('car-file').files[0]
this.setState({ file: selectedFile })
this.props.doUploadUserProvidedCar(selectedFile, this.props.uploadIcon)
})
}

render () {
Expand All @@ -31,6 +37,7 @@ class IpldCarExploreForm extends React.Component {
<div className='relative'>
<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>
<img id='car-loader-image' alt='placeholder for upload and loader' src={this.state.uploadIcon} className='absolute' style={{ top: '0px', right: '0px', height: '30px', width: '30px', paddingRight: '10px' }} />
</div>
</div>
</form>
Expand Down