MVC Upload control

Question

I am developing a MVC3 (razorview) application that makes use of the Telerik Controls. So what I am doing is the following:

I want to upload a file, do some validation. If the file is valid I want to give the user the option to upload the file permanently. If it is not valid, the errors are displayed and the user can't upload the file.

This is what I have so far:

Javascript code:

<script type="text/javascript">
         function onSuccess(e) {
    if (jQuery.isEmptyObject(e.response.errors) && jQuery.isEmptyObject(e.response.warnings)) {
            $("#successmsg").show();
        } else {

            var errorMsg = "";
            if (!jQuery.isEmptyObject(e.response.errors)) {
                for (var i = 0; i < e.response.errors.length; i++) {
                    errorMsg = errorMsg + "<li>" + e.response.errors[i] + "</li>";
                }
            }
            if (errorMsg != "") {
                var strErrorContent = $("#errormsg_template").html();
                $("#errormsg").html(strErrorContent.replace("{0}", errorMsg));
                $("#errormsg").show();
            }
        }
    }

Telerik component in view:

<p>
    @Html.Telerik().Upload().Name("file_upload").Multiple(false).Async(settings =>
   {
       settings.AutoUpload(false);
       settings.Save("Test", "Pricat");
   }).ClientEvents(events =>
   {
       events.OnError("onError");
       events.OnSuccess("onSuccess");
       events.OnUpload("onUpload");
   })
</p>

So this code is working for the validation part. The user selects the file, the file is uploaded and some internal processing is validating the message. If the message is valid, a successmessage is shown. If it not valid, the errors are displayed.

How should I proceed to add a button that does the upload (which is basically just another method call), without browsing to the file again?

So the following

settings.Save("Test", "Pricat");

should become

settings.Save("Upload", "Pricat");

So in the controller I have these 2 methods:

public ActionResult Upload(HttpPostedFileBase file_upload) { }
public ActionResult Test(HttpPostedFileBase file_upload) { }

What I had in mind: In javascript, if the e.reponse doesn't contain errors, display a button (ASP.NET button, another upload telerik button, I don't know..). When that button is clicked, it should call the "Upload" method in my controller. I just don't know how to send the file to that method

Does anyone know how to do this? Or any other suggestions are more than welcome!

I hope it is a bit clear.

Thanks in advance.

Best regards.

score 2 · Answer 1 · answered Nov 18 '12 at 05:01

It would be a very bad practice to upload the file twice in the first place. Not only would that use unnecessary bandwidth, you wouldn't really be able to guarantee the contents of the file stayed the same between requests.

Your 'Test' method, if successful, should save the file on the server somewhere in a 'validated but not permanently saved' state, and return a reference to the saved file to the client.

You would then pass that reference back into the 'Upload' action should the user decide to permanently save the file. (thus making it not actually involve a file upload at all)

You'll probably want to purge validated files which were never permanently saved every so often, but that's a small price to pay to do the process correctly.

score 1 · Answer 2 · edited May 23 '17 at 11:56

If you insist on your solution you can upload a file with ASP.MVC using submit button like mentioned here: File Upload ASP.NET MVC 3.0

If you want it to be an AJAX post, you can use jQuery code like this (on onclick button event):

$.ajax('<%= Url.Action("Upload", "MyFileController") %>', {
            async: async,
            data: $('#myFileForm').serialize(),
            success: function() { //something on success },
            error: function() { //something on error },
            type: 'POST',
            timeout: 10000
        }

But similary as @mootinator stated. I would better save the file on server (let's say in some temporary table or folder - or just flag it temporary in db with boolean value), validate it, ask your user if he want to save it permanently -> move the file to permanent folder or flag it permanent ... and in cases that it is not valid file or user refuses to save it permanently I would simply delete that file.

MVC Upload control

2 Answers2