This is a migrated thread and some comments may be shown as answers.

Upload - Manual Call in TypeScript

6 Answers 421 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 2
Iron
Veteran
Keith asked on 24 May 2018, 03:57 PM

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?

6 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 28 May 2018, 10:43 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Keith
Top achievements
Rank 2
Iron
Veteran
answered on 29 May 2018, 01:43 PM
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.
0
Dimiter Topalov
Telerik team
answered on 30 May 2018, 07:56 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Keith
Top achievements
Rank 2
Iron
Veteran
answered on 01 Jun 2018, 03:34 PM

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.

0
Keith
Top achievements
Rank 2
Iron
Veteran
answered on 01 Jun 2018, 05:38 PM

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

0
Accepted
Dimiter Madjarov
Telerik team
answered on 04 Jun 2018, 06:31 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Keith
Top achievements
Rank 2
Iron
Veteran
Answers by
Dimiter Topalov
Telerik team
Keith
Top achievements
Rank 2
Iron
Veteran
Dimiter Madjarov
Telerik team
Share this question
or