I am trying to make an Uppy component (https://uppy.io/) to enable some more advanced file uploading options.
When I try it out on the demo provided by the webpage (Dashboard — Uppy) with a largish file (say >10MB), I get real-time updates on the progress of the upload (good user feedback).
But, when I put it into Anvil, the progress bar sits at 0% until either 100% is reached or if I have a really large file and after a few minutes (>5) it updates (EDIT: it seems that with the approach below this problem only happens in FireFox. I am not able to reproduce it in Safari or Chrome — however, when using anvil.window.js, I am dead in the water still). So, it is very frustrating to a user.
I have tried the code there in a naked HTML file, and it works fine outside of Anvil. But, inside Anvil something is not right.
I have added the appropriate CDN links in Native Libraries.
I have also an implementation that I am working using anvil.window.js to be the component. But, the behaviour is the same.
I can’t help but feel I am missing something really trivial. Under the hood it is running React, so perhaps there is some inherent incompatibility between React and the Skulpit because of the way React has a virtual DOM.
@stucork perhaps you have run into something like this?
Here’s mock up of how it might work in anvil.js.window
from anvil.js.window import Uppy
import anvil.js
class UppyComponent(UppyComponentTemplate):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
# Any code you write here will run when the form opens.
self.uppy = Uppy.Core().use(Uppy.Dashboard, {
'inline': True,
'showProgressDetails': True,
'target': anvil.js.get_dom_node(self)
})\
.use(Uppy.Tus, {'endpoint': 'your tus server here'})\
self.uppy.on('progress', self.progress)
self.uppy.on('upload-progress', self.upload_progress)
self.uppy.on('complete', self.complete)
self.uppy.on('file-added', self.file_added)
def file_added(self, file, *args):
print(file)
def progress(self, progress, *args):
print(progress)
def upload_progress(self, file, progress, *args):
print(file.id, progress.bytesUploaded, progress.bytesTotal)
def complete(self, result, *args):
print(result)
I can add files as you’d expect.
I can’t upload files because I don’t have a TUS endpoint to upload them too… But it looks as if things would work if I had an endpoint. The spinner spins and then immediately fails - so the ui is working for me as I’d expect
Thank you @stucork. I will give it a go. If ok, can I send you a private message with a endpoint and credentials for you to test if I keep running into the issue.
Hi @andersgs - I don’t suppose you managed to fix the bug with the progress bar? I’m having the same issue. Uploads are happening but the progress bar doesn’t change and sometimes it returns a fail.
Using S3, I have everything working except the upload-progress never fires and the progress only fires once, when it is done. Calls to getState shows percentage:0 until it is complete and then percentage:100.
