Using NFT.Storage JavaScript Module

WEB TMS WEB Core
1

Hi,

I'm trying to use a different library for uploading images to IPFS see https://nft.storage/. All of the information about this seems to be using NPM.

I have tried the following:

<script type="module">
   import { NFTStorage } from "https://cdn.jsdelivr.net/npm/nft.storage@7.0.0/dist/bundle.esm.min.js";
</script>

But when I then use:

const storage = new NFTStorage({"token": APItoken });

I get the console error "NFTStorage is not defined".

Any help would be greatly appreciated.

Thanks,

Ken

2

I see already an error thrown on the bundle.esm.min.js lib:

Uncaught SyntaxError: Unexpected token 'export'

so, the browser has an issue with the code in this js lib.
Are you sure this is for browser usage and not for node.js usage?

3

If I put the following in index.html after </body>

  <script type="module">
    import { NFTStorage } from "https://cdn.jsdelivr.net/npm/nft.storage/dist/bundle.esm.min.js";
    const store = new NFTStorage({ token: "MY API KEY" });
    console.log(store);
  </script>

the class is found. So my question is how can I then use the class NFTStorage in javascript in a form?

4

Have you tried to access store from an ASM block in the form's code?

5

I don't want to include this code there, it was just an example. This works but is not very elegant:

 <script type="module">
    import { NFTStorage } from "https://cdn.jsdelivr.net/npm/nft.storage/dist/bundle.esm.min.js";
    window.myNFTStorage = NFTStorage;
  </script>

and then where I want to use it i use:

const storage = new window.myNFTStorage({ token: APItoken });
6

I do not know this particular library and as such, I'm not an expert in how to use this NFTStorage lib.
Assisting with this can be offered as custom consulting service.

7

Thanks. Using it is not a problem as I have quite a lot of experience regarding NFT's. My problem was just how to make it usable in Web Core which I seem to have managed but not very elegantly!