https://github.com/fiatjaf/ipfs-dropzone

Dropzone.js that uploads to IPFS instead of to an URL
https://github.com/fiatjaf/ipfs-dropzone

drag-and-drop dropzonejs file-upload ipfs

Last synced: 15 days ago
JSON representation

Dropzone.js that uploads to IPFS instead of to an URL

• Host: GitHub
• URL: https://github.com/fiatjaf/ipfs-dropzone
• Owner: fiatjaf
• Created: 2017-12-30T22:37:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-08-07T20:08:36.000Z (over 5 years ago)
• Last Synced: 2025-01-11T14:43:17.912Z (20 days ago)
• Topics: drag-and-drop, dropzonejs, file-upload, ipfs
• Language: JavaScript
• Homepage: https://filemap.xyz/
• Size: 2.93 KB
• Stars: 154
• Watchers: 3
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Instead of uploading the dropped files to an URL, this subclass of [Dropzone.js](http://www.dropzonejs.com/) publishes them to [IPFS](https://ipfs.io/) with [js-ipfs](https://github.com/ipfs/js-ipfs) (no running local nodes needed).

Both [ipfs](https://www.npmjs.com/package/ipfs) and [dropzone](https://www.npmjs.com/package/dropzone) are peer dependencies.

## Usage

```js

const IPFSDropzone = require('ipfs-dropzone')

let dz = IPFSDropzone('#files', {

  /*

    the name of the repo which will store the IPFS blocks in the browser.

    this name will be used by IPFS to create the IndexedDB databases.

    defaults to "ipfs-dropzone"

  */

  ipfsRepoName: 'filemap.xyz',

  /*

    ipfsPath is a function that takes the dropzone file object

    and returns a string that will be used as the path when calling

    https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add

    defaults to (file) => file.name

  */

  ipfsPath: file => file.name

  // all other options you'll normally pass to dropzone go here.

})

dz.on('success', file => {

  /*

    everywhere the normal dropzone file object will now have a

    property called "ipfs" which contains the result to the call to

    https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add

  */

  console.log('file published to ipfs: ' + file.ipfs[0].hash)

  /*

    your dropzone object will also have the property "node", which

    resolves to the IPFS node the dropzone object is using.

    it is a Promise because the IPFS node is only initialized at the

    moment of the first file upload.

  */

  dz.node.then(ipfs => {

    ipfs.files.cat(file.hash, (err, file) => {

      console.log(file.toString('utf-8'))

    })

  })

})

```

## Information

  * Most normal Dropzone features and events should work, but I'm not sure.

  * There's no way to cancel the process of adding a file.

  * I don't know how to publish this package in a way all JS transpilers and bundlers out there can understand. Please help me.

  * Please read the source if something is unclear. The source is really small.

## What is the LICENSE?

The MIT License.