vue.jsipfsjs-ipfs

js-IPFS / vue.js upload error - Object is not async iterable


I have been working on js-ipfs (0.49.0) and this was working fine but I started getting some issues, anyway I have finally come back to look at the code again and the connection works fine but when I attempt to upload I get a new error

Object is not async iterable

I am not sure what that means or how to address in my code a lot of the examples are for react and not vue

Any pointers much appiciated.

methods: {
    async getIpfsNodeInfo() {
      try {
        // Await for ipfs node instance.
        node = await ipfs
        // console.log(node)
        // Call ipfs `id` method.
        // Returns the identity of the Peer.
        const { agentVersion, id } = await node.id()
        this.agentVersion = agentVersion
        this.id = id
        // Set successful status text.
        this.status = 'Connected to IPFS 😊'
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
      }
    },

    onFileSelected(event) {
      this.selectedFile = event.target.files[0]
      this.saveIPFS()
    },

    async saveIPFS() {
      try {
        for await (const result of node.add(this.selectedFile)) {
        
          this.fileContents = result
          this.getIPFS()
        }
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
      }
    },


Solution

  • ipfs.add returns a single object since ipfs@0.48.0 - you need to change:

       async saveIPFS() {
          try {
            for await (const result of node.add(this.selectedFile)) {
            
              this.fileContents = result
              this.getIPFS()
            }
          } catch (err) {
            // Set error status text.
            this.status = `Error: ${err}`
          }
        },
    

    to:

       async saveIPFS() {
          try {
            this.fileContents = await node.add(this.selectedFile)
            this.getIPFS()
          } catch (err) {
            // Set error status text.
            this.status = `Error: ${err}`
          }
        },
    

    See the blog post for more: https://blog.ipfs.io/2020-07-20-js-ipfs-0-48/#ipfs-add