Grid in Popup mode, MVC, with an upload control

[Tyrel]

I have searched far and wide and not found anything that will help me get what I am trying to do.  I modified an example to use the grid in popup, non-batch mode and that works.  What I am missing is that I need to add a upload input to the popup dialog so that I can select a single PDF file and pass that to the MVC action.

Before I was sending the user to a create page and there I was using the usual <input type="file"> with a model object using HttpPostedFileBase to bind to the input.  That works, but I want to change all my code to use popups to create a better user experience.

The problem is that most of the examples either put the Kendo upload widget inline or the popup examples don't work with an MVC action (at least I have not been able to get it to work).

Any help would be appreciated.  A single good example is normally worth gold, enough to get one moving forward again.

Thanks.

[Daniel]

Hello Tyrel,

The file cannot be sent via Ajax. You should use asynchronous upload instead to save the file. Additional information that may be needed on the server or on the client can be sent as metadata. I attached the project with a basic implementation added.

Regards,
Daniel
the Telerik team

[Tyrel]

Thanks.  The basic idea works.  I just have to figure out how to match up a newly uploaded file with a newly created object.  Seems that the SavePdf gets called first (with the ID null at that point) and then the create method gets called when you click OK.   I can see that this would work well for an edit.  I store the PDF that I upload in a column in the database.  I guess something else to consider would be to store it in the session and then use it when you create the record.

[Daniel]

Hello Tyrel,

You could create a temporary ID for the new items and send it back to the client. Check the attached updated project.

Regards,
Daniel
the Telerik team

[Tyrel]

Thanks.  I will take a look.

[Dan]

Not a great solution - if the user is editing a record and hits cancel after uploading a new file, the old file will already be overwritten.  At minimum you would want to save every file with a unique ID rather than using the the product ID to avoid the issue - and then the product record would need to store the file ID.  With either solution you end up with orphaned files.  And the problem with cleaning up these orphans is that at any given moment you don't know which ones are true orphans, and which ones are about to be associated with a record as part of an active edit/save.  And it also just seems messy to have to deal with cleanup at all.

Could someone please enlighten me as to why the HTML5 file type input can not be supported like the other standard inputs in a KendoUI ajax grid?

[Dimiter Madjarov]

Hello Dan,

The reason for this is that the Grid posts the data in a regular XHR request, while the Upload widget posts the files with a FormData request.

Let me know if you need additional assistance regarding the case.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Dan]

Dimiter,

My question was actually not about the upload widget, it was about the lack of support for a standard HTML5 file type input, which obviously is not tied to any request type, it's simply an HTML tag.

-Dan

[Dimiter Madjarov]

Hello Dan,

I am not sure that I understand the question. When editing a record in an Ajax Grid, the data is submitted via plain XMLHttpRequest, not FormData one, which is needed for uploading a file via Ajax. 

Regards,
Dimiter Madjarov
Telerik by Progress