# \[to be continued\] How do I send a Blob from JS frontend to Motoko backend?

**URL:** <https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498>\
**Category:** Developers\
**Tags:** Frontend\
**Created:** [January 26, 2022, 10:29am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498 "2022-01-26T10:29:18Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [January 26, 2022, 10:29am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/1 "2022-01-26T10:29:18Z")

</div>

[How do I send a Blob from JS frontend to Motoko backend?](https://forum.dfinity.org/t/how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/9148) was not settled for me.So I want to continue.

I use [ext-token: erc721.mo](https://github.com/Toniq-Labs/extendable-token/blob/main/examples/erc721.mo), but error.  
My thought for this error is directly `metadata` type because there is

```auto
if (!t.covariant(x)) {throw new Error.....} //at Module.encode (index.js:4522:75)

```

I have tried way that match Blob type in motoko in [link](https://forum.dfinity.org/t/how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/9148) like a using `new Unit8Array`.  
But may be different points. I don’t know… I want to do without this error!!

```auto
index.js:4524 Uncaught (in promise) Error: Invalid record {to:variant {principal:principal; address:text}; metadata:opt vec nat8} argument: {"to":{"principal":{"_arr":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":1,"8":1,"9":1},"_isPrincipal":true},"address":"test"},"metadeta":[97,98,99,100]} //metadata is changed from string of "abcd" in input form
    at index.js:4524:19
    at index.js:3435:29
    at Array.map (<anonymous>)
    at zipWith (index.js:3435:15)
    at Module.encode (index.js:4522:75)
    at caller (index.js:199:74)
    at CanisterActor.handler [as mintNFT] (index.js:221:34)
    at HTMLButtonElement.<anonymous> (index.js:17799:99)

```

My front-end code(index.js)

```auto
import { dfinity_nft_ext } from "../../declarations/dfinity_nft_ext";
document.getElementById("mintNftBtn").addEventListener("click", async () => {

  const nft = document.getElementById("nft").value.toString();
  const blob = new Blob([nft], {type: 'text/html'});
  const arrayBuffer = [...new Uint8Array(await blob.arrayBuffer())];
  const minter = await dfinity_nft_ext.getMinter();
  console.log("miner::::"+minter);
  const mintReq = {
    to: { principal: minter, address: "test" }, //minter is owner of mint, address is properness
    metadeta: arrayBuffer
  };
  const minted = await dfinity_nft_ext.mintNFT(mintReq); // mint
  console.log("minted::::"+minted); //Maybe return minted number
});

```

---

<div class="post-metadata">

**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\
**Post date:** [January 26, 2022, 3:43pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/2 "2022-01-26T15:43:53Z")

</div>

> [@ueyamamasashi](#):
>
> ` to: { principal: minter, address: "test" },`

I don’t think this is right. to is variant, which means it should be either principal or address, can’t be both.  
so you might to try:

to: { principal: minter},

---

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [January 26, 2022, 11:13pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/3 "2022-01-26T23:13:55Z")

</div>

Thank you for reply.  
Unfortunally, come up next error.

```auto
Uncaught (in promise) Error: Record is missing key "metadata".

```

My thought is deleting `address` in `to` key cause Object style’s wrong, or `metadata` key lost something happen.

It would be very helpful if you could let me know.Tnank you in advance.

`mintNFT` argument ‘MintRequest’ is here.

```auto
public type MintRequest = {
    to : ExtCore.User;
    metadata : ?Blob;
  };

```

`ExtCore.User` is

```auto
public type User = {
    #address : AccountIdentifier; //No notification
    #principal : Principal; //defaults to sub account 0
  };

```

---

<div class="post-metadata">

**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\
**Post date:** [January 27, 2022, 1:30am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/4 "2022-01-27T01:30:26Z")

</div>

> [@ueyamamasashi](#):
>
> ```auto
> const mintReq = {
> to: { principal: minter, address: "test" }, //minter is owner of mint, address is properness
> metadeta: arrayBuffer
> };
> 
> ```

I guess it’s typo 😀 metadata , not metad **e** ta

---

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [January 27, 2022, 10:29am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/5 "2022-01-27T10:29:58Z")

</div>

Oh, that is shame! 😃

Unfortunally, an error at first came back after changing typo.I don’t want to take your time.But,I want to know why.I will write article in Japanese if I can get through.So I need to help.At first, what I did is for an error of `Error: Invalid record`

**change principal type**  
Variant `minter` have two “\_arr” and “\_isPrincipal” in Object, so chaged `minter` to “rrkah-fqaaa-aaaaa-aaaaq-cai” hard code.  
**Result**  
doesnt change, same error.  
**confirmation**  
`metadate type` is Blob in backend. _Corresponding JavaScript values =\> [1, 2, 3, 4, …]_ in [Type Blob in Document](https://smartcontracts.org/docs/candid-guide/candid-types.html).  
`metadate` type seems OK as long as I see front-end’s input value.

Then, what point is it in this error of `covariant(x) {throw new Error}`?Covariant means “match” simply saying?  
My thought is front-end type doesn’t match back-end’s. But,I feel this is clear.What should I check next?  
Thank you in advance.

---

<div class="post-metadata">

**Author:** ![paulyoung](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/paulyoung/32/5251_2.png) [@paulyoung](https://forum.dfinity.org/u/paulyoung)\
**Post date:** [January 27, 2022, 2:05pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/6 "2022-01-27T14:05:38Z")

</div>

はじめまして、@ueyamamasashi さん。

Please forgive me if my greeting is incorrect. This is my first time trying to use Japanese in an online context.

The `covariant` error suggests that you are providing a value of the wrong type somewhere.

> <https://github.com/dfinity/agent-js/blob/2fe3dd99cddfcf45c6d9d5b7a199a86285ce9740/packages/candid/src/idl.ts#L194-L198>

Please could you share your updated code with the typos fixed, and the latest error along with the stack trace?

---

<div class="post-metadata">

**Author:** ![bytesun](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/bytesun/32/2682_2.png) [@bytesun](https://forum.dfinity.org/u/bytesun)\
**Post date:** [January 27, 2022, 2:36pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/7 "2022-01-27T14:36:16Z")

</div>

If you want hardcore, need wrap it to Principal type : Principal.fromText(“rrkah-fqaaa-aaaaa-aaaaq-cai”)

and it looks like this is a canister id, not sure if there is a validate for it, so you might use a real “user” principal for test first.

---

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [January 28, 2022, 6:26am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/8 "2022-01-28T06:26:30Z")

</div>

Thank you for your kindness.It is very helpful for beginner like me.  
But, hurdle is very high as you say that **wrap to Principal type**.I tried, but I feel I shouldn’t do that.  
Yes, this is `canister id`. I confuse principal id and canister id because both of types is same Principal.I try hard to learn more.  
I keep going forward I will close this question.  
Thank you again!!

---

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [January 28, 2022, 6:37am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/9 "2022-01-28T06:37:56Z")

</div>

はじめまして 😇 yes, correct!

Thank you for reply. I am so glad to get reply, you and your team are so kind. I am one of Japanese Dfinity team.We will make open source code for NFT etc. But, my skill is not enough for this.  
This time, my error is coming from wrong type as you teach me, but I don’t know where I bring principal id from.  
Here is stack trace. I don’t know well so I put images not only concole but source.  
**console** (chrome validation)

 ![ScShot 2022-01-28 15.50.38](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/2/23fc2349cc68806e5ec679cb0f52fb35722704e5.png)  
\*\* source\*\*(chrome validation)  
 ![ScShot 2022-01-28 15.53.02](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/c/c444ca2cdb64d8339277c279c8008f66857ffa16.png)  
**my code** (index.js)

```auto
const mintReq = {
    to: {
      principal: "iuj24-a5hic-jrod4-5oq3e-artpl-6khow-3sly6-4nonf-d2pjr-emp2g-kqe" }, 
      metadata: arrayBuffer
  };
  const minted = await dfinity_nft_ext.mintNFT(mintReq); // mint

```

`Principal Id` is result of command `dfx identity get-principal`(I think type is matched)

---

<div class="post-metadata">

**Author:** ![paulyoung](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/paulyoung/32/5251_2.png) [@paulyoung](https://forum.dfinity.org/u/paulyoung)\
**Post date:** [January 28, 2022, 7:17am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/10 "2022-01-28T07:17:12Z")

</div>

Please give this a try:

```auto
const mintReq = {
  to: {
    principal: Principal.fromText("iuj24-a5hic-jrod4-5oq3e-artpl-6khow-3sly6-4nonf-d2pjr-emp2g-kqe")
  },
  metadata: arrayBuffer
};
const minted = await dfinity_nft_ext.mintNFT(mintReq); // mint
```

---

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [January 28, 2022, 12:55pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/11 "2022-01-28T12:55:02Z")

</div>

> [@paulyoung](#):
>
> `Principal.fromText("iuj24-a5hic-jrod4-5oq3e-artpl-6khow-3sly6-4nonf-d2pjr-emp2g-kqe")`

Thank you very much. But I got `not a function` error.

 ![ScShot 2022-01-28 21.43.58](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/6/60f89e20a8a2a69af270c42d8f91411e89da1d48.png)

No typo this time. → did manytime  
Made sure `Principal.fromText` is function. → func fromText(t : Text) : [Principal](https://smartcontracts.org/docs/base-libraries/Principal.html#type.Principal)

Did I make sure module of “@dfinity/candid/lib/cjs/idl”, didn’t I?

What should I do next?

---

<div class="post-metadata">

**Author:** ![ClankPan](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@ClankPan](https://forum.dfinity.org/u/ClankPan)\
**Post date:** [January 28, 2022, 1:42pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/12 "2022-01-28T13:42:47Z")

</div>

metadata needs optional type.

> <https://github.com/Toniq-Labs/extendable-token/blob/main/motoko/ext/NonFungible.mo#L9>

---

<div class="post-metadata">

**Author:** ![coin\_master](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/coin_master/32/15963_2.png) [@coin\_master](https://forum.dfinity.org/u/coin_master)\
**Post date:** [January 28, 2022, 3:51pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/13 "2022-01-28T15:51:11Z")

</div>

I think you need to import from `@dfinity/principal`

---

<div class="post-metadata">

**Author:** ![MCLYang](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/mclyang/32/3447_2.png) [@MCLYang](https://forum.dfinity.org/u/MCLYang)\
**Post date:** [June 11, 2022, 8:01am UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/14 "2022-06-11T08:01:02Z")

</div>

Still does not work here is my code

```auto
let mintNFT = async (_minter, _metadata) => {
  const mintReq = {
    to: { principal: _minter },
    metadata: _metadata,
  };
  res = await actor.mintNFT(mintReq).catch((e) => {
    return "Error" + e;
  });
  return res;
};

let text = "asdcxzvuioashnuid";
let arr = [...new Uint8Array(Buffer.from(text, "utf-8"))];
mintNFT(Principal.fromText("2vxsx-fae"), arr).then((res) => {
  console.log(res);
});

```

the error result is like  
`ErrorError: Invalid record {to:variant {principal:principal; address:text}; metadata:opt vec nat8} argument: {"to":{"principal":{"_arr":{"0":4},"_isPrincipal":true}},"metadata":[97,115,100,99,120,122,118,117,105,111,97,115,104,110,117,105,100]}`

btw this works

```auto
  const mintReq = {
    to: { principal: _minter },
    metadata: [],
  };

```

So I guess is the problem of nat8?

---

<div class="post-metadata">

**Author:** ![MCLYang](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/mclyang/32/3447_2.png) [@MCLYang](https://forum.dfinity.org/u/MCLYang)\
**Post date:** [June 11, 2022, 4:37pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/15 "2022-06-11T16:37:25Z")

</div>

Problem resolved. Since the require ?Blob rather than Blob. the metadata should be `metadata: [[...new Uint8Array(Buffer.from("asdcxzvuioashnuid", "utf-8"))]]`

> **[Candid Reference | Internet Computer Home](https://internetcomputer.org/docs/current/references/candid-ref/#type-opt)**
>
> This document provides detailed reference information about Candid supported types and links to the Candid specification and documentation for the Candid Rust crate.

```auto
Type opt t

Corresponding JavaScript values
null translates to [].

opt 8 translates to [8].

opt opt "test" translates to [["test"]].

```

---

<div class="post-metadata">

**Author:** ![ueyamamasashi](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/ueyamamasashi/32/2575_2.png) [@ueyamamasashi](https://forum.dfinity.org/u/ueyamamasashi)\
**Post date:** [June 11, 2022, 10:59pm UTC](https://forum.dfinity.org/t/to-be-continued-how-do-i-send-a-blob-from-js-frontend-to-motoko-backend/10498/16 "2022-06-11T22:59:40Z")

</div>

> [@MCLYang](#):
>
> [Candid reference | Internet Computer](https://internetcomputer.org/docs/current/references/candid-ref/#type-opt)

I was stuck with it, unable to resolve it.  
Thanks. 🙏