Hello, I am trying to set a Uppy file loader in a form because it has every feature I am looking for : drag and drop, possibility to load big files and then get past the timeout limits, progressbar. I am able to plug a TUS endpoint to receive the file.
The form has 2 other components.
The form cannot be submitted before the file has been uploaded successfully.
My issue is that I barely know anything on JavaScript, hence integrating Uppy is a struggle. I read the docs, I read 1 or 2 threads, such as this one, mentionning it, but I am totally stuck.
Here is a mock copy of the form, as the main app should not be shared as-is.
Thank you for any help.
So far when trying to do what Stucork did here, I get the error “AttributeError: ‘Window’ object has no attribute ‘Uppy’”.
In the native libraries, I copied what I saw on Uppy doc.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.18.1/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, Tus } from "https://releases.transloadit.com/uppy/v3.18.1/uppy.min.mjs"
new Uppy().use(Tus, { endpoint: 'https://tusd.tusdemo.net/files' })
</script>
How to overcome this error in the first place ?
Look at the Native Libraries in the project in the link you posted. Their import works fine, e.g.:
<link href="https://releases.transloadit.com/uppy/v1.25.1/uppy.min.css" rel="stylesheet">
<script src="https://releases.transloadit.com/uppy/v1.25.1/uppy.min.js"></script>
in the Native Libraries, and then in the form you can use the from anvil.js.window import Uppy as shown in the post you linked to.
1 Like
Right, thank you ! The error is gone now. So I did a form with just the Uppy template, activated it to be used as a component, and inserted it in my original form. Things are going the right way 
I still need to manage the size and text displayed in the module, but I think I can set the workflow I was looking for at first. Thank you !
2 Likes