DEV Community

Uploading Files to IPFS from a Web Application

Nader Dabit on June 28, 2021

One of the most common interactions with IPFS is uploading files like images and videos from a client-side application, so I found it surprising th...

Read full post

michaelcodecany • Aug 14 '22

Hi, there was an update on IPFS and your code does not work anymore...

Failed to load resource: the server responded with a status of 401 (Unauthorized)

Can you update your code please

Thanks in advance

Muhammad Sameer • Aug 22 '22

Hi there,
I have check the code again and its working fine may be you have forgot to use your own project id and project key in App.jsx component check the App.jsx component try it again and let me know.

Cuong • Aug 19 '22

the infura public gateway didnt for free anymore, we need to use another public gateway or pay for the IPFS Infura service

Muhammad Sameer • Aug 22 '22

yes but you can use the dedicated gateway for free you don't need to pay for public gateways.

Cuong • Aug 22 '22

thanks, could you recommend me any services?

Roshan George • Aug 26 '22

yah any recommendations please?

Abdulhafiz • Nov 7 '22

web3.storage

Hruthik5124 • Aug 28 '22

yes bro did you got any solution for it??
I'm stuck with this issue now....

Hruthik5124 • Aug 28 '22

Help me this please infura stopped pubilc gateways i have running local ipfs node how can i upload files to that???
please help me with this I'm stucked......

Nate Lubeck • Jun 30 '21 • Edited

This is fire! I'm glad I've got friends like you. Definitely layering this into my graphql api. What I also find interesting is that you can run your own node locally but it still connects to the ipfs network. 🤯

Nader Dabit • Jul 21 '21

💙

williamAdson • Oct 4

Hey! I was asking if you could guide me on achieving this using a local ipfs gateway.

Lucas Schulze • Dec 14 '21

Hi there, great article, I am doing the same thing, but this error pops up, do you have any idea why?
I am using react and not electron, that's weird for me.

node_modules/electron-fetch/lib/index.es.js:1257:21: error: Could not resolve "electron" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)

AJ Sihota • Dec 26 '21

Im getting the same error using vite. Any luck solving this?

Ming-Jung Lee • Jan 28 '22

My error is Uncaught SyntaxError: The requested module '/node_modules/merge-options/index.js?v=7ace0d54' does not provide an export named 'default'

Can anyone help me ,, I use vite and react , seems import { create } from 'ipfs-http-client'; doesn't work fine in this case ??

Lucas Schulze • Mar 10 '22

web3.storage/
github.com/Lschulzes/photo_blockch...

Lucas Schulze • Mar 10 '22

Hey, I ended up switching to Web3Storage, I also used vite.

starboy2103 • Apr 13 '22

Just delete 'electron-fetch' from 'node_modules'. I think it should work.

Adegbite Ademola Kelvin • Aug 21 '22

Hi, Thanks for the content. This actually helped.But whenever I select a file, it processess for a while and get the error GET https://ipfs.infura.io/ipfs/QmcBKzWSSXbR9JSGHbiBRoGFLcKashii6rS4QeS66uHejK Bad Request 400
what could be the problem??

SS • Sep 19 '21

Could someone tell me how to do this for 10000 NFTs? as I need to upload the arts as well as the metadata on ipfs. Also, when the arts are going to be uploaded? The moment the buyers mint the NFTs or before that all the NFTs need to be upload? Thanks

juyuancai • Dec 30 '22

Hi IPFS developers. When you use IPFS to publish file, You need to purchase a VPS to run your IPFS node also pin service like pinata to pin your file. Now we have cheapest solution called Foggie. With Foggie , you can get a 2C4G VPS, 80G storage,4T bandwith with pin service for only $19.9. Also , when you use it, you can get token and NFT rewards, letting you earn money. If you want to know more, Here is the link: https://foggie.fogworks.io/?pcode=uZVcLL&cc=1008#/fogworks

Ming-Jung Lee • Jan 28 '22

I use vite and react to develop,, after implementing this method,, I got some errors ->
Uncaught SyntaxError: The requested module '/node_modules/merge-options/index.js?v=7ace0d54' does not provide an export named 'default'

Really dont know how to solve this? are there some problems like curly braces in
import { create } from 'ipfs-http-client'; ???

Ming-Jung Lee • Jan 28 '22

@dabit3 Thx~~

prem11k • Oct 23 '21 • Edited

Hi @dabit3 I am facing issue when running the code. I followed your YouTube tutorial and tried this snippet as well, but seeing below error for both Infura and pinata.
Please help.

Error: Unhandled Runtime Error
TypeError: debug__default.default is not a function.

prem11k • Oct 27 '21

No worries. I figured it out. It was due to deprecated debug package. I've updated the package in package.json and run npm install --save, it started working.