Ask user to enter file name while uploading Jquery uploader?

Question

I have below code which is working perfect now. Now I have to change it little bit this for asking user to enter file name before they upload to the server? How can we do that?

      <span class="btn btn-primary fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>@(i18n_Models_Image.AddImages + "...")</span>
                <input id="fileupload" type="file" name="files[]"  accept="image/*" >

            </span>

      $(document).ready(function() {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '../admin/image/uploadfiles',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            success: function(data, status, xhr) {
                window.location = data.url;
            },
            error: function(xhr, textStatus, errorThrown) {
                if (errorThrown === 'abort') {
                    alert('@i18n_Models_Image.UploadCancelled');
                }
            }
        }).on('fileuploadprogressall', function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        }); });

Answer 1

please, take a look on two examples below:

Examples for jQuery-File-Upload 5.9

1) Case when you are using auto uploading

Model:

public class MyModel
{
    public HttpPostedFileBase MyFile { get; set; }
}

View:

  @model MyModel

  <form>
       <input type="text" name="FileName" />
       <div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-auto-upload", type = "file" })</div>
  </form>

JavaScript:

<script type="text/javascript">

    var jqXHRData;

    $(document).ready(function () {        
        initAutoFileUpload();          
    });       

    function initAutoFileUpload() {
        'use strict';

        $('#fu-my-auto-upload').fileupload({
            autoUpload: true,
            url: '/File/UploadFile',
            dataType: 'json',
            add: function (e, data) {
                var jqXHR = data.submit()
                    .success(function (data, textStatus, jqXHR) {

                    })
                    .error(function (data, textStatus, errorThrown) {
                        if (typeof (data) != 'undefined' || typeof (textStatus) != 'undefined' || typeof (errorThrown) != 'undefined') {
                            alert(textStatus + errorThrown + data);
                        }
                    });
            },
            fail: function (event, data) {
                if (data.files[0].error) {
                    alert(data.files[0].error);
                }
            }
        });
    }       

</script>

Controller:

    [HttpPost]
    public virtual ActionResult UploadFile(string fileName)
    {
        HttpPostedFileBase myFile = Request.Files["MyFile"];

        //Save file

        return Json(new { isUploaded = true });
    }

2) Case when AutoUploading = false

Model:

public class MyModel
{
    public HttpPostedFileBase MyFile { get; set; }
}

View:

     @model MyModel

    <form>
        <input type="text" name="FileName" />
        <div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-simple-upload", type = "file" }) &nbsp;<a href="#" id="hl-start-upload">Start upload</a> </div>
    </form>

JavaScript:

<script type="text/javascript">

    var jqXHRData;     

    $(document).ready(function () {
        initSimpleFileUpload();

        $("#hl-start-upload").on('click', function (e) {       

            if (jqXHRData) {
                jqXHRData.submit();
            }
            return false;
        });

    });

    function initSimpleFileUpload() {
        'use strict';

        $('#fu-my-simple-upload').fileupload({
            url: '/File/UploadFile',
            dataType: 'json',
            add: function (e, data) {                    
                jqXHRData = data
            },
            done: function (event, data) {

            },
            fail: function (event, data) {
                if (data.files[0].error) {
                    alert(data.files[0].error);
                }
            }
        });
    }
</script>

Controller:

    [HttpPost]
    public virtual ActionResult UploadFile(string fileName)
    {
        HttpPostedFileBase myFile = Request.Files["MyFile"];

        //Save file

        return Json(new { isUploaded = true });
    }