Kendo-angular: Kendo-upload doesn't work with reactive forms
Describe the bug
Seems it is not working when you bind formControlName directive with the kendo-upload cmp. valueChanges event is never called.
To Reproduce
Steps to reproduce the behavior:
- See demo https://stackblitz.com/edit/angular-zwbfep-htngel?file=app/upload.component.ts
- Select a file and check out the browser's console
Expected behavior
Should work properly
destus90
All 9 comments
Hi @destus90,
The current behavior is by design. The valueChange is triggered when a file is successfully uploaded. This is demonstrated on the following documentation page.
Raisolution
on 11 Jun 2019
This behavior is really counterintuitive. you can't put a required validator on that form field, or your form will never be valid until AFTER you have uploaded the file. I want the file to be uploaded as PART of the form submission, not a separate thing with it's own saveurl different than the form's submit url.
I shouldn't have to set a saveurl if the upload widget is part of a form. if there is a formcontrol tied to the widget, it should pass the relevant info on to the formgroup it is a part of.
myFormGroup = builder.group({files: [], otherField: 'somevalue'});
where files is the form control attached to the upload widget. If I then do the following
http.post('/formsubmit', myFormGroup.value)
on the server side, the passed form object should have a field named 'files' with an Http File Object in it and any files that the user attached.
As it is, I have to do a convoluted work-around where I hide the buttons on your upload widget when a person adds a file, and determining if the form can be submitted I have to check if the form is valid AND I have to check if files have been added to the widget. Then to actually upload, i can't just sumbit the form, instead, i have to trigger the upload action on the upload widget (the tail is wagging the dog here) and then add all the form data to the upload action on the widget.
ncrawlins
on 20 Jun 2019
I agree with @ncrawlins. Implementing the file upload component in a reactive form results in mind-boggling work arounds. In my case I check if the reactive form is valid, set it to invalid to prevent a form posting without a file, then enable the upload component (to prevent uploading of non-associated files) and then grab the success event handler to set the form back to valid and hope that the user then posts the form and then when the form is posted I have to grab a reference to the id, find the file in Blob Storage and update it with the id of the posted form to give me a cross-reference... Or something like that, I'm still working on the details. What I wanted was a swing, what you gave me was a tyre tied to a rope on a branch of a tree which may not support my weight when I want play with it.... Is this what you mean when you say "by design"????
PLEASE RE-OPEN THIS ISSUE AND RE-ADDRESS YOUR DESIGN.
bobingham
on 10 Jul 2019
PS - @ncrawlins, how did you hide the buttons on the upload widget, seems you have the best fudge to the problem.
bobingham
on 10 Jul 2019
Hello guys,
Thank you for providing the extensive feedback and for sharing the exact scenarios in which you utilize the Upload component. We have discussed this functionality internally again and here is a summary of our thoughts about it:
Currently the component is designed to always handle the upload process asynchronously by itself. This is why it is mandatory for the saveUrl property to be set and why even when used inside a form, the Upload component requires the successful uploading of the file in order to signify a valid state.
While this behavior is suitable for many cases, it rather hinders those, in which the upload process will be handled by the form itself (i.e. by the developer). We find this to be the main difference, which leads to the current misunderstanding - In the described scenarios the Upload component only serves as a tool for selecting the files, but not uploading them. This has led us to the decision that a new component could be introduced e.g. <kendo-fileselect>, which would basically look like the Upload component (i.e. Select files button with a list of selected files, file restrictions etc.). However all upload related functionality will be stripped out and the value of the component will just contain the selected files, leaving all further handling to the developer.
What are your thoughts about this?
PS @bobingham The buttons of the Upload component could be hidden via CSS. Here is an example of this in action.
cc @tsvetomir @bergenhem
Raisolution
on 10 Jul 2019
@Raisolution, great support. Nice to know these issues are actively being maintained. The <kendo-fileselect> option is a great idea. As for my problem which I have wrestled with for the best part of a day I decided to bite the bullet and allow users to upload in the middle of the form input process. The success event handler sets the value of the file form input to validate the form and If they upload more than one file (form -> file is a 1-1 relationship) I leave previous uploads as orphans and use a unique uri returned from from Blob Storage to populate the json object when posting back to the server. The server then finds the uri in Blob Storage and updates metadata with the id of the posted form once inserted into the database. Hardly ideal and bit convoluted, but hey-ho!
bobingham
on 10 Jul 2019
@bobingham the process you describe, while complex, has the advantage of uploading the files before the form is submitted. It's widely used too, see GMail for example.
tsvetomir
on 11 Jul 2019
Uploading files first and then submission of a form is ok if that's all you need. I need cross references in my meta data and some people need files in folder structures which can not be determined until the id of the persisted form is ascertained. It's not a major com[plaint, I have found a work-around, but in reality when you talk about integration with forms one would reasonably expect an _IFormFile_ object as part of the posted form. I like the idea of <kendo-fileselect> suggested by @Raisolution because it seems to imply this type of implementation.
@Raisolution , thanks for the css for hiding the buttons, not used at the end of the day but always useful to know.
bobingham
on 11 Jul 2019
Hello guys,
The FileSelect component is available in v5.2.0 of the Upload package.
https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/
Raisolution
on 20 Jan 2020
Related issues
ilianiv
路
3Comments
ilianiv
路
3Comments
ghost
路
3Comments
alexeykostevich
路
3Comments
simon11196
路
3Comments
Most helpful comment
This behavior is really counterintuitive. you can't put a required validator on that form field, or your form will never be valid until AFTER you have uploaded the file. I want the file to be uploaded as PART of the form submission, not a separate thing with it's own saveurl different than the form's submit url.
I shouldn't have to set a saveurl if the upload widget is part of a form. if there is a formcontrol tied to the widget, it should pass the relevant info on to the formgroup it is a part of.
myFormGroup = builder.group({files: [], otherField: 'somevalue'});
where files is the form control attached to the upload widget. If I then do the following
http.post('/formsubmit', myFormGroup.value)
on the server side, the passed form object should have a field named 'files' with an Http File Object in it and any files that the user attached.
As it is, I have to do a convoluted work-around where I hide the buttons on your upload widget when a person adds a file, and determining if the form can be submitted I have to check if the form is valid AND I have to check if files have been added to the widget. Then to actually upload, i can't just sumbit the form, instead, i have to trigger the upload action on the upload widget (the tail is wagging the dog here) and then add all the form data to the upload action on the widget.