Upload - Manual Call in TypeScript

[Keith]

We would like to be able to use the Upload Control with Typescript.  But we have a requirement to not do an automatic upload, but to wait until associated form elements are completed.

Our scenario is someone fills out a form, associates the attachments using the control, then the user clicks 'Submit'.  This submits the form first.  Upon success, it gets the Id for the form record and then assigns that value to the File(s).  Then it automatically calls the uploadFiles.

However, we cannot determine how in TypeScript to call the uploadFiles method.  Do you have an example we can look at?

[Dimiter Topalov]

Hello Keith,

The most straight-forward approach to achieve the desired functionality would be to set the autoUpload property to false (so that selected file(s) is not automatically uploaded), and call the Upload component's uploadFiles() method programmatically when necessary.

You can also hide the built-in styling and buttons for uploading the files when selected and autoUpload is set to false, e.g.:

encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-widget.k-upload .k-action-buttons {
      display: none;
    }
  `]

https://plnkr.co/edit/4FshOOfQvHanfUpvd2v4?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Keith]

The Plunker you provided doesn't seem to build.  We'll try the app/upload.component.ts code and see if it can be used as a guide for our code.

[Dimiter Topalov]

Hello Keith,

There must have been some temporary issue on the Plunker side, as I was able to open and run the Plunker as expected:

https://www.screencast.com/t/QOKcSWnbPBjF

You can try clearing the browser cache and also running the plunker with the developer tools (F12) opened and refresh the page.

The main points of interest are setting the autoUpload property to false, and optionally hide the built-in buttons that will appear upon selecting a file, via CSS.

Regards,
Dimiter Topalov
Progress Telerik

[Keith]

Thanks for your reply.  I got pulled away on another project for a couple of days.  I'm looking at this now.

Regarding the Plunker, it works in Chrome, but it struggles in Edge on Windows 10.  Have you tried it there?  If so and it works for you, I'll mess with my Edge later.

I'll get back to you.

[Keith]

That plunker gave us what we needed.  So, the ability in the markup to define a selector(?) "#upload", what is that functionality in angular?  Please give me a name and I'll look it up on the angular.io page.

Thanks so much for your help!

Peace,
Keith

[Dimiter Madjarov]

Hi Keith,

The Upload component is referenced as a template variable in this case. More information on the topic could be found here:

https://angular.io/guide/template-syntax#template-reference-variables--var-

Regards,
Dimiter Madjarov
Progress Telerik