React Components that enable you to upload a file(Images,PDFs,Text,etc.) , multiple files or a folder to IPFS .
npm install react-ipfs-uploaderyarn add react-ipfs-uploaderDemo Website : https://yash-deore.github.io/react-ipfs-uploader/
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 .
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 .
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 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 ( <div> <FileUpload setUrl={setFileUrl} /> FileUrl : <a href={fileUrl} target='_blank' rel='noopener noreferrer' > {fileUrl} </a> </div> ) } export default YourComponentExample : https://codesandbox.io/s/multiplefilesupload-uf6yw
// 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 ( <div> <MultipleFilesUpload setUrl={setMultipleFilesUrl} /> MultipleFilesUrl : <a href={multipleFilesUrl} target='_blank' rel='noopener noreferrer' > {multipleFilesUrl} </a> </div> ) } export default YourComponent// 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 ( <div> <FolderUpload setUrl={setFolderUrl} /> FolderUrl : <a href={folderUrl} target='_blank' rel='noopener noreferrer' > {folderUrl} </a> </div> ) } export default YourComponent// 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 ( <div> <ImageUpload setUrl={setImageUrl} /> ImageUrl : <a href={imageUrl} target='_blank' rel='noopener noreferrer' > {imageUrl} </a> </div> ) } export default YourComponentExample : https://codesandbox.io/s/pdfupload-ce4ch
// 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 ( <div> <PdfUpload setUrl={setPdfUrl} /> Pdfurl : <a href={pdfUrl} target='_blank' rel='noopener noreferrer'> {pdfUrl} </a> </div> ) } export default YourComponent// 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 ( <div> <TextUpload setUrl={setTextUrl} /> TextUrl : <a href={textUrl} target='_blank' rel='noopener noreferrer' > {textUrl} </a> </div> ) } export default YourComponentDeveloper Chat : https://discord.gg/bgY4TZecVu
Demo Website : https://yash-deore.github.io/react-ipfs-uploader/
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
MIT © yash-deore