All Projects → fiatjaf → Ipfs Dropzone

fiatjaf / Ipfs Dropzone

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ipfs Dropzone

yii2-dropzone
This extension provides the Dropzone integration for the Yii2 framework.
Stars: ✭ 11 (-92.72%)
Mutual labels:  drag-and-drop, file-upload
React Uploady
Modern file uploading - components & hooks for React
Stars: ✭ 372 (+146.36%)
Mutual labels:  drag-and-drop, file-upload
vue-simple-upload-component
A simple upload component for Vue.js 2.x
Stars: ✭ 14 (-90.73%)
Mutual labels:  drag-and-drop, file-upload
File Drop
A simple file drag and drop custom-element
Stars: ✭ 188 (+24.5%)
Mutual labels:  drag-and-drop, file-upload
Dfile
[Python + Flask] DFile: A fancy S3-based file sharing mode
Stars: ✭ 79 (-47.68%)
Mutual labels:  ipfs, file-upload
vue3-dropzone
HTML5 drag-drop zone with vue3
Stars: ✭ 34 (-77.48%)
Mutual labels:  drag-and-drop, file-upload
Dropzone
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
Stars: ✭ 16,097 (+10560.26%)
Mutual labels:  drag-and-drop, file-upload
react-butterfiles
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.
Stars: ✭ 44 (-70.86%)
Mutual labels:  drag-and-drop, file-upload
React Dropzone
Simple HTML5 drag-drop zone with React.js.
Stars: ✭ 8,639 (+5621.19%)
Mutual labels:  drag-and-drop, file-upload
Filepond Boilerplate Php
🔥 A FilePond PHP project starter kit
Stars: ✭ 45 (-70.2%)
Mutual labels:  drag-and-drop, file-upload
image-uploader
Simple Drag & Drop image uploader plugin to static forms, without using AJAX
Stars: ✭ 70 (-53.64%)
Mutual labels:  drag-and-drop, file-upload
React File Drop
React component for Gmail or Facebook -like drag and drop file uploader
Stars: ✭ 123 (-18.54%)
Mutual labels:  drag-and-drop, file-upload
Slate
WIP - An open source Filecoin storage and retrieval client that makes it easy to collect, organize, and share data anywhere.
Stars: ✭ 383 (+153.64%)
Mutual labels:  ipfs, file-upload
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-39.07%)
Mutual labels:  drag-and-drop, file-upload
Filepond
🌊 A flexible and fun JavaScript file upload library
Stars: ✭ 11,869 (+7760.26%)
Mutual labels:  drag-and-drop, file-upload
Ipfs Screenshot
Like Cloudapp using IPFS
Stars: ✭ 129 (-14.57%)
Mutual labels:  ipfs
React Dragline
🐼Guide lines and magnetic adsorption to better align draggable elements in React.
Stars: ✭ 134 (-11.26%)
Mutual labels:  drag-and-drop
Dnd Multi Backend
Multi Backend system for DnD Core & more
Stars: ✭ 129 (-14.57%)
Mutual labels:  drag-and-drop
Rails sortable
Easy drag & drop sorting with persisting the arranged order for rails
Stars: ✭ 127 (-15.89%)
Mutual labels:  drag-and-drop
Vue Image Crop Upload
A beautiful vue component for image cropping and uploading. (vue图片剪裁上传组件)
Stars: ✭ 1,892 (+1152.98%)
Mutual labels:  file-upload

Instead of uploading the dropped files to an URL, this subclass of Dropzone.js publishes them to IPFS with js-ipfs (no running local nodes needed).

Both ipfs and dropzone are peer dependencies.

Usage

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].