Determine which Dashbard had Taken a Picture

Uppy
1

Hi,

I use Uppy in shared context in my svelte app. I have multiple Dahsboards and depending on what dashboard was used to upload the file I add different meta data:

This code works well for files that are added from the PC. But when the Webcam is used the source is Webcam and therefore the Meta-Data is not added.

The best would be to have a event on the dashboard instead of the uppy instance, so the event wouldn’t be called for each dashboard and I would not have to filter for the dashboard id.

Or is there something else that could help me to get custom metadata depending on the Dashboard instance?

<script>
import { Dashboard } from '@uppy/svelte';
const {addFiles, uppy} = getContext('uppyContext');

function handleFileAdded(file) {
  if (file.source !== uppyDashID) return;
  file.data.meta = metaCrc;
}
</script>

<Dashboard uppy={uppy} plugins={["Webcam"]} props={{ 
    id:uppyDashID 
}} />
2

Hi! I’m not sure I follow, you can’t use multiple dashboards on one Uppy instance, and if you use one instance per dashboard, then you can orchestrate yourself which instance you get the meta data from?

3

Hi, thank you for your reply.

I tried to recreate a repl, but got other errors on stackblitz and svelte repl.

So here is a REPL, that is not running but it demonstrates how I structured my code to have multiple Dashboards: Uppy Test • REPL • Svelte

If I add a file per drag and drop to one Dashboard the file-added event is fired twice, one for each “uppyDashID” in the file source data. The Dashboards are not separated, they of course show a complete list of all files independent of what Dashboard was used to add the file.

My issue is, that I only know what dashboard was used when the file is added from the computer. When it is captured from the Webcam I always get the same value in file.source:

  • Drag and drop: file.source = Dashboard ID where the file was dragged
  • Select file trough explorer: file.source = Dashboard ID where that was used
  • Capture Webcam: file.source = ‘Webcam’

Everything else is working perfectly as intended.

4

I created a repo on github that can be started in stackblitz: StackBlitz

The repo contains the following files in /src to reproduce my issue:

  • lib/Uppy.svelte: Creates a Uppy instance and shares it in the context
  • lib/Dashboard.svelte: Creates a Dashboard using the shared Uppy from context and adds an event listener to set the Meta Data as desired.
  • routes/+page.svelte: Places two different Dashboard with ang giving each a different meta prop that should be applied to the added files.
  • routes/+layout.svelte: Wraps the Uppy-Core around the content of each page, so I can use the svelte-context functions (otherwise it would require to use a svelte store to share the Uppy instance, but would also work)

I will myself solve this by not creating multiple event listeners, but use one event listener in Uppy.svelte, that checks a store for what the current meta data should be. The Dashboard.svelte could then update this store when it gets focus/click events. That should work and might also be a better approach.

My first intend was that there might be ‘file-added’ events directly on my Dashboard so I could do something like:

function handleFileAdded(file) {
  file.data.meta = meta;
}

<Dashboard 
    on:file-added={handleFileAdded}
    uppy={uppy} 
    plugins={["Webcam"]} 
    props={{id:uppyDashID}} 
/>

Edit: Stackblitz does not allow using the Camera. So here is a Screenshoot, where I added one file to Dashboard A, one to Dashboard B and Captured a Image using the Webcam. The first two files have the metadata of the Dashboard applied.

Screenshot 2023-11-28 015542_
Screenshot 2023-11-28 015542_1244×1133 92.3 KB

5

If I understand correctly, you are still using only one Uppy instance through context for multiple dashboards. Uppy is designed to have one UI component per instance, so you generally want to create multiple instances to avoid state duplication and other unintended side effects.

Does that make sense?