# react-ipfs-uploader

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

Latest version **1.3.0** (published 2023-03-31) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-ipfs-uploader
pnpm add react-ipfs-uploader
yarn add react-ipfs-uploader
bun add react-ipfs-uploader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2023-03-31 |
| First published | 2021-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 167.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | yash-deore |
| Maintainers | yash-deore |
| Keywords | react-component, react-ipfs-uploader, react, ipfs, upload, react-ipfs, ipfs-upload, react-upload, react-ipfs-upload, image, image-upload, pdf, pdf-upload, text, text-upload |

## Links

- npm: https://www.npmjs.com/package/react-ipfs-uploader
- Repository: https://github.com/yash-deore/react-ipfs-uploader
- Homepage: https://yash-deore.github.io/react-ipfs-uploader/
- Issues: https://github.com/yash-deore/react-ipfs-uploader/issues
- npm.io page: https://npm.io/package/react-ipfs-uploader

## Dependencies (4)

- [it-all](https://npm.io/package/it-all.md) ^1.0.6
- [bootstrap](https://npm.io/package/bootstrap.md) 5.1.3
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.0.2
- [ipfs-http-client](https://npm.io/package/ipfs-http-client.md) ^54.0.1

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2023-03-31
- 1.2.8 — 2023-03-31
- 1.2.7 — 2022-08-18
- 1.2.6 — 2022-05-21
- 1.2.5 — 2022-01-29
- 1.2.4 — 2022-01-27
- 1.2.3 — 2021-12-28
- 1.2.2 — 2021-12-02
- 1.2.1 — 2021-11-29
- 1.2.0 — 2021-11-29
- 1.1.3 — 2021-11-28
- 1.1.2 — 2021-11-28
- 1.1.1 — 2021-11-28
- 1.1.0 — 2021-11-28
- 1.0.6 — 2021-11-23
- … 6 more at https://npm.io/package/react-ipfs-uploader/versions

## README

# react-ipfs-uploader

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

[![NPM](https://img.shields.io/npm/v/react-ipfs-uploader.svg)](https://www.npmjs.com/package/react-ipfs-uploader)
![downloads](https://img.shields.io/npm/dt/react-ipfs-uploader.svg)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](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. <br/>
>
> -- 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 . <br />
2 . ImageUpload : Shows the user a preview of the selected Image and returns the URL after uploading . <br />
3 . PdfUpload : Shows the user a preview of the selected PDF and returns the URL after uploading . <br />
4 . TextUpload : Returns the URL of the Text after uploading . <br />

## Multiple Files Upload Components :

1 . MultipleFilesUpload : Uploads the selcted Files and returns the URL after uploading the files . <br />
2 . FolderUpload : Uploads the selected Folder and returns the URL after uploading the folder . <br />

## Usage

1 . Declare an `useState` hook that can hold a string as its current state . <br/>
2 . Pass the `setFunction` to the component you are using ie. `setUrl={setFunction}` <br/>
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 (
        <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

```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 (
        <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

```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 (
        <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

```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 (
        <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

```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 (
        <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

```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 (
        <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 <br/>
CodeSandBox : https://codesandbox.io/u/yash-deore <br/>
NPM Package : https://www.npmjs.com/package/react-ipfs-uploader <br/>
GitHub Repository : https://github.com/yash-deore/react-ipfs-uploader <br/>

## License

MIT © [yash-deore](https://github.com/yash-deore)

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

---
_Source: https://npm.io/package/react-ipfs-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._