Uploading dall e image url to ipfs

[ddboy19912]

Good day Everyone, I’ve been trying to upload a url to IPFS to no avail for a while now. This url is an imageUrl generated using openai’s DALL E API. I’ve tried different docs and other services before using Infura but I’ve had no luck running into CORS errors with the generated url.

Joining infura and utilising this guide How to add internet content from a URL using ipfs-http-client I was able to finally pass the url to IPFS using this code:

const projectId = PROJECT_ID;
const projectSecret = PROJECT_SECRET;

export async function addUrl(url) {
 

  const auth =
    'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');

  const client = create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
      authorization: auth,
    },
  });

  const file = await client.add(url);
  console.log(file);
}

The only issue with this method is I cannot retrieve the url back and get this instead which now contains the image url :

Please I am grave need of help and guidance and suggestion to handle this problem. Thank you in advance

[chris.paterson]

Wellcome @ddboy19912,

the ipfs.add method is extraordinarily flexible, it can accept any of these types:
Uint8Array | Blob | String | Iterable<Uint8Array> | Iterable<number> | AsyncIterable<Uint8Array> | ReadableStream<Uint8Array>
(See: js-ipfs/FILES.md at master · ipfs/js-ipfs · GitHub)

You are passing a string to it and it’s the contents of the string that are uploaded to IPFS, not the content the URL is pointing to.

You might find this works:
js-ipfs/FILES.md at master · ipfs/js-ipfs · GitHub

Please let us know how you go.

[radu]

Hey @ddboy19912 , you’ll need to pass the url string using the urlSource parameter in the add method, as shown in the guide you were mentioning.

Something like the below:
client.add(urlSource(‘url_string’))

Let us know how it goes.
Cheers.

[ddboy19912]

Thank you so much for the reponse. Using the code provided it works perfectly as:

export async function addUrl() {
  const auth =
    'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');

  const client = create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
      authorization: auth,
    },
  });

  const file = await client.add(
    urlSource(
      'https://ipfs.io/ipfs/QmTCparuvt3dub5U3uFocjrqXbGhKoYZmT5Kf6y9tjzhR9?filename=lime_cay.jpg'
    )
  );
  console.log(file);
}

But when I simply change the url to the one generated by DALL E API as:

export async function addUrl() {
  const auth =
    'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');

  const client = create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
      authorization: auth,
    },
  });

  const file = await client.add(
    urlSource(
      'https://oaidalleapiprodscus.blob.core.windows.net/private/org-HcwWmDqfyUlhbfwocCNeMZzV/user-dMoGGnTZBoVgQ3i2Czt2LUy3/img-eeiz5gQJW5uZtuVBnrJdpWry.png?st=2023-03-02T11%3A29%3A32Z&se=2023-03-02T13%3A29%3A32Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-03-02T05%3A38%3A12Z&ske=2023-03-03T05%3A38%3A12Z&sks=b&skv=2021-08-06&sig=uKZjmPqZmadPmCcDT/12b5uz/OSuci7MDIIOKU74PjI%3D'
    )
  );
  console.log(file);
}

I get a failed to fetch error and issue with cors. Which has been the pressing issue.

[ddboy19912]

Thanks a lot. I was able to use the info you gave. I returned the data as b64_json and converted that to a blob before passing it to the ipfs.add method and it works perfectly. Thanks again