Waiting for Observable inside event handler

[waircit]

How would I go about waiting for an Observable to resolve within (upload)="uploadEventHandler($event)"?

The handler exits and the file is posted to my API before my Observable dialog result has a chance to resolve.

[Martin]

Hi Waircit,

I am not sure that I understand correctly the scenario and what you are trying to achieve. Basically This upload event is used to send headers or any additional data with the item to the server. By default, the Upload always made a request to the [saveUrl] property which sets the URL of the endpoint for the upload request. When the developer wants to trigger the upload on a specific element (when autoUpload is set to false), the uploadFiles method can be used to upload files manually. For more details check the following article:

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/how-to/external-btn-uploading/

However, I am not sure what is the expected behavior, and how the Upload should behave in combination with the Dialog component. Please could you provide some details about the Dialog component (e.g. Dialog instance is created dynamically) and when the files should be posted to the API (e.g. when the Dialog is closed). Thank you in advance.

Regards,
Martin
Progress Telerik

[waircit]

Hi Martin,

Thanks for taking the time to reply.

My scenario is that within the (upload) event, I wish to present the user with a dynamic Dialog. The purpose of this dialog is to capture an optional text comment from the User to associated with the uploaded file.

  let comment = '';
  dialog.result.subscribe((result) => {
      if (result instanceof DialogCloseResult) {
      } else {
          comment = JSON.stringify(result);
      }
  });

/// Comment is always null. How do I wait for the above subscription to complete so that I have a valid comment from the User before sending
/// it to the backend API.
e.data = {
  comment
};

   

[Martin]

Hi,

There are two options to achieve the desired functionality - the first option is to set the autoUpload option to false and using the built-in 'Cancel' and 'Upload' actions buttons or to hide the default actions buttons and use the uploadFiles built-in method in dialog result subscription. Please check the examples:

1. https://stackblitz.com/edit/angular-kvpc79?file=app/upload.component.ts

2. https://stackblitz.com/edit/angular-kvpc79-luecjd?file=app%2Fupload.component.ts

Also, I want to mention that the FileSelect component is similar to the Upload, with the only difference that is used only to select files from the file system, leaving the rest of the process in the hands of the developer (the developer needs to decide when and how to send the request to the server, etc.). It can be used in this case to avoid dealing with asynchronous operations:

https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/forms/#toc-reactive-forms

I hope this helps.

Regards,
Martin
Progress Telerik