Please HELP: Cannot figure out Variable name for Uppy plugin

I’m using the Uppy Pro (paid) plugin and I’m trying to run the following Javascript action in a workflow but I’m getting the error at the bottom of this post.

If the ‘uppy’ variable is wrong and it should be named something else …how do I figure that out? What should it be?

uppy.on('file-added', (file) => {
  uppy.getFileInfo(file.id).then((fileInfo) => {
    if (fileInfo.type.startsWith('video/')) {
      const video = document.createElement('video');
      video.addEventListener('loadedmetadata', () => {
        const duration = video.duration;
        console.log(`Video duration: ${duration}`);
      });
      video.src = URL.createObjectURL(file.data);
    }
  });
});

ERROR:

Uncaught ReferenceError: **uppy is not defined**
at eval (eval at <anonymous> (Toolbox-action--Run-javascript-.js:1:1), <anonymous>:1:1)
at eval (Toolbox-action--Run-javascript-.js:3:46)

Unfortunately the plugin author hasn’t be active for a while and there’s no email to contact them.

(Goal of the javascript is to get the file duration when it’s selected client-side)

any thoughts @prabhjot?

If this plugin is paid. We have nothing to do, because its source code is closed

Is it not possible to look at the files by using Chrome Dev Tools > Sources and then locating the JS file?

I don’t know JavaScript otherwise I’d attempt to trying and figure out what the variable is.

Any other ways to approach the end goal I’m trying to solve? Thank you

Can you share the website’s link with me so I can see where Uppy’s library is stored? It seems like the browser is unable to upload or locate the plugin library.

If the plugin loads the uppy library and you expect it to be there, what this error implies is that you’re executing this script before the library is loaded.

You’re probably executing this code on the “page is loaded” event, yes? Don’t do that.

Wait for the plugin’s Initialized event (or equivalent) and then execute this script.

If the plugin you’re using doesn’t have such an event, use something else. (@jonah.deleseleuc’s implementation of uppy is likely the best one available).

1 Like

Hey @Eugene_West - appreciate you taking a look. I’ve setup a test here:

Preview:
https://nutriso.co/version-test/bubble-forum?debug_mode=true

Editor:
https://bubble.io/page?type=page&name=bubble-forum&id=nutriso&tab=tabs-2

You’d do well to read what I wrote as well @alex.pethick as the specific issue you’re running into is most likely what I described.

Hey @keith, thanks for the reply! (was replying when you sent the follow up)

I’m not using the “page is loaded” event. I’m using an plugin event called “uppy file(s) added” which is fired when a file is selected in the Uppy uploader plugin (either by browsing computer or drag n drop).

So, the library should be loaded …right?

@jonah.deleseleuc 's plugin doesn’t appear to be Uppy. The Better Uploader plugin looks good, but I’ve researched Uppy and it seems to meet the specs I’m looking for now/in the future.

Hey @alex.pethick,

Not 100% sure this will work as I’m not at PC to test; try enabling ID attributes within settings, assign it an ID and target that ID in the JS.

The name of the uppy function is Uppy in this plugin’s implementation (note the capital U).

Changed it to Uppy but got this console error. How do I need to alter this code to work?

Bug in custom code TypeError: Uppy.on is not a function
at eval (eval at (PLUGIN_1488796042609x768734193128308700/Toolbox-action–Run-javascript-.js), :1:6)
at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-action–Run-javascript-.js:3:46)
at root (https://nutriso.co/version-test/bubble-forum?debug_mode=true:1:6)

Assigned the upload widget element an ID of uppy-plugin and then tried this (no idea if this is correct. Not going to lie, I used ChatGPT because I don’t know javascript) and it didn’t log anything to the console:

const uppyPlugin = document.getElementById('uppy-plugin');

uppyPlugin.addEventListener('file-added', (file) => {
  uppy.getFileInfo(file.id).then((fileInfo) => {
    if (fileInfo.type.startsWith('video/')) {
      const video = document.createElement('video');
      video.addEventListener('loadedmetadata', () => {
        const duration = video.duration;
        console.log(`Video duration: ${duration}`);
      });
      video.src = URL.createObjectURL(file.data);
    }
  });
});

Yeah I didn’t think that was going to work. “.on()” is a jQuery thing, not a JavaScript thing. Sorry, it’s not my plugin, not my library, and that’s about all I can tell you.

Note that in your more recent message where you tried to attach an event listener to the element in the DOM would still be wrong. (Because your second mention of “uppy” isn’t referring to “Uppy”. ) Though note that there’s no .getFileInfo() method on the Uppy object in your page so I’m not sure where you’re getting this code from.

I don’t think you can hack this the way that you are assuming you can. I think what I said at first is more fruitful: Use a plugin that actually provides the feature you need.

If you don’t know JavaScript, then forget trying to hack this together because you’re not going to get very far (it’s not as simple as copy & paste some code!)

If you want to compress something quickly, you can use my Cloud Companion plug-in + Better Uploader ( you need to use both for compression ) or some of the other compression plugins out there.

@keith I am not using Uppy :wink: everything is custom except for the compression library(pulled from npm). Unless you mean the compression library is actually using Uppy? That I’m not aware of, I’m just using the best performing one with the best reviews I could find.

I might have your plugin confused with something else, @jonah.deleseleuc, though my sense is that yours (whatever it might be built on) is among the best out there! And I’ve taken a quick peek at its code.

1 Like

Something is coming up. I accomplished this by using HTML and JS, without the use of any plugin elements. Therefore, the task remains to find a way to connect that JS code with a plugin element. Give me a moment!

Preview: https://nutriso.co/version-test/bubble-forum?debug_mode=true

1 Like

The plugin doesn’t expose the uppy instance so you can’t access it with the Toolbox action. Maybe you will need to use another plugin or create a custom plugin for yourself.

Did you get it to work? I hear what everyone else is saying, but if you’ve found a temp approach, I’m curious. When I go to the link, and drag and drop a file, it doesn’t update the duration state on the page …unless I’m missing something.

Best if you drop me a video example.

Here is the second implementation: https://nutriso.co/version-test/bf-3?debug_mode=true
Just follow the steps.

minus: you have to upload a file to DB to fetch a file’s metadata