Uppy: IPFS Plugin

[tunnckoCore]

Heya! Awesome library! Transloadit hits again :) I'm long user and supporter of node-formidable which was created by @felixge, stating it was created for Transloadit. And it's pretty awesome, still, after so many years. Strongly believe that it should be rewritten, but anyway.

I'm playing with the API and looks great and easy. I'm thinking to try to create IPFS plugin, but documenting it here for reminder and if anyone else want it.

const upload = (buff, opts) => {
  const options = Object.assign({
    permanent: false,
    protocol: 'https',
    host: 'ipfs.infura.io',
    port: 5001
  }, opts)

  const ipfs = IpfsApi(options)

  ipfs.files.add(buff).then((result) => {
    const hash = result[0].hash
    const url = `https://ipfs.io/ipfs/${hash}`
    console.log('step 1', url)

    // behind option called `permanent: true`?
    if (options.permanent === true) {
      ipfs.pin.add(hash).then((res) => {
        console.log('step 2', res[0].hash)
      })
    }
  })
}

Also would be great to support upload from url which in turn is pretty easy with ipfs.util.addFromUrl

const ipfs = IpfsApi({
  protocol: 'https',
  host: 'ipfs.infura.io',
  port: 5001
})

ipfs.util.addFromURL('https://avatars3.githubusercontent.com/u/5038030')
.then(console.log)

related is https://github.com/ipfs/js-ipfs-api/issues/674 - for adding support for pin option to addFromURL utility

[arturi]

Hi! Just to double check, you are proposing creating an Uppy plugin that will support uploading or picking files from IPFS. Could you describe the flow from the user’s perspective?

I actually thought about adding some support for Dat and IPFS, would be cool.

And thanks for the nice words! :)

[tunnckoCore]

Yea, I propose plugin for uploading to IPFS. Picking from IPFS not make much sense to me ;d

[arturi]

Well, wouldn’t it be nice the same way you can pick from Instagram or Google Drive? You pick a photo that you store on IPFS and it gets uploaded to the final destination.

[tunnckoCore]

Yea, actually sounds good. But probably another plugin.

Because both things for me are different - the one is uploader plugin, such as Tus; the another is picker/provider such as Instagram, local device and etc.

[arturi]

Closing this for now, but would love to see a PR sometime. I like the idea of Uppy being a decentralized file uploader too ;)

[tunnckoCore]

Can you please assign me, so I can come back more easily some time in future. :)

[sponnet]

Hey @tunnckoCore ,

I did some experimenting with it - and what works really well is just using the XHRUpload plugin for that:

    const XHRUpload = require("@uppy/xhr-upload");

    uppy.use(XHRUpload, {
      endpoint: "https://ipfs.infura.io:5001/api/v0/add",
      formData: true,
      metaFields: []
    });

    uppy.on("upload-success", (file, body) => {
        console.log(body.Hash); // is the IPFS hash of the uploaded file
    });

This uploads to IPFS - and you get all the features of the XHRUpload plugin like progress monitoring etc.

Kudos for the super nice uppy project !

[tunnckoCore]

Sweet, thanks. I'll try it when get time ;p Is it pinning the uploaded? I suppose it not.

[sponnet]

According to the API docs (https://github.com/ipfs/docs/blob/master/content/reference/api/http.md#apiv0add) you can add ?pin=true to the upload URL to pin the file you're uploading.

{
  endpoint: "https://ipfs.infura.io:5001/api/v0/add?pin=true",
}

[tunnckoCore]

Ооooh yea yea, i forgot about that. ;d

[tunnckoCore]

Ookey, but one more thing. How can we direct all to the XHRUpload so that all files from all the sources will be uploaded to the IPFS?

Sweeeeeet! :tada: Passing the Infura to serverUrl works. Just thought it won't that's why i commented.

[arturi]

@tunnckoCore could you please elaborate and possibly share a code sample of how it’s working for you with serverUrl?

[tunnckoCore]

It's as usual?

const URL = 'https://ipfs.infura.io:5001/api/v0/add?pin=true'
const uppy = Uppy({ autoProceed: false })
  .use(Dashboard, { trigger: '#select-files' })
  .use(GoogleDrive, { target: Dashboard, serverUrl: URL })
  .use(Instagram, { target: Dashboard, serverUrl: URL })
  .use(Webcam, { target: Dashboard })
  .use(Tus, { endpoint: URL })
  .use(XHRUpload, { endpoint: URL, formData: true })
  .on('complete', (result) => {
    console.log('Upload result:', result)
  })

The thing was that I wasn't sure if serverUrl is meaning different thing than the endpoint which is in another plugins. But they are basically the same? Consistency in naming would be great, but that works too.

[arturi]

That’s why I’m curious how it works, because those are indeed _not_ the same. serverUrl should point to a Companion instance, that will do authentication and file fetching from Google Drive and Instagram. Then endpoint is where all your uploads will go with XHRUpload — both local files and remote (from Google Drive and Instagram).

[tunnckoCore]

Oooh, right. I actually didn't tried it. Anyway good to know that