Grid in Popup mode, MVC, with an upload control

9 posts, 0 answers
  1. Tyrel
    Tyrel avatar
    9 posts
    Member since:
    Feb 2013

    Posted 23 Mar 2013 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 27 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Tyrel
    Tyrel avatar
    9 posts
    Member since:
    Feb 2013

    Posted 27 Mar 2013 Link to this post

    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.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 29 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Tyrel
    Tyrel avatar
    9 posts
    Member since:
    Feb 2013

    Posted 01 Apr 2013 Link to this post

    Thanks.  I will take a look.
  7. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 26 Jul Link to this post

    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?

  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 29 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  9. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 17 Aug in reply to Dimiter Madjarov Link to this post

    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

  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 18 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready