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

kendo-angular-upload

5 Answers 248 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 07 Jun 2018, 08:50 PM

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
Telerik team
commented on 28 Apr 2021, 06:50 AM

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.

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 08 Jun 2018, 06:17 AM
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
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
Ron
Top achievements
Rank 1
Iron
answered on 11 Jun 2018, 02:34 PM

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.

 

 

0
Dimiter Madjarov
Telerik team
answered on 12 Jun 2018, 05:40 AM
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
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
Satya
Top achievements
Rank 1
answered on 26 Apr 2021, 11:23 AM

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


0
Yanmario
Telerik team
answered on 28 Apr 2021, 05:15 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Patrick
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Ron
Top achievements
Rank 1
Iron
Satya
Top achievements
Rank 1
Yanmario
Telerik team
Share this question
or