I am also getting the same issue anyone please help … Facing since 3 weeks (same issue) … 
The issue :
fetch.browser.js?c17b:107 POST https://ipfs.infura.io:5001/api/v0/add?stream-channels=true&progress=false 401 (Unauthorized)
The github link for the file :
https://github.com/Vikash-8090-Yadav/Sal-DApp/blob/main/Sal-DAp/Component/Form/component/Addemp.js
Hi @Vikash_Kumar_yadav You’ll need to pass authentication to your IpfsApi, here’s an example How to add data using ipfs-http-client
@Flaveeu while i am making project in the ipfs at that time it is asking for my card details . Is this true ?
I am also getting the same issue anyone
Hi muma, welcome! Have you reviewed this answer yet:
If so, please provide your code and error message?
Hello,
We are currently working on our Final Year Project-Dropbox clone using blockchain and ipfs.
We are facing an issue where we upload the file and without showing the hash value it is saying that the result is undefined.
Hoping for your response soon.
Thank You.
Code:
import DStorage from ‘…/abis/DStorage.json’
import React, { Component } from ‘react’;
import Navbar from ‘./Navbar’
import Main from ‘./Main’
import Web3 from ‘web3’;
import ‘./App.css’;
//Declare IPFS
import create from “ipfs-http-client”
async function ipfsClient() {
const ipfs = await create(
{
host: "https://dropstore.infura-ipfs.io",
port: 5001,
protocol: "https"
}
);
return ipfs;
}
const projectId = ‘2JX2tj4qGIN0cBMOnUZxOWX2GrT’;
const projectSecret = ‘b15e378d90583ae9d86edd8117f17326’;
const auth = ‘Basic’ + Buffer.from(projectId + “:” + projectSecret).toString(‘base64’);
class App extends Component {
async componentWillMount() { //lifecycle callback in react->when component gets added to dom/page,this function is going to run
await this.loadWeb3() //connects the app to the blockchain
await this.loadBlockchainData() //connects the web3 console
}
async loadWeb3() { //this code function connects the app to the blockchain
//Setting up Web3
if (window.ethereum){
window.web3 = new Web3(window.ethereum)
await window.ethereum.enable()
}
else if(window.web3){
window.web3 = new Web3(window.web3.currentProvider)
}
else {
window.alert('Non-Ethereum browser detected.You should consider trying MetaMask!')
}
}
async loadBlockchainData() {
const web3 = window.web3//Declare Web3
console.log(web3)
//Load account
const accounts = await web3.eth.getAccounts()
this.setState({ account:accounts[0] })
//Network ID
const networkId = await web3.eth.net.getId()
const networkData = DStorage.networks[networkId]
if(networkData){
//Assign contract
const dstorage = new web3.eth.Contract(DStorage.abi, networkData.address)
this.setState({dstorage})
//Get files amount
const filesCount = await dstorage.methods.fileCount().call()
this.setState({filesCount})
//Load files&sort by the newest
for (var i = filesCount; i>= 1; i--){
const file = await dstorage.methods.files(i).call()
this.setState({
files: [this.state.files, file]
})
console.log(this.state.files)
}
}else {
window.alert('DStorage contract not deployed to detected network.')
}
this.setState({loading: false})
//Else
//alert Error
this.setState({loading: false})
}
// Get file from user
captureFile = event => {
event.preventDefault()
const file = event.target.files[0]
const reader = new window.FileReader()
console.log(file)
reader.readAsArrayBuffer(file)
reader.onloadend = () => {
this.setState({
buffer: Buffer(reader.result),
type: file.type,
name: file.name
})
console.log('buffer', this.state.buffer)
}
this.setState({
type: file.type,
name: file.name
})
}
//Upload File
uploadFile = async () => {
console.log("Submitting file to ipfs...")
let ipfs = await ipfsClient();
console.log(this.state);
const result = await ipfs.add(this.state.name, (result, error) => {
console.log('ipfs result',result);
console.log("ipfs result", error);
})
}
constructor(props) {
super(props)
this.state = {
buffer:[],
account: '',
dstorage: null,
files: [],
loading: false,
type: null,
name: null
}
this.uploadFile = this.uploadFile.bind(this)
this.captureFile = this.captureFile.bind(this)
}
//Bind functions
//React->javascript library to build user interface.
render() {
return (
<div>
<Navbar account={this.state.account} />
{ this.state.loading
? <div id="loader" className="text-center mt-5"><p>Loading...</p></div>
: <Main
files={this.state.files}
captureFile={this.captureFile}
uploadFile={this.uploadFile}
/>
}
</div>
);
}
}
export default App;
Output:
