Issue converting from ES6 module

Question

i've did the following script which allows me to upload an image on NFT.Storage ipfs server and retrieves the img url.

import { NFTStorage, File } from "nft.storage"
import { mime } from "mime"
import { fs } from "fs"
import { path } from "path"
import { fetch } from "node-fetch"

  async function storeNFT(imagePath, name, description) { 
     const image = await fileFromPath(imagePath)
     const NFT_STORAGE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDk5ZmJBOWU3ZTg3RjlENUExZDA3QTJDQTlmNDE4ODNBMGYwNzkyRjgiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY4MDQyNDg5MDI0MiwibmFtZSI6IkF1cm9uQ3JvdyJ9.t7oqb2D9kMYRV1wDJrIiSRNtmyTioqTeNyEjSpfDJvw'
     const nftstorage = new NFTStorage({ token: NFT_STORAGE_KEY })
     return nftstorage.store({
       image,
       name,
       description,
     })
 }

  async function fileFromPath(filePath) {
     const content = await fs.promises.readFile(filePath)
     const type = mime.getType(filePath)
     return new File([content], path.basename(filePath), { type })
   }

     async function getImgUrl(imagePath, name, description) {
        const result = await storeNFT(imagePath, name, description)
        let myUrl = "https://ipfs.io/ipfs/" + result.url.slice(7,80)
        console.log(myUrl)
        let settings = { method: "Get" };
        fetch(myUrl, settings)
        .then(res => res.json())
        .then((json) => {
         console.log(json.image)
         let newUrl = "https://ipfs.io/ipfs/" + json.image.slice(7,80)
         console.log(newUrl)
         })

      }

If i run the code using command line, the Upload actually succedes and i get the result i'm looking for, the Image Url, however, i need this to be working on browser side, so i've tried to use browserify and esmify using the following command

       browserify index.js -p esmify > bundle.js

But, i'm getting dependencies errors as follows

Can't walk dependency graph: Cannot find module 'ipfs-car/blockstore/fs' from 'node_modules\nft.storage\dist\src\lib.cjs' required by C:\Users\a.marica\Desktop\PersonalWork\Fiverr\Solidity\NFT_Marketplace_Prototype\NFT_Storage_Api\node_modules\nft.storage\dist\src\lib.cjs

I'm not getting why is it able to get all the dependencies and work correctly if launched from command line, but not when launched through browserify in order to convert it to normal js

score 2 · Answer 1 · answered Apr 02 '23 at 14:08

2

 const content = await fs.promises.readFile(filePath)

Browsers provide no APIs to read files from a file path (they provide <input type="file"> and FileReader to read files users have selected).

There's no way for browserify or anything like it to polyfill this.

answered Apr 02 '23 at 14:08

Quentin

914,110
126
1,211
1,335

But, assuming i have smth like what would be in the end my file path? Can i just use the file name i get by doing console.log(fileList) and use it as path? – Apr 02 '23 at 16:00
"what would be in the end my file path" — You can't read the file path from the file input. If you could, there wouldn't be an API you can pass it to which could read a file from. The `FileReader` API mentioned in the answer can be used to read the file. – Quentin Apr 02 '23 at 16:23

Issue converting from ES6 module

1 Answers1