All topics

Troubleshooting Buildship Fileupload Workflow

Raphael Walters
1 year ago
https://www.loom.com/share/61839a819b4d41cfaefaf07d3c5e7aa3?sid=b2ab5c9a-9dfe-404c-826b-73bfbc143f12
Raphael Walters
1 year ago
Troubleshooting Buildship Fileupload Workflow
Raphael Walters
1 year ago
Bumping this to see if anyone knows how to resolve a 'Multipart Boundary' issue when uploading a file to Buildship. https://www.loom.com/share/8abd072c4079486da3434c5fb767d65b?sid=c3294ad8-37cc-4b07-a4cf-fc7a6dcb14c6
Erik Beuschau
1 year ago
What kind of url are you uploading to? Is it a temporary url? I just noticed that you didn't have any authorization headers.
If your request works in hoppscotch, I would recommend comparing the network request from your toddle app with the setup you have in hoppscotch.
Also, are you proxying the file upload? (I would recommend not proxying it)
@Erik Beuschau
What kind of url are you uploading to? Is it a temporary url? I just noticed that you didn't have any authorization headers.
If your request works in hoppscotch, I would recommend comparing the network request from your toddle app with the setup you have in hoppscotch.
Also, are you proxying the file upload? (I would recommend not proxying it)
Raphael Walters
1 year ago
Thanks @Erik Will check all of this out and report back!
👍1
Raphael Walters
1 year ago
Here's an update @Erik Beuschau https://www.loom.com/share/d50a236b9a2c4c999c7431f8fbac53e9?sid=2b1fd86a-6295-4db5-8cd6-423677cb5e04
Erik Beuschau
1 year ago
Could you try sending the file in the body directly instead of an object? Right now, you're sending an object: { file: <your-file> } but it would be interesting if you just set the body to be your file variable directly.
You would probably never enable auto fetch on a file upload request, as it would then run automatically when the page loads 🙂
Feel free to give me a call if we should try to solve it together 👍
Raphael Walters
1 year ago
Hey @Erik Beuschau still no joy. Will DM you.
✅1
Erik Beuschau
1 year ago
In case others find this useful:
You can see an example of a file upload working with Buildship here https://dev-awesome_blog.toddle.site/
You can see the project here https://editor.nordcraft.com/projects/awesome_blog/branches/dev/components/HomePage?leftpanel=design&rightpanel=style&canvas-width=800&canvas-height=800

I've included an example of how to achieve the same upload using a form submit.
In Buildship I just used their upload file template 👍
👍2
Raphael Walters
1 year ago
Thanks @Erik Beuschau I worked through your example and got it working. I was missing a crucial piece of the puzzle 👆 Thanks for taking the time to figure it out 🙌
Raphael Walters
1 year ago
@Erik Beuschau Just a couple of quick questions about your solution https://www.loom.com/share/a15b985043fd44a1beaaaf3fb3ed3aa7?sid=38fcd61b-52b3-4236-9089-aef8694a9c8e
Erik Beuschau
1 year ago
Great questions:
1. The proxy setting means that the request is first sent to our (toddle's) back-end, then to the actual endpoint and finally the result will come back from the toddle back-end again. This is really useful when you're working with authenticated APIs that require a cookie coming from the same domain as yours. For file uploads though, it's not very useful and I also believe we might have a bug on our end in terms of sending off files correctly. I don't believe it makes sense for us to proxy large file uploads anyway though.
2. I added 2 examples - 1 using events + an API call, and another using a pure form action. The form element is one of the original html elements and is actually quite powerful. You can specify an action (which can be a url) that it should send its data to, and you can even specify its HTTP method. If your web service/endpoint returned a Location header you could go with this solution and allow your endpoint to tell the client where it should go next.
The drawback of the native form solution is that you don't necessarily want it to perform a full page reload.
So to investigate the form solution further, you will need to look at the form element's attributes - not events 🙂

Links here:
Form element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action
Location header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Location
🙌1
Raphael Walters
1 year ago
Wow! Thank you. Will dig in a little deeper.☺️
Raphael Walters
1 year ago
Another question https://www.loom.com/share/a6d78b860ac04e628a7fe79be083424e?sid=b10b4f73-5de6-44c2-a826-51e290b5304a
Raphael Walters
1 year ago
I noticed that the file variable wasn't being reset after each upload so made the change. Here's a video walkthough in case anyone finds it useful. https://www.loom.com/share/ced5dc0cf876468db24b857b5618b806?sid=c9bf8b84-2993-4033-a5b6-09900989a9dd
👍1
Tod
1 year ago
Great energy @Raphael Walters! Your continuous contribution to the toddle Community just made you advance to Community Level 12!
@Raphael Walters
Another question https://www.loom.com/share/a6d78b860ac04e628a7fe79be083424e?sid=b10b4f73-5de6-44c2-a826-51e290b5304a
Erik Beuschau
1 year ago
The structure/type for the API response in this case is defined directly in Buildship. So I looked at the response format for successful responses in the Buildship workflow. For the error I was just guessing - I’m not sure if that part works 😅
😂1

Troubleshooting Buildship Fileupload Workflow

Raphael Walters

Raphael Walters

Raphael Walters

Erik Beuschau

Raphael Walters

Raphael Walters

Erik Beuschau

Raphael Walters

Erik Beuschau

Raphael Walters

Raphael Walters

Erik Beuschau

Raphael Walters

Raphael Walters

Raphael Walters

Tod

Erik Beuschau