Is it possible to pass in a function to the saveUrl attribute of the Upload component

[Jaime]

Hi there,

Is it possible to pass in a function to the saveUrl attribute of the Upload component.

My use case is that I need to trigger the upload with a button but need to do some additional processing first (calling another API). The uploading of the files will depend on this other API call.

Is the only option through an Interceptor? I've seen an implementation for React (see here) and it would be great if we have the same functionality in Angular.

Is this implementation in the roadmap and if so, when can we expect this to come out?

Also, when we set the autoUpload attribute to false, it automatically shows a Clear and Upload buttons. Is there a way to hide these buttons? I know you can position them through the actionsLayout attribute. It would be nice to have a none option to hide them.

Thanks!

[Yanmario]

Hi Jaime,

There isn't a specific way to adjust the saveUrl using a function. The developer can either change the request in the interceptor, or if you are already setting autoUpload to false, then you can change the saveUrl upon the file selected and upload them depending on your callback to the server. 

Example - https://stackblitz.com/edit/angular-rlfps1

As for the buttons, there isn't an available API and some custom CSS should be used in such cases:

kendo-upload-action-buttons {
  display: none !important;
}

The above example also includes this CSS to remove the action buttons. For this to be available as a built-in option, feel free to log it in our feedback portal.

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Jaime]

Thank you Yanmario,

I've actually started working on this using an interceptor. I'll take a look at your proposed solution and get back to you.

 

Thank you so much.

 

Jaime

[Jaime]

Hi Yanmario,

So I tried and patterned my code after your example. Eventually, calling the component's uploadFiles method explicitly did not do anything.

However, when the action buttons are displayed, clicking the Upload button does indeed do an upload because it hits the interceptor that I've setup. I added a screenshot below so you can have a better picture.

The red arrow points to a button that would initiate the upload. I'm pretty sure I have the reference to the UploadComponent. Not sure if this is relevant, but I was inspecting the component itself and noticed that fileList property has nothing in it. Its count is 0. Do I need to explicitly add in the files?

But as you can see from the screenshot above, there is a selected file for upload. I am not sure why when clicking the Upload action button would do the upload process but explicitly invoking the uploadFiles method does not.

Looking forward to your response.

 

UPDATE: I was able to trigger the upload when i invoke the component's uploadFiles method. However, I have to explicitly set or add the files to be uploaded to the component's fileList. My suspicion is that somewhere internal, the fileList is being cleared when autoUpload is set to false.

Also, notice how the file being uploaded display is doubled. Now I'm not so sure that I should be adding explicitly the files for uploading. See screenshot below and it even says 2 files successfuly uploaded.

 

Thanks again,

Jaime

[Yanmario]

Jamie,

I am not sure how the upload component is configured on your side and from my last reply the example doesn't experience the mentioned behavior and the list contains the file:

In such cases, a runnable example with steps to reproduce the issue would be helpful. Regarding the files list, you shouldn't add the file by hand and I am not able to pinpoint the cause without the runnable example.

Regards,
Yanmario
Progress Telerik

[Jaime]

Thanks again Yanmario,

Sorry I forgot to include the setting for the Upload component... but here it is. I'm including the whole form field section...

<kendo-formfield>
            <section class="upload-section">
                <kendo-label [for]="files" text="Uploads" class="upload-label"></kendo-label>

                <kendo-uploaddropzone zoneId="projectDropZone" class="project-drop-zone">
                </kendo-uploaddropzone>

                <kendo-upload
                    #upload
                    class="project-upload"
                    formControlName="files"
                    [saveUrl]="partialUploadUrl"
                    [concurrent]="false"
                    [restrictions]="restrictions"
                    [multiple]="true"
                    [autoUpload]="false"
                    (select)="onSelect($event)"
                    (remove)="onRemove($event)"
                    zoneId="projectDropZone">
                </kendo-upload>

                <kendo-formerror
                    *ngIf="
                        createProjectForm.controls.files.errors?.required &&
                        createProjectForm.controls.files.touched
                    "
                    >Error: Uploading files is required</kendo-formerror
                >
            </section>
        </kendo-formfield>

Is it possible that it is clashing with it being a formControl?

 

Thanks again.

 

[Yanmario]

Hi Jamie,

That might be possible, but in my testing, there wasn't a difference in my file list and at this point it is hard to tell without a runnable example. This is the example where I was running the tests with reactive forms:

https://stackblitz.com/edit/angular-ffnt3n?file=src%2Fapp%2Fupload.component.ts,src%2Fapp%2Fapp.component.ts

Feel free to check it out and fork it as a starter to share the issues that you are experiencing in your side.

Regards,
Yanmario
Progress Telerik

[Jaime]

Thanks for all your help Yanmario! I really appreciate it. 

I'll play around with the running example and let you know what I can find or what I'm doing wrong.

 

Cheers!

Jaime