Get the selected file after browsing file uploader in MVC 4

Question

I am using ASP .Net MVC 4.0, RazorView, C#, VS2010.

I have a html input type='file'. The task is to get the file copied to a certain directory, while user will select the file from file browser.

If i get the full file path, that could solve the problem. But I failed after googling 3+ hours.

If I get the file with jQuery / Javascript and send with ajax to serverside, then it could be solved as well.

I failed both way. Here is some of my code:

function checkFileType() {
    var input = document.getElementById('IDbtnUpload');
    var selected_file = document.getElementById('IDbtnUpload').files[0];

    if (input.value != "") {
        document.getElementById('lblFile').innerHTML = "";
        var file = input.value;
        document.getElementById('hiddenFileName').value = file.toString();
        if ((file.lastIndexOf('xls') == file.length - 3) || (file.lastIndexOf('xlsx') == file.length - 4) || (file.lastIndexOf('csv') == file.length - 3)) {
            alert(file.toString());
            var url = '@Url.Action("ProcessExcel", "NeuGesellschaft")';
            $.post(url, { x: selected_file }, function (data) {
                //$('#textareaReadonly').val(data);
                alert(data);
            });
        }
        else {
            document.getElementById('lblFile').innerHTML = "Incorrect File Format. Please browse an excel/csv file!";
            alert('Incorrect File Format. Please upload an excel/csv file!');
        }
    }
}

I tried to use the $.post to send the file to my server side method.

If anyone suggest how to send file or how to get the full filename (any of this will be appriciated), that will help me.

EDIT 1:

    public string ProcessExcel(object formData)
    {

        return "";
    }

What wil be the data type of my parameter?

Have you try the solution @ http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — ysrb, Jan 15 '14 at 10:13

score 1 · Answer 1 · answered Jan 15 '14 at 12:16

1

$.post(url, { x: selected_file }, function (data) { will just send {x : "[object FileList]"} because files[0] will return FileList. If you want to send file content you need to use FormData for example(with out jQuery):

var fileInputNode = document.getElementById('IDbtnUpload');
var file = fileInputNode.files[0];
var url = '@Url.Action("ProcessExcel", "NeuGesellschaft")';
var xhr = new XMLHttpRequest();
var formData = new window.FormData();

formData.append(fileInputNode.name, file);
xhr.open('POST', url);
xhr.send(formData);

Also you can use jQuery File Upload plugin for file uploading.

answered Jan 15 '14 at 12:16

Alex

11,115
12
51
64

how will I receive the formData in my processExcel method? i am editing my question with processExcelMethod. please see again and tell me about the parameter type. Thanks. – Abdur Rahim Jan 15 '14 at 12:35
You will receive it as binary file content(like submit) as param with `fileInputNode.name`. – Alex Jan 15 '14 at 12:39
This is quite unclear to me. I have to recieve the `formData`. and get the file in my server side method. what data type I will use? `object`? If I use `object`, then how to get the file from this object? – Abdur Rahim Jan 15 '14 at 12:45
`FormData` can't influence on server-side type, you can receive `FormData` as you recieve submited form in browser. This is the same. – Alex Jan 15 '14 at 12:51
so, i need not to pass any parameter for this `formData`? – Abdur Rahim Jan 15 '14 at 13:32
What parametre? In code file appends to `formData` object via `formData.append(fileInputNode.name, file);` and sending to server. You can get file on server side by param which name is like `fileInputNode.name`. – Alex Jan 15 '14 at 13:40

Get the selected file after browsing file uploader in MVC 4

1 Answers1