0

I have tried to find a good example with HTML/JavaScript/C# code to provide instruction on uploading only one file to the server for saving it to a directory on the server. My code gives me my variable, 'file', as null when I debug it.

HTML form:

<form id="uploadForm" method="post" data-dojo-type="dijit/form/Form" enctype="multipart/form-data">
    <input
        id="fileUploadInput"
        type="file"
        name="fileUploadInput"
    >
    <br />
    <br />
    <button
        id="fileUploadButton"
        data-dojo-attach-point="fileUploadButton"
        onClick="click"
    >
    Upload
    </button>
</form>

Dojo/JavaScript code:

ioIframe.send({
    url: this.proxyPostFile,
    form: "uploadForm",
    method: "POST",
    handleAs: "text",
    // Callback on successful data call:
    load: function (response, ioArgs) {
        return response;
    },
    // Callback on errors
    error: function (response, ioArgs) {
        console.info(response)
    }
});

c# code:

[HttpPost]
public JsonResult Upload(HttpPostedFileBase file)
{
    JsonResult FileData = null;
    if (Request != null)
    {
        try
        {
            if (file!=null && file.ContentLength > 0)
            {
                ... do some stuff with the file
            }
        }
        catch (Exception ex)
        {
            Dictionary<string,string> error = new Dictionary<string,string>();
            error.Add("error", "ERROR:" + ex.Message.ToString());
            FileData = Json(error);
        }
    }
    else
    {
        Dictionary<string,string> callResponse = new Dictionary<string,string>();
        callResponse.Add("filename", "You have not specified a file.");
        FileData = Json(callResponse);
    }
    return FileData;
}

Any thoughts or help would be appreciated.

Thank You

Matthew Dewell
  • 563
  • 7
  • 30
  • Your file input has `name="fileUploadInput"` which does not match the name of the parameter in the method (`file`). They need to match. But the fact that your returning a `JsonResult` suggests you want to use ajax, in which case, refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) - you need to use `FormData` and set the correct ajax options –  Sep 01 '17 at 01:37
  • @StephenMuecke This would work, if I could use jQuery, but unfortunately I'm using Dojo. Thanks though. – Matthew Dewell Sep 01 '17 at 11:31
  • That does not change the fact that your `name` attribute and the method parameter does not match - they need to :) –  Sep 01 '17 at 11:34
  • @StephenMuecke You are correct sir! Sorry, I hadn't gotten a chance to change the id/name to match the C# code. That fixed it. Thank You very much. Could you write an "answer" in this section that shows your "change name" solution, and I can mark it as a an answer to my problem. Thank You. – Matthew Dewell Sep 01 '17 at 11:48

3 Answers3

0

Sorry, I am little confused, I don't know if you are trying to upload a file using ajax or a form. If you are using a form try to put enctype="multipart/form-data" attribute. Hope this helps.

Djordje
  • 437
  • 1
  • 12
  • 24
  • Great suggestion. I was hoping it would work, as I believe it does need to be there, but I still get a null, after I added it. I will edit my post. – Matthew Dewell Aug 31 '17 at 13:45
0

Take a look at this fiddle link. Dojo provides OOTB feature to upload file(s) to a server side (you can pass url like /test.php

http://jsfiddle.net/kolban/e47YU/

If you don't want to pass the server url or if you don't have one, then you need to manually upload the file using dijit.byId("uploader').upload();

bajji
  • 1,271
  • 3
  • 15
  • 37
0

Your generating the file input with name="fileUploadInput" but your parameter in the POST method is named file - they need to match in order for the parameter in the POST method to bind to the value of the form control.

Change the input to match the parameter

<input name="file" ... />