kendo-angular-upload

[Patrick]

Where can I find a complete example on how to use the kendo-angular-upload component with .NET Core 2.1 Web API?

All the example on the Telerik site, shows

[saveUrl]="uploadSaveUrl"
[removeUrl]="uploadRemoveUrl"

How the EndPoint should look like? 

[HttpPost]

public SomeDUmmyMethod(IformFile file) ?????

[Martin]

Hi Patrick,

Please check the following GitHub project that demonstrates how to use the FileSelect and Upload components with ASP.NET Core web API:

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/aspnetcore-upload

I hope this helps.

[Dimiter Madjarov]

Hi Patrick,


We don't have such example on our site, only with mocked backend. In general there is nothing Kendo UI Upload specific that should be changed in the backend handler. Same one could be used for uploads via regular <input type='file' /> elements.

Regards,
Dimiter Madjarov
Progress Telerik

[Ron]

Patrick,

I'm slowly picking at a similar endeavor - ie. pulling my uploaded files down from angular, passing it to UnitOfWork, and sending that out to SQL, and then trying to get them back out again. I'm still not sure on how I'll handle the UI for saved files and people's ability to download them - Dimiter would probably be able to say something as to what degree the grids can be leaned on for representing document arrays (whether it would just be links, links with icons, how to prep binary data for the grid, etc.).

 

So far I at least have my data getting passed back to my controller and it *appears* to be saving although I'm not exactly sure how test whether it's saving in a manner that can be reassembled again.

What I have so far:

       [HttpPost, DisableRequestSizeLimit]
        public ActionResult UploadFile()
        {
            try
            {
                var file = Request.Form.Files[0];
                var type = file.ContentType;
                var data = new MemoryStream();
                file.CopyTo(data);
                data.Seek(0, SeekOrigin.Begin);

                var buf = new byte[data.Length];


                Guid newid = Guid.NewGuid();

                PartDoc newPartDoc = new PartDoc
                {
                    Id = newid,
                    QuoteId = defaultGuid,
                    PartId = defaultGuid,
                    Body = buf,
                    Extension = type,
                    Created = DateTime.Today,
                    CreatedBy = defaultGuid
                };

                unitOfWork.PartDocRepository.Insert(newPartDoc);
                unitOfWork.Save();


                return Json("Upload Successful.");
}
catch (System.Exception ex)
            {
                return Json("Some error message");
            }
}

With the model I'm using the Upload Component looks something like this:

 

export class UploadComponent {
  public progress: number;
  public message: string;
  constructor(private http: HttpClient) { }

  upload(files) {
    if (files.length === 0) {
      return;
    }
    const formData = new FormData();

    for (let file of files) {
      formData.append(file.name, file);
    }

    const uploadReq = new HttpRequest('POST', `api/upload`, formData)
    this.http.request(uploadReq).subscribe()
  }
}

 

As I said above it's only half baked at this point and I still need to figure out how I'll be passing it back to Angular and reassembling it on the other side.

 

 

[Dimiter Madjarov]

Hello Ron,

If I understand correctly, you would like to display the uploaded files in a Grid. If that is the case, passing the binary data itself to the Grid component is not necessary, but only the guid that is assigned to it. It could be used in a cell template in the Grid in order to construct a download link.

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

Same approach could be applied when displaying the image files inside the cells.

Regards,
Dimiter Madjarov
Progress Telerik

[Satya]

Hi Dimiter Madjarov,

I am using kendo uploader I have an api to save the uploaded data, but unfortunately I am unable to complete my task with this. can you any working example with the real post api with file format restrictions.

Thanks

[Yanmario]

Hi Satya,

To use the Upload component for uploading files, the saveUrl and removeUrl API endpoints should be provided for the upload and remove requests.

You can take a look at our  Kendo UI for Angular Upload component with ASP.NET Core 3.0 example:

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/aspnetcore-upload

The following YouTube tutorial might be found helpful as well:

https://www.youtube.com/watch?v=rdu1QatsVOU

Hope this helps.

Regards,
Yanmario Menev
Progress Telerik