• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

yash-deore/react-ipfs-uploader: React Components that enable you to upload file ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

yash-deore/react-ipfs-uploader

开源软件地址:

https://github.com/yash-deore/react-ipfs-uploader

开源编程语言:

JavaScript 95.4%

开源软件介绍:

react-ipfs-uploader

React Components that enable you to upload a file(Images,PDFs,Text,etc.) , multiple files or a folder to IPFS .

NPM downloads JavaScript Style Guide

Install

npm :

npm install react-ipfs-uploader

yarn :

yarn add react-ipfs-uploader

Demo

Demo Website : https://yash-deore.github.io/react-ipfs-uploader/

Demo Video

Demo Video

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

// 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 YourComponent

MultipleFilesUpload : Uploads Multiple Files and returns the URL after uploading the files .

Example : 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 : Uploads Folder and returns the URL after uploading the folder .

Example : https://codesandbox.io/s/folderupload-y6j2b

// 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 .

Example : https://codesandbox.io/s/imageupload-65kpl

// 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 YourComponent

PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading .

Example : 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

Example : https://codesandbox.io/s/textupload-vpcst

// 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 YourComponent

Links

Developer 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

License

MIT © yash-deore

Made with react , create-react-library , react-bootstrap , ipfs-http-client , it-all




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap