Optimistic UI for File Uploads (Autoform)


#1

Hi, does anyone have any idea on how to implement an Optimistic UI thing where a user can save the Autoform before the image is uploaded to the file hosting service.

A user already has all the data which it needs before uploading the image, so why does he/she have to wait for it to hit the server before he/she can continue working on other things.

Can anyone steer me in the right direction where to look in autoform to implement this for slingshot-autoform which already renders the picture to the user when ready and resized on the client => then it does all the uploads to s3 or google-cloud.

I guess the issue is that we need to be able to rerun the submit function for the particular form it was uploaded to but just update the file-field. Any ideas here?


#2

A crude workflow would probably be to exclude the file object from what’s submitted, submit the form with all the other fields, and on the form’s success callback, initiate the file upload. You could provide a small widget on a corner somewhere that indicates the upload progress as well.


#3

I wonder how that could be implemented with Slingshot and S3? I know S3 returns with a unique file-name which I guess I need to update later when it returns, or even better would be if I could set the unique file-name, so that I know the URL before the upload is even started. Like allocating some space, storing the data to the form and let the form live it’s own life, and at the same time upload it in the background.

But I’m not sure how one could fix this for s3, might have to dig into Slingshot.

Thx,
// T


#4

Yep, slingshot might help.

Another option that just occurrd to me would be to submit the form to a method and let the method set the form contents to a reactive-dict, including the base64 encoded (FileReader object) file content (the file must not be too big), close the form while showing a notification that another notification will pop once form is sent down to the server and begin actually submitting the form to another method on the server, whose callback would trigger user notification.

Whew! :smile:


#5

I solved it, it turns out Slingshot.Upload returns a pointer to the upload object containing a reactive status and I could find the unique filename after the status changed to transferring which is great!