Uploading an NFT Metadata(image) through an image link

Question

I wanted to ask If for example I have an image link(imgur.com etc) and I wish to use that as the Metadata for my NFT. Would that be possible?

I tried doing that:

 const metaplex = Metaplex.make(connection)
   .use(keypairIdentity(user))
   .use(
     bundlrStorage({
       address: "https://devnet.bundlr.network",
       providerUrl: "https://api.devnet.solana.com",
       timeout: 60000,
     })
   )
   

const request = require('request');
let file: any;

 const sharp = require('sharp');
 const fs = require('fs');

 console.log("reached here")

 const imageUrl = 'https://imgur.com/gallery/vQk9HuN';
 
 fs.readFile(imageUrl, (err: Error | null, data: Buffer | ArrayBuffer | SharedArrayBuffer) => {~
   console.log("2nd destination")
   if (err) {
     // handle the error
   } else {
     // Convert the data into a buffer
     const buffer = Buffer.from(data);
 
     // Convert the buffer into a Metaplex file
     const file = toMetaplexFile(buffer, "image.png");
   }
   console.log(data)
 });

  // Wait for the file to be assigned a value
 await new Promise((resolve) => {
   const checkFile = setInterval(() => {
     if (file) {
       clearInterval(checkFile);
       resolve(file);
     }
   }, 1);
 }); 

 // Use the file variable here
 const imageUri = await metaplex.storage().upload(file)
 console.log("image uri:", imageUri)

When I do not "await new Promise" I get this error: TypeError: Cannot read properties of undefined (reading 'buffer') at reduce (/home/harry_smith/bld/[name]/node_modules/@metaplex-foundation/js/src/plugins/storageModule/MetaplexFile.ts:77:42) at Array.reduce () at Object.getBytesFromMetaplexFiles (/home/harry_smith/bld/[name]/node_modules/@metaplex-foundation/js/src/plugins/storageModule/MetaplexFile.ts:77:9) at BundlrStorageDriver.uploadAll (/home/harry_smith/bld/[name]/node_modules/@metaplex-foundation/js/src/plugins/bundlrStorage/BundlrStorageDriver.ts:109:7) at processTicksAndRejections (node:internal/process/task_queues:95:5) at async BundlrStorageDriver.upload (/home/harry_smith/bld/[name]/node_modules/@metaplex-foundation/js/src/plugins/bundlrStorage/BundlrStorageDriver.ts:101:19)

however, when I use it then my terminal is just stuck. it does not show any error but it does not move forward either after console logging my public key and balance. Is it possible to do what I am trying to do? @Metaplex devs.

Answer 1

So, you are doing a couple of things wrong, but it is possible to solve them.

1. Fs(filesystem) is not meant to get any files from the internet, it reads from local storage (assuming u're running it on ur own computer -> reads files from ur computer). So fs.readFile callback should throw an error in ur case, which u may see if u just add console.log(err) instead of // handle error.
2. You declare file at the very beggining of ur code snippet, let file: any;. And you do not assign any value to file. Even if u didn't have any error thrown by fs, u declare new file, const file = toMetaplexFile(buffer, "image.png"); in ur callback, so, basically, u're creating a new constant, which is accessible only within ur callback, instead of assigning the value to ur global file. Due to that, ur terminal doesn't close - checkFile interval is not cleared anywhere, since code after if (file) won't run (file is undefined).
3. Your link is not pointing to the image itself, but to the page, which has image somewhere. Unless u want to parse imgur, u need to provide direct link to the image, in ur case - https://i.imgur.com/SidjgAe.png.

Either way, ur goal is achievable. You will need some package to send http requests. Such as 'request' or 'axios' or whatever (default node modules http and https will also work, u will just need to combine all chunks of data into one buffer). Once u have it, u just need to send get request to the link of an image. Make sure u set no encoding. U will receive the buffer of image u want. Once u have buffer, u may easily make a MetaplexFile. So quick example with request:

import { get } from 'request'

let file: MetaplexFile = await new Promise(resolve => {
  get(imageUrl, { encoding: null }, (_error, _response, body) => {
    resolve(toMetaplexFile(body, 'image.png'))
  })
})

const imageUri = await metaplex.storage().upload(file)