解决：blueimp / jQuery-File-Upload无法与ASP.NET Core Razor Pages一起使用

Question

I develop a website with asp.net core 2.1 razor pages, where the user can drop several media files to the site or selected the files with click on the button to upload the files to the server. Then the files are shown on the page with name and other attributes. Each file have an delete button to delete the upload.

After all files are selected or dropped, the user press the submit button and all files will be submitted together with several formfields to the server.

The problem is now, that no files were send to the server. The display on the web site with the thumbs are correct, but after submit HttpContext.Request.Form.Files is empty.

After I have added the option '''replaceFileInput: false''', the files are added by the button are submitted correctly.

If the user drag & drop files, the files were not added to the input-object. After the submit, this files were not submitted to the server.

A demo of the website are hosted on github: https://github.com/IsibisiCoder/Asp.Net-Core-with-blueimp-jQuery-File-Upload

index.cshtml:

<form id="fileupload" method="POST" data-url="Index" enctype="multipart/form-data">
<span class="btn btn-primary fileinput-button upload-button">
    <span>add files...</span>
    <input type="file" name="files" multiple>
</span>
<span class="fileupload-process"></span>

<!-- The table listing the files available for upload/download -->
<div id="upload-table-hide">
    <div id="upload-table table-wrapper">
        <div id="table-scroll">
            <table role="presentation" class="table table-striped"><tbody id="uploadedfiles" class="files"></tbody></table>
        </div>
    </div>
</div>
<div class="form-row">
    <div class="form-group col-sm-6">
        <input asp-for="Value1" class="form-control" placeholder="Parameter Formdata 1" />
        <span asp-validation-for="Value1" class="text-danger"></span>
    </div>
    <div class="form-group col-sm-6">
        <input asp-for="Value2" class="form-control" placeholder="Parameter Formdata 2" />
        <span asp-validation-for="Value2" class="text-danger"></span>
    </div>
</div>

<div class="form-row">
    <div class="col-sm-auto">
        <button id="upload-button" type="submit" class="btn btn-primary upload-button start">
            <span>upload</span>
        </button>
    </div>
</div>
</form>

@section Scripts{

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade show">
    <td>
        <span class="preview"></span>
    </td>
    <td>
        <p class="name">{%=file.name%}</p>
        <strong class="error text-danger"></strong>
    </td>
    <td>
        <p class="size">Processing...</p>
    </td>
    <td>
        {% if (!i) { %}
        <button class="btn btn-warning upload-button cancel">
            <span>Löschen</span>
        </button>
        {% } %}
    </td>
</tr>
{% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade show">
    <td>
        <span class="preview"></span>
    </td>
    <td>
        <p class="name">
            <span>{%=file.name%}</span>
        </p>
        {% if (file.error) { %}
        <div><span class="label label-danger">Error</span> {%=file.error%}</div>
        {% } %}
    </td>
    <td>
        <span class="size">{%=o.formatFileSize(file.size)%}</span>
    </td>
    <td>
        <p>&#9989;</p>
    </td>
</tr>
{% } %}
</script>

<script type="text/javascript">
    $(function (e, data) {
        'use strict';
        // Initialize the jQuery File Upload widget:
        $('#fileupload').fileupload({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            previewMaxWidth: 100000,
            autoUpload: false,
            replaceFileInput: false,
            dataType: 'json',
            singleFileUploads: false,
            multipart: true,
            limitMultiFileUploadSize: 10000,
            paramName: 'files'
        });
    });
</script>
}

index.cshtml.cs

public class IndexModel : PageModel
{
    [BindProperty]
    public string Value1 { get; set; }

    [BindProperty]
    public string Value2 { get; set; }

    public void OnGet()
    {

    }

    [HttpPost]
    public IActionResult OnPost(List<IFormFile> files)
    {
        // with parameter or httpcontext or both
        var files2 = HttpContext.Request.Form.Files;
        return Page();
    }
}

I have found a project with asp.net mvc on https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc , that works fine, the request.files are filled. But with asp.net core the source doesn't work.

(Update) I have change the description and added a demo to github.

(Update) I have solved the problem. See my separate post from today.

Answer 1

您缺少表单的data-url属性，请将以下属性添加到表单。

data-url="/"

Answer 2

Check the difference from your code and steps below:

1. Create Asp.Net Core Razor Page 2.1 template

2. Add Code below to Index.cshtml

    <form id="fileupload" method="POST" enctype="multipart/form-data"> <span class="btn btn-primary fileinput-button upload-button"> <span>add files...</span> <input type="file" name="files[]" multiple> </span> <span class="fileupload-process"></span> <!-- The table listing the files available for upload/download --> <div id="upload-table-hide"> <div id="upload-table table-wrapper"> <div id="table-scroll"> <table role="presentation" class="table table-striped"><tbody id="uploadedfiles" class="files"></tbody></table> </div> </div> </div> <div class="form-row"> <div class="col-sm-auto"> <button id="upload-button" type="submit" class="btn btn-primary upload-button start"> <span>upload</span> </button> </div> </div> </form> @section Scripts{ <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.32.0/js/jquery.fileupload.js"></script> <script type="text/javascript"> $(function (e, data) { 'use strict'; // Initialize the jQuery File Upload widget: $('#fileupload').fileupload({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, previewMaxWidth: 100000000 }); }); </script> } 

3. PageModel

    public class IndexModel : PageModel { public void OnGet() { } public void OnPost() { var files = HttpContext.Request.Form.Files; } } 

Answer 3

I have solved the problem.

First: All files can not submitted together. For each file the post method will be called. There are two problems in my code: The submit button have to placed into a div-tag with the css-class "fileupload-buttonbar".

<div class="fileupload-buttonbar">
  <button type="submit" class="btn btn-primary start">
    <span>upload</span>
  </button>
</div>

The second problem are: I use the upload-template of the blueimp-framework and it is not allowed to submit single files. There are only one submit button for all files. So I remove the start button in the upload-template. This do not work, because the blueimp-framework used this start button internal.

The solution are to hide the element:

<td>
    {% if (!i && !o.options.autoUpload) { %}
      <button class="btn btn-primary start" disabled style="display: none">
        <span>Start</span>
      </button>
    {% } %}
    {% if (!i) { %}
    <button class="btn btn-warning upload-button cancel">
      <span>Cancel</span>
    </button>
    {% } %}
</td>

My solution can be found at https://github.com/IsibisiCoder/Asp.Net-Core-with-blueimp-jQuery-File-Upload

I have found another solution with asp.net core 2.2 mvc at https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc