How to await response from upload

[Lee]

I have a form that accepts text inputs and a file. The kendo upload component is async so I can take advantage of the drag and drop feature. I want the user to be able to upload multiple files. When the user has finished filling out the form and selecting their files the user clicks a submit form button and the following should happen:

1. The files are uploaded.
2. The function waits for a response from the upload.
3. The saveURL returns a response with an internal fileID and other information. 
4. The response is saved in a local URL. 
5. This is then added to an object containing the rest of the form field's values and a second ajax call is made to upload the entire form's data including the fileID's to a database.

Here is a Dojo I started: https://dojo.telerik.com/@dojolee/EfiXIbeH

Dojo

[Martin]

Thank you for providing a Dojo example. Could you please provide some details, what exactly is the issue you are experiencing here? The setup appears to be working as expected so far. Once I am more familiar with the problem, I will be happy to assist you.

[Lee]

Thank you. Im trying to do all of this in a single function but cant figure out how to wait for the uploads success to finush and return a value.

Function handleSubmitClick() {

1. Click the button

2. Sumbit the files.

3. Get the results

4. Do something with the results.

}

I ended up breaking it into multiple functions and using the success callback but that isnt very clean.

[Martin]

Wouldn't the success event be appropriate for what you wish to accomplish, as you have the server response available there? Otherwise, as far as I understand the scenario, the approach you are using seems to be appropriate as long as it achieves the requirement and no unexpected behavior occurs.

[Lee]

No, the success event is not appropriate because it does pause the original function nor does it return the value I need to It. While using the success event does work it makes for messy code that is very difficult to follow. 

[Lee]

To add some clarity i have 2 uploads on my page and both need to do their thing in order. 

[Neli]

Hi Lee, 

I went through the thread and as my colleague Martin has suggested, the Upload success event seems the most appropriate one for getting the response after a file has been uploaded. In the success event handler by using the e.response the response object that is returned by the server can be accessed. Thus, you could return from the server the needed value and access it in the event handler.

Another possibility is to subscribe to the complete event that will be fired when all active uploads complete for a specific Upload widget instance are completed. 

Regards,

Neli

 

[Lee]

The problem is that I need the original function to wait for the success event, get the response, and use that response to continue. Instead of function a triggers upload. Upload 1 success triggers upload 2. Upload 2 success triggers function b. Function b finishes the process, i would like function a triggers upload, waits for response, then triggers upload 2, waits for response, then continues finishing the process. It seems cleaner.

[Neli]

Hi Lee, 

Could you please confirm if there are one or more Upload widgets on the page? From your last reply, I assume that you need to have two Uploads that will upload files consecutively. When the files from the first Upload are uploaded you need to continue with uploading files from the second Upload widget. Is this correct?  

In such a scenario you could for example set autoUpload option to both Upload widgets to false. Then, you could hide the default buttons and click them programmatically in a consecutive way. Such an approach is demonstrated in the Dojo linked here. 

I am afraid that the Upload widget does not provide other events different than the success and the complete event that would be fired when the files are completely uploaded. 

Regards,

Neli