Uploading file AND text to server using Ajax in asp.net mvc

Question

Greeting.

I want to upload an image together with a description to the server by using ajax.

The fileupload works fine, although I can't figure out how to also extract the text entered.

Basically the form looks like this:

<form id="uploader">
     <input id="fileInput" type="file" multiple>
     <input type="text" id="fileText" name="fileText" value=" " />
     <input type="submit" value="Upload file" />
</form>

The script for the upload to the server looks like this:

document.getElementById('uploader').onsubmit = function () {
        var formdata = new FormData(); //FormData object
        var fileInput = document.getElementById('fileInput');
        //Iterating through each files selected in fileInput
        for (i = 0; i < fileInput.files.length; i++) {
            //Appending each file to FormData object
            formdata.append(fileInput.files[i].name, fileInput.files[i]);
        }
        //Creating an XMLHttpRequest and sending
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Controller/Action');
        xhr.send(formdata);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        }
        return false;
    }

And on the serverside, in the controller for the related action:

public JsonResult Upload(){
     for (int i = 0; i < 9; i++){
           HttpPostedFileBase file = Request.Files[i]; //Uploaded files
           //Do stuff with uploaded files
     }            
}

What I've tried:

Changed the Upload method to take in a string parameter named fileText.
Changed the script to also appent the text to the formdata with these two lines inside the for-loop:

var fileText = document.getElementById('fileText');

formdata.append(fileText.value, fileText.value)

I'm probably missing something in both of my trials but I can't seem to figure out what. Please help!

Regards, Chris

Darin Dimitrov · Accepted Answer · 2015-12-28 10:02:10Z

3

Changed the Upload method to take in a string parameter named fileText.

Correct.

Changed the script to also appent the text to the formdata with these two lines inside the for-loop:

Incorrect. You shouldn't be doing this inside the loop because you have only one input field for the text, so you can send only 1 value. So move this code outside of the loop. Also you should specify the correct name when appending to the FormData which must match your controller action parameter name:

var fileText = document.getElementById('fileText');
formdata.append('fileText', fileText.value);

answered Dec 28, 2015 at 10:02

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChrisRun Over a year ago

You were absolutely right. The fault was in the name of the object to append. I totally missed that part. Thank you Darin! PS. My mistake on my post, it was suppose to say OUTSIDE of the loop. So you are correct in that regard aswell, it should of course not be inside the loop.

Collectives™ on Stack Overflow

Uploading file AND text to server using Ajax in asp.net mvc

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related