Skip to content

File uploader rendering empty select for omitted upload source, causing error in 3rd party script #751

@chipit24

Description

@chipit24

Describe the bug
In our Vue 3 app, we have the File Uploader configured with inline mode and using only local for the source list, e.g. (redacted):

<script setup lang="ts">
import * as UC from "@uploadcare/file-uploader";
import "@uploadcare/file-uploader/web/uc-file-uploader-inline.min.css";
/* ... */
if (!customElements.get("uc-file-uploader-inline")) {
  UC.defineComponents(UC);
}
/* ... */
</script>

<template>
<uc-config
  ctx-name="my-uploader"
  source-list="local"
  multiple
  confirm-upload
  remove-copyright
/>
<uc-file-uploader-inline
  ctx-name="my-uploader"
/>
<uc-upload-ctx-provider
  ctx-name="my-uploader"
/>
</template>

Despite this, I still see the components for various sources being rendered:

Screenshot 2024-10-17 at 9 08 36 AM

This is usually not a problem, but we recently added Reddit Pixel tracking to our app, and it triggers this code on the empty <select></select> rendered by the CameraSource element:

return isInput(el) ? el.value : isSelect(el) ? el.options[el.selectedIndex].text : el.textContent || ""
Screenshot 2024-10-17 at 9 10 59 AM

Which results in an error constantly being logged to the console:

Screenshot 2024-10-17 at 9 12 09 AM

This does feel a bit contrived, but I can see this potentially causing issues with other tooling / reporting (especially related to a11y). Ideally, the folks at Reddit fix their tracking script, but I'm posting here as well in case there's also a nice solution to clean things up here.

To Reproduce
Steps to reproduce the behavior:

See above ☝️

Expected behavior
I expect elements that I omit from the source list to not be rendered, or at least to not render any content (like the empty select for the camera source). I am able to get around this by replacing the element with an empty one, though:

UC.defineComponents({ ...UC, CameraSource: defineCustomElement({}) });

Screenshots
See above ☝️

Desktop (please complete the following information):

  • OS: macOS Sonoma (14.5)
  • Browser Chrome
  • Version 129

Smartphone (please complete the following information):

N/A

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions