How to upload file to IPFS with only front-end

So a bootstrap node just refers to a node that’s queried on initial connect for peer discovery. So what I do is:

await ipfs.bootstrap.add("<multiaddr of node>");
await ipfs.swarm.connect("<multiaddr of node>");

The multiaddr should be your own node that you’re hosting. The bootstrap.add is so next time, it’ll connect to the desired node on startup. The swarm.connect is so it connects to the node immediately.

The biggest pitfall to this is I find after some time, you can lose connection to the bootstrap node. To remedy this, I found if I listen on a topic (like keep-alive), and publish to it (can be anything) on both the bootstrap node and the browser node, the connection can stay active for several hours (possibly days if stable enough). I briefly describe this pitfall in a different upcoming blogpost here (keep in mind this is an older draft, but I think the info there will still be useful).

@Discordian I am starting to realize one thing.

If using pubsub, how can I be sure that when browser local node publishes the json, then server node can start to check what’s on the cid that’s on the json and then start to fetch it ? The problem could be the same. When server node starts to fetch it, that’s when local node might go offline and we can’t really do the await on pub/sub system.

I think the best way is to push files to my node.js server and I do the ipfs add and pinning from there completely. This ensures that whenever my await is done, everything is finished.

Makes sense ?

1 Like

Oh true, that makes total sense to me. Could have the client wait for the server to broadcast a message that effectively says “CID successfully pinned”, and the client could signify somehow it received such a message. Pushing the files directly to a server could definitely work too.

1 Like

@Discordian Hey

Hope all is going well with you…

I had 2 favors to ask…

  1. when will your draft be ready ? :smiley:
  2. is there any chance you can take a look at FileCoin and Pinata and Ipfs file sharing
1 Like

Thank you, I hope all is well with you too :slight_smile:

  1. Draft demo is live! Haven’t begun the blog post yet: http://portal.thedisco.zone/testing/paste_bundle

  2. Looks like people already help you out on those :slight_smile:

hey there, I just wanted to ask , what endpoint you used here inside ipfs.create() method since you are using piñata.cloud.

Hey there as well…

I tried pinata and it didn’t work with create() function. Not sure really. Could be that pinata doesn’t expose IPFS’s Rest endpoints.

I am sure you got the same problem where connection times out …

yeah that’s why I was asking :smile:
Did you find any solution or you ditched piñata ?

I am thinking about using fleek and having a chat right now if they can support what I want…

Will let you know if anything good comes out of it… :smiley:

Let me know if you find a way with pinata :slight_smile:

1 Like

I just went to their slack channel and asked about this issue, waiting for their reply!

1 Like

Hi, do you have now a solution to pin files from user’s frontend?
I plan to use Pinata but placing pinata keys on frontend seems not a good solution.

Since this discussion was going on very well, I wanted to ask if its still possible to create a local node in the browser using ipfs-http-client or ipfs-core. I didnt manage to get ipfs-core running like you did in your example. I get ipfs-http-client to run, but I am not able to create a local node in the browser. Can you or anyone else help me (for example what to put in the ipfsHttpClient.create() method to create a browser node)?

EDIT: The local node is just for adding, pinning will be done in the backend. I want to create a node in browser, because I dont want to rely on public gateways. I get the ipfs-http-client to run with Infura API, but as said I want to get it running as local “browser” node