# Image Upload (UploadCare Widget) - Metadata JavaScript Integration

**URL:** <https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059>\
**Category:** Ask us anything\
**Created:** [June 14, 2023, 4:44pm UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059 "2023-06-14T16:44:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ddg5565](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@ddg5565](https://community.weweb.io/u/ddg5565)\
**Post date:** [June 14, 2023, 4:44pm UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/1 "2023-06-14T16:44:37Z")

</div>

Hi WeWeb community!

Looking for some tips on how to integrate user meta data into my already-created uploadcare widget. The file uploader widget was implemented on the front end using the “HTML Embed” element in which I placed both the Javascript for the upload widget, along with the HTML. I also then included external CSS in the page custom code “head” tag.

**Custom code in the HTML Embed element:**

```auto
<script type="module">
    import * as LR from "https://esm.sh/@uploadcare/blocks@0.22.9/web/file-uploader-regular.min.js";

    LR.registerBlocks(LR);

</script>

<lr-file-uploader-regular
    css-src="https://esm.sh/@uploadcare/blocks@0.22.9/web/file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-config"
>

</lr-file-uploader-regular>

```

**Page-level custom code in the “head” area:**

```auto
 <style>
.my-config {
  --cfg-pubkey: "292573fe2bf64edd45a9";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 2147483648;
  --cfg-use-cloud-image-editor: 0;
  --cfg-source-list: "local, url, dropbox, gdrive";
  --cfg-remove-copyright: 1;
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
}
</style>

```

I’m trying to integrate the code shown here to include metadata when images are uploaded, but I have no idea how to do so because I want to include the User ID (of the user logged into weweb). It’s clear that it can be done using JS, but I can’t figure out how:

> **[File Uploader API](https://uploadcare.com/docs/file-uploader/api/#context-provider)**
>
> Manage the File Uploader via the API. Learn how to set metadata for uploaded files and use the context provider.

Here’s what I have so far:

Widget looks good and functionally works to upload images. But I cannot figure out how to include metadata upon uploading:

 ![Screen Shot 2023-06-14 at 11.40.30 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b33047a2df4c02b5177bb95f1f5db738458be8c4.jpeg)

 ![Screen Shot 2023-06-14 at 11.40.44 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2d898e3cea985a1d6f754cd4d7d4e3914d016faa.jpeg)

 ![Screen Shot 2023-06-14 at 11.41.19 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/78e3e9cf33421e9385dd7522177caa451fb4b64b.jpeg)

 ![Screen Shot 2023-06-14 at 11.41.44 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/23cdfd55527ddd61ebe93d84529a688071a3e3b8.jpeg)

No metadata included (this is what i need help with):

 ![Screen Shot 2023-06-14 at 11.41.56 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8c118dd34dfb6b9ad3057ccabc7e11835af9f2da.jpeg)

Any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [June 20, 2023, 9:06am UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/2 "2023-06-20T09:06:49Z")

</div>

Hi,

From the official documentation it seem what you need is here [https://uploadcare.com/docs/file-uploader/api/#context-provider](https://uploadcare.com/docs/file-uploader/api/#context-provider)

So first you have to add this html element inside your uploader element

```auto
<lr-upload-ctx-provider ctx-name='my-uploader' id="uploaderctx"></lr-upload-ctx-provider>

```

Then you have to add this javascript

```auto
const uploaderCtx = document.querySelector('#uploaderctx');
uploaderCtx.setUploadMetadata({ foo: 'bar' });

```

I dont know if the javascript part can be called right after the import, maybe the module need some time to be mounted in the page so the methods can be used. But you can give it a try.

Also, I’m not sure if this import method will work on the published app, I see mention of several constraint we may not meet for now, you could have to implement [the alternative method](https://uploadcare.com/docs/file-uploader/installation/#dynamic-script-connection).

I hope it help you 🙂

---

<div class="post-metadata">

**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\
**Post date:** [June 20, 2023, 3:24pm UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/3 "2023-06-20T15:24:00Z")

</div>

In addition to what @Alexis said, I’ll add that Uploadcare is definitely in our list of future native plugins. I’ll ping you when we plan on releasing it 😉

---

<div class="post-metadata">

**Author:** ![Jean](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jean/32/4106_2.png) [@Jean](https://community.weweb.io/u/Jean)\
**Post date:** [July 4, 2023, 4:51pm UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/4 "2023-07-04T16:51:06Z")

</div>

I can’t wait for this plugin!

---

<div class="post-metadata">

**Author:** ![adammiko](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@adammiko](https://community.weweb.io/u/adammiko)\
**Post date:** [July 11, 2023, 3:52pm UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/5 "2023-07-11T15:52:26Z")

</div>

Hi Quentin,

Keen on learning when this will be integrated! Is there an expected release date?

---

<div class="post-metadata">

**Author:** ![adammiko](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@adammiko](https://community.weweb.io/u/adammiko)\
**Post date:** [August 29, 2023, 6:22am UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/6 "2023-08-29T06:22:30Z")

</div>

Hi Quentin! Checking back in on this plugin’s release date. Thank you!

---

<div class="post-metadata">

**Author:** ![adammiko](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@adammiko](https://community.weweb.io/u/adammiko)\
**Post date:** [January 30, 2024, 5:48am UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/7 "2024-01-30T05:48:43Z")

</div>

Checking back in on this! Thank you 🙂

---

<div class="post-metadata">

**Author:** ![bigduck](https://avatars.discourse-cdn.com/v4/letter/b/f475e1/32.png) [@bigduck](https://community.weweb.io/u/bigduck)\
**Post date:** [November 12, 2025, 8:02pm UTC](https://community.weweb.io/t/image-upload-uploadcare-widget-metadata-javascript-integration/3059/8 "2025-11-12T20:02:26Z")

</div>

Need a guide on how you embedded that so flawlessly