Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yash-deore/react-ipfs-uploader
React Components that enable you to upload file , files or folder to IPFS .
https://github.com/yash-deore/react-ipfs-uploader
create-react-library ipfs-http-client it-all react-bootstrap reactjs
Last synced: 3 months ago
JSON representation
React Components that enable you to upload file , files or folder to IPFS .
- Host: GitHub
- URL: https://github.com/yash-deore/react-ipfs-uploader
- Owner: yash-deore
- Created: 2021-11-21T13:12:09.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-31T11:17:14.000Z (almost 2 years ago)
- Last Synced: 2024-08-06T16:17:07.587Z (5 months ago)
- Topics: create-react-library, ipfs-http-client, it-all, react-bootstrap, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-ipfs-uploader
- Size: 1.53 MB
- Stars: 27
- Watchers: 2
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-ipfs-uploader
## React Components that enable you to upload a file(Images,PDFs,Text,etc.) , multiple files or a folder to IPFS .
[](https://www.npmjs.com/package/react-ipfs-uploader)
[](https://standardjs.com)
# Note
> This package uses Infura's public gateway to upload files to IPFS. Infura's public gateway is not available anymore since it has become a paid service and will require a projectId and API key to upload files. Due to this the compoenents are unable to upload files to IPFS.
>
> -- Yash Deore (creator of react-ipfs-uploader)
## Install
### npm :
```bash
npm install react-ipfs-uploader
```
### yarn :
```bash
yarn add react-ipfs-uploader
```
## Features
## Single File Upload Components :
1 . FileUpload : Uploads the selcted File and returns the URL after uploading the file .
2 . ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading .
3 . PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading .
4 . TextUpload : Returns the URL of the Text after uploading .
## Multiple Files Upload Components :
1 . MultipleFilesUpload : Uploads the selcted Files and returns the URL after uploading the files .
2 . FolderUpload : Uploads the selected Folder and returns the URL after uploading the folder .
## Usage
1 . Declare an `useState` hook that can hold a string as its current state .
2 . Pass the `setFunction` to the component you are using ie. `setUrl={setFunction}`
3 . As you upload the file , files or folder the url will be returned .
> ### FileUpload : Uploads the selcted File and returns the URL after uploading the file .
> Example : https://codesandbox.io/s/fileupload-81g84
```jsx
// FileUpload Component : Uploads the selcted File and returns the URL after uploading the file .
import React, { useState } from 'react'
import { FileUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [fileUrl, setFileUrl] = useState('')
return (
)
}
export default YourComponent
```
> ### MultipleFilesUpload : Uploads Multiple Files and returns the URL after uploading the files .
> Example : https://codesandbox.io/s/multiplefilesupload-uf6yw
```jsx
// MultipleFilesUpload Component : Uploads Multiple files to IPFS and returns the URL
import React, { useState } from 'react'
import { MultipleFilesUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [multipleFilesUrl, setMultipleFilesUrl] = useState('')
return (
)
}
export default YourComponent
```
> ### FolderUpload : Uploads Folder and returns the URL after uploading the folder .
> Example : https://codesandbox.io/s/folderupload-y6j2b
```jsx
// FolderUpload Component : Uploads a Folder to IPFS and returns the URL
import React, { useState } from 'react'
import { FolderUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [folderUrl, setFolderUrl] = useState('')
return (
)
}
export default YourComponent
```
> ### ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading .
> Example : https://codesandbox.io/s/imageupload-65kpl
```jsx
// ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading .
import React, { useState } from 'react'
import { ImageUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [imageUrl, setImageUrl] = useState('')
return (
)
}
export default YourComponent
```
> ### PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading .
> Example : https://codesandbox.io/s/pdfupload-ce4ch
```jsx
// PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading .
import React, { useState } from 'react'
import { PdfUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [pdfUrl, setPdfUrl] = useState('')
return (
)
}
export default YourComponent
```
> ### TextUpload : Returns the URL of the Text after uploading
> Example : https://codesandbox.io/s/textupload-vpcst
```jsx
// TextUpload : Returns the URL of the Text after uploading
import React, { useState } from 'react'
import { Textupload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [textUrl, setTextUrl] = useState('')
return (
)
}
export default YourComponent
```
## Links
Developer Chat : https://discord.gg/bgY4TZecVu
CodeSandBox : https://codesandbox.io/u/yash-deore
NPM Package : https://www.npmjs.com/package/react-ipfs-uploader
GitHub Repository : https://github.com/yash-deore/react-ipfs-uploader
## License
MIT © [yash-deore](https://github.com/yash-deore)
> ### Made with react , create-react-library , react-bootstrap , ipfs-http-client , it-all