MVC - Open File Upload Dialog On Click (vb.net)

Question

I want when the user click on <a> , to open file dialog, at the server side, and then after complete, to return "ok" message to the user. I thought on this, on the view:

<a onclick="uploadFile()">Edit</a>

The Javascript:

function uploadFile() {

            //Call the controller, open file dialog at server side, and 
            //return message to the user.
            //alert(responseMessage)

        }

The method:

Function OpenFileDialog() As ActionResult

            //open file dialog, upload the file
            //Dim message = success or not

            Return Content(message)
        End Function

how i open file upload dialog box in vb.net at server side?

Answer 1

There is no way to pop a file dialog at a whim. This will only happen as a result of clicking a file input. That said, you can catch the click event on your link and then click the file input with JavaScript. Then, you just need to handle the change event on the file input (ie the user selected one or more files) to fire your AJAX request with the files included. However, uploading files via AJAX requires the File API which is part of HTML5. That means that this will only work in modern browsers (IE10+). To upload files in previous versions of IE without a traditional form post that refreshes the page, you have to use a Flash or Java control created for the purposes of uploading files asynchronously. That's beyond the scope of this answer though.

 document.getElementById('FileUploadLink').addEventListener('click', function (e) { e.preventDefault(); document.getElementById('FileUploadInput').click(); }); document.getElementById('FileUploadInput').addEventListener('change', function () { var fileInput = this; var formData = new FormData(); for (var i = 0; i < fileInput.files.length; i++) { var file = fileInput.files[i]; formData.append('upload', file, file.name); } var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload/handler', true); xhr.onload = function () { if (xhr.status === 200) { // file(s) uploaded successfully } else { // error uploading file(s) } }; // Commented to not send a real AJAX request for this example // Uncomment in your real code to actually send the request // xhr.send(formData); });

 <a id="FileUploadLink" href="#">Upload File</a> <input type="file" id="FileUploadInput" style="display:none">

Then, server-side, your MVC action would look like:

public ActionResult UploadFile(HttpPostedFileBase upload)

Notice that the name of the action param lines up with the string passed to formData.append . That's important.

To do a multiple file upload, you would just need to change a few things:

1. Add multiple to the file input:

    <input type="file" id="FileUploadInput" style="display:none" multiple>

2. Change the formData.append line to make the name an array:

    formData.append('uploads[]', file, file.name);

3. Change the action method signature to accept a List<HttpPostedFileBase> :

    public ActionResult UploadFiles(List<HttpPostedFileBase> uploads)