How to add data using ipfs-http-client

Support Tips
1

Hello :wave: all

If you’d like to test the ipfs-http-client Javascript library for adding a String, please follow the steps below.

Use the official ipfs-http-client for installing the library.

Prerequisites: Use your own Project ID and Project Secret.

const ipfsClient = require(‘ipfs-http-client’);
const projectId = ’23jSp...XXX;
const projectSecret = ‘23...XXX’;
const auth =
    ‘Basic ’ + Buffer.from(projectId + ‘:’ + projectSecret).toString(‘base64’);
const client = ipfsClient.create({
    host: ‘ipfs.infura.io’,
    port: 5001,
    protocol: ‘https’,
    headers: {
        authorization: auth,
    },
});
client.add(‘Hello World’).then((res) => {
    console.log(res);
});
3 Likes
3

Hello

In my case , im using Html and javascript(jQuery) so can not use ‘const ipfsClient = require(‘ipfs-http-client’);’

Could you tell me another way such as window.IpfsApi instead of ipfsClient.create "

Thank you.
please

1 Like
4

Hi @Mr_Tai, you have mentioned on other blood posts that you have resolved the issue.
Could you confirm and also share the results( if possible) with the rest of the community members, please?

1 Like
5

Hi @lovekosmas its been a while i did not touch a PC but i found a kinda “dirty” solution.
I mean if you still want to stay on a 100% browser js upload.
It comprises of 5 steps.
First include old 29 version of ipfs http client which comprise Buffer you will need for the authorization with the newest ipfs http client lib (currently 57)
then instantiate an old ipfs that will be used only for buffer
const ipfsOld = IpfsHttpClient(‘ipfs.infura.io’, 5001, {protocol: ‘https’})
then the idea is to initialize an authorization variable before a first form event listener
authorization = ‘Basic ’ + ipfsOld.Buffer.from(document.querySelector(’#projectId’).value.trim()+ ‘:’ + document.querySelector(’#projectSecret’).value.trim()).toString(‘base64’);
(the credentials are retrieve from a form and your site should obviously hosted over https)
to create the authorization headers you will inject in the second recent ipfs http lib.
you must include the most version of the lib after that part otherwise there are collision with ipfs object
then you can now do the (nodejs style) instantiation of the ipfs object that requires crendentials
const ipfs = window.IpfsHttpClient.create({ host: ‘ipfs.infura.io’, port: 5001, protocol: ‘https’, headers: {authorization} })
then the rest of your logic

hope it helps

1 Like
6

Getting this error

HTTPError: basic auth header is invalid

Some one please help @Flaveeu

1 Like
7

Try this →

const projectId = ‘your project id’;
const projectSecret = ‘your project secret’;
var buffer = window.buffer;
console.log(“buffer”, buffer)
const auth = 'Basic ’ + buffer.Buffer.from(projectId + ‘:’ + projectSecret).toString(‘base64’);

const ipfs = window.IpfsHttpClient.create({
host: ‘ipfs.infura.io’, port: 5001, protocol: ‘https’, headers: {
authorization: auth,
},
})

1 Like
8

Still getting error @LogeswaranA

Screenshot from 2022-09-06 18-52-32
Screenshot from 2022-09-06 18-52-321920×1080 198 KB

My code :



const projectId = '2EFZSrxXvWgXDpOsDrr4cQosKcl';
const ProjectSecret = '';


  var buffer = window.buffer;
  console.log("buffer", buffer)

  const auth = "Basic" + buffer.Buffer.from(projectId+":"+ProjectSecret).toString('base64')

  const client = IPFSHTTPClient({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    // apiPath:'/api/v0/',
    headers: {
        authorization: auth,
    }
});
  client.add("Hello World").then((res) => {

  console.log(res);
});
1 Like
10

Very sorry!, Just saw your response… Are you still facing this issue?

1 Like
11

GitHub - LogeswaranA/jquery-ipfs-sample: jquery-ipfs-sample try this

1 Like
12

Try adding a space between the Basic and the token:

  const auth = "Basic" + " " + buffer.Buffer.from ......
1 Like