Image Upload (UploadCare Widget) - Metadata JavaScript Integration

[ddg5565]

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:

<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:

 <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

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:

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

Any help would be greatly appreciated!

[Alexis]

Hi,

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

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

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

Then you have to add this javascript

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.

I hope it help you

[Quentin]

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

[Jean]

I can’t wait for this plugin!

[adammiko]

Hi Quentin,

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

[adammiko]

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

[adammiko]

Checking back in on this! Thank you