Hi,
I am building a chat system with file upload. When user selects a file and submits, the server connect form gets submitted with the file and takes some time while the file is uploading.
Being a chat system, its expected that user can still send messages while the file is uploading.
But, if I send another message, its another form submission… and the previous requests gets cancelled (as I can see in network tab) and the file upload submission does not go thorugh.
I am using sockets, but I don’t think I can send the files over socket… I have to use a form.
Need Wappler’s events & sockets to manage everything.
Going custom is always an option, but this is a very important part of a chat app… with that much custom code, I would be better off not making this in Wappler.
Use a scheduler (every second or so) to initiate an SC, rather than form, (use condition - if the datastore has items) and point to items[0] of datastore for the SC’s parameters. Once the SC is complete remove items[0] and if datastore contains any more items, run again with datastore items[0] (now the next file)
Edit: Improvement
You could set up a flow for this:
if datastore.items.hasItems()
run SC to upload file using datastore items[0]
remove datastore items[0]
run flow again
Also trigger the flow periodically with a scheduler and on addition of new files from the chat
I like this idea. But I don’t think a flow can call itself. I recall it won’t run if already running, which is technically true at the time it is called.
Two things you are missing here: A chat needs to be realtime. And you cannot store file information in that manner.
Files have limitation around how it gets uploaded from a browser.
The solution is more suited for a use case where operations are done in batches.
There are multiple ways that could be used, I don’t know what would be useful in your use-case. Most solutions will need custom code since we don’t have the components/actions currently to do these operations.
You could embed the image inside the chat message as inline base64 encoded image. You can use summernote as editor for the chat message, it already embeds the images as base64 by default when you drag images in the editor.
Other way is to separately upload the images to the server, this also is possible with summernote and the upload plugin. When you do not use summernote as editor you have to write your own image upload code. In the server action you can then also do a resize if needed and you return the path/url where the image is stored and include that with the chat message.
I don’t think you have understood the requirement here.
I am just looking for a solution to be able to make consecutive submits on a server connect or server connect form, without the newer one cancelling the previous submission.
I does not necessarily have to be about images - it could just be text or video or any other file - in the context of a chat application.
What you are explaining about base64, does not make sense. The SC or SC Form will still get cancelled on consecutive submission - no matter how I send the data.
Do you need separate uploads for each file, can’t you use something like dropzone and then upload all files in a single request. It is possible to do multiple requests to a server action from within a flow without it aborting the previous one, but you can’t do form submits there.
I already have a dropzone. And that works fine.
But the issue is that dropzone becomes available for upload immediately after first submission.
And if I add new images now and submit, previous set of uploads gets cancelled.
Refer any chat app for reference. Mobile app or website widget.
If I upload any file or write a text, the UI does not wait for that to be sent before allowing to send more files or messages.
How do I acheive that with Wappler?
function submit(form) {
fetch(form.action, {
method: 'POST',
body: new FormData(form)
});
}
You could also create a custom flow action or custom component to do it. How was your idea with the forms, do you reuse the same form or do you dynamically create them?
