Telerik Forums
Kendo UI for Angular Forum
0 answers
3 views
public onFileUpload(e: UploadEvent): void {
      // const file = e.files[0].rawFile;
    // e.preventDefault();
    // const formData = new FormData();
    // formData.append("file", file, file.name);
    // formData.append("sourceId", "1");
    // formData.append("documentTypeId", "1");
    // formData.append("associationId", this.id.toString());
    // formData.append("documentTypeName", "InventoryManagementImage");
    // this.HttpClient.post("upload", formData).subscribe(
    //  (response) => {
    //    console.log("Upload successful:", response);
    //    // Handle response
    //  },
    //  (error) => {
    //    console.error("Upload failed:", error);
    //    // Handle error
    //  }
    // );
    // console.log(e, "e");
   

  }

if i use this it works but when i try another way its sucks  

public uploadSaveUrl = "upload"

const formData = new FormData();

    // Append additional data to FormData
    formData.append("sourceId", "1");
    formData.append("documentTypeId", "1");
    formData.append("associationId", this.id.toString());
    formData.append("documentTypeName", "InventoryManagementImage");
    // Iterate through selected files and append to FormData
    e.files.forEach((file) => {
      formData.append("file",file.rawFile, file.name);
      console.log( file.name, " file");
    });
    // Set the FormData as the upload data
    e.data = formData;
    console.log(e.data ,e ,  'data') is i possible to adding this formdata on kendo uploadSaveUrl ? and make request then?
avto
Top achievements
Rank 1
 asked on 23 Apr 2024
0 answers
4 views

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!

Jaime
Top achievements
Rank 2
Iron
Iron
 updated question on 23 Apr 2024
0 answers
10 views
It is possible  On here 
 <kendo-upload
          #upload
          [saveField]="'file'"
          [saveUrl]="uploadSaveUrl"
          [removeUrl]="uploadRemoveUrl"
          [autoUpload]="false"
          [withCredentials]="false"
          (remove)="removeImg($event)"
          (upload)="onFileUpload($event)"
          (success)="onUploadSuccess($event)"
          (complete)="complete()"
          (cancel)="cancel($event)"
          (error)="error($event)"
          (focus)="focus()"
        (pause)="pause($event)"
        (uploadProgress)="uploadProgress($event)"
        (resume)="resume($event)"
          [chunkable]="chunkSettings">
        </kendo-upload>
when i remove
[removeUrl]="uploadRemoveUrl"
remove icon didnot  removed in browser?
avto
Top achievements
Rank 1
 asked on 01 Apr 2024
1 answer
30 views
I'm using Upload for Angular in my app. I need to style the Clear and Upload buttons to match the rest of my app. I've tried many things but nothing is working. I'm looking to override all of the class attributes of these buttons and assign 'btn btn-bare' to Clear and 'btn btn-primary' to Upload.
Hetali
Telerik team
 answered on 30 Jan 2024
1 answer
30 views
 <kendo-uploaddropzone-messages
dropFilesHere ="Max file size: 47.68 MB Only .xlsx">
 </kendo-uploaddropzone-messages>

this tag helps to customize the message hints, but it's coming as a string

we need to show the hint like this. How do we do?

Hetali
Telerik team
 answered on 03 Nov 2023
0 answers
32 views
We have wondered here that large files no longer arrive completely. Ok, chunkable must be configured. The header "metadata" is now set for the request, but we miss the header "Content-Range".
Have now found nothing to the header "metadata" that this would be a new standard, should not the kendo-uploader also set "Content-Range"?
Sandy
Top achievements
Rank 1
 asked on 11 Oct 2023
2 answers
135 views

Hi , I am using the uploader but I want to limit the number of files that the user can select , the uploader is set to manual uploading and user can select multiple files , so if the user select 7 files and the MaxFileLimit is set to 5,  I want to add 5 files to the list and removed the rest  . 


 <kendo-upload 
                    [saveUrl]="uploadUrl" 
                    [autoUpload]="false" 
                    [actionsLayout]="actionsLayout"
                    [restrictions]="imageRestrictions" 
                    (select)="select($event)"
                    (remove)="remove($event)" 
                    (clear)="clear()"
                    (upload)="uploadEventHandler($event)"
                    (complete)="complete()">
                        <ng-template kendoUploadFileInfoTemplate let-file>
                            <div><img [src]="findPreview(file)" style="height: 50px;"> Name: {{file[0].name}} </div>
                            <div *ngIf="file[0].validationErrors">You cannot upload this file :: {{file[0].validationErrors[0]}}</div>
                          </ng-template>
                    </kendo-upload>

I have tried using the Select Event to remove the file using  e.preventDefault(); but it does stop the process and not files are added to the list if the users select more than 5 files .


 

publicselect(e: SelectEvent): void { const that = this; e.files.forEach((file) => { if (file.extension === '.jpg') { if (this.imageCount < this.maxImageCount) { this.imageCount++ if (!file.validationErrors) { const reader = newFileReader(); reader.onload = function (ev) { const image = { src: ev.target["result"], uid: file.uid, }; that.imagePreviews.unshift(image); }; reader.readAsDataURL(file.rawFile); } }else { e.preventDefault(); } } }); }

Any ideas on how to remove the extra files or limit the number of files the user can select .

Thanks

 

 

 

 

 

 

 

Hernando
Top achievements
Rank 1
Iron
 answered on 20 Jun 2023
1 answer
55 views

Hello,

I'm using kendo-upload for uploading files and displaying progress by subscribing to the uploadProgress event. 

When [chunkable]="false" it seems that the event is fired every second or less, allowing the developer to show the progress smoothly.

The above is not true when [chunkable] is set to some value, the event is fired only when every next chunk is uploaded. Consider the following settings: [chunkable] = "{ size: 1048576} and file size to upload is 10Mb, in this case, only 10 events are going to be fired with  event.percentComplete = 10, 20, 30 .... 100. This prevents me from building a progress indicator that works smoothly enough. Any ideas about getting uploadProgress fired during the chunk upload more often than once at the end?

Slavena
Telerik team
 answered on 12 Jun 2023
2 answers
90 views

I am utilising the Kendo Uploader which is hitting a .net Frameworks api. The endpoint saves the file and then using the Telerik Doc library will open the uploaded spreadsheet and a validation begins where each row is validated against a set of rules. If any row fails to validate then details of the failure are recorded as a list. Once all rows have been checked the error list is returned as a json response. If the sheet validates without error the code will then save each row as a new record and return a json result confirming the number of records saved or if saving fails then an error as a json result.

I need to be able to process the json response on the client side via the onSuccess or onError events or some other way. Is this possible

Many Thanks

Martin
Telerik team
 answered on 23 May 2023
1 answer
42 views

using kendoFileSelectFileTemplate,

would like to have some Angular TypeScript code run when the user clicks in the whitespace in the <li> elements rendered by the kendo-upload control.

Martin
Telerik team
 answered on 26 Apr 2023
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?