Saya menggunakan html berikut untuk membuat dropzone. Dan pengontrol saya menerima IFormFile dan FileViewModel. Namun dropzone tidak mengikat tag input saya yang menerima nama orang ke viewModel pada pengiriman formulir.

Saya juga sampai pada resolusi bahwa Dropzone.js adalah kontrol Ajax yang sangat tua yang disiapkan untuk aplikasi satu halaman.

HTML:

@model Dropzone.Models.FileViewModel
    <form action="/Account/Create" enctype="multipart/form-data" method="POST">
        <input type="text" id ="Username" name ="Username" asp-for="Model.Name" />
        <div class="dropzone" id="my-dropzone" name="mainFileUploader">
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </form>
    <div>
        <button type="submit" id="submit-all"> upload </button>
    </div>

Permintaan:

<script>
    Dropzone.options.myDropzone = {
        url: "/Account/Create",
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        acceptedFiles: "image/*",

        init: function () {

            var submitButton = document.querySelector("#submit-all");
            var wrapperThis = this;

            submitButton.addEventListener("click", function () {
                wrapperThis.processQueue();
            });

            this.on("addedfile", function (file) {

                // Create the remove button
                var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                // Listen to the click event
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();

                    // Remove the file preview.
                    wrapperThis.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                });

                // Add the button to the file preview element.
                file.previewElement.appendChild(removeButton);
            });

            this.on('sendingmultiple', function (data, xhr, formData) {
                formData.append("Username", $("#Username").val());
            });
        }
    };
</script>
1
Tappas 11 Mei 2021, 09:30

1 menjawab

Jawaban Terbaik

Dropzone tidak mengikat bidang lain ke model tampilan Asp.Net Core

Untuk menambahkan bidang lain dengan file unggahan, Anda dapat menggunakan acara sending untuk menambahkan nilai bidang dalam objek formData, alih-alih peristiwa sendingmultiple.

Periksa sampel berikut:

public class FileViewModel
{
    public string Name { get; set; }
    public IFormFile File { get; set; }
    public List<IFormFile> Files { get; set; }
}

Pengontrol:

    public IActionResult UploadFile()
    {
        FileViewModel model = new FileViewModel() { Name = "new File" };
        return View(model);
    }

    [HttpPost]
    public IActionResult UploadFile(FileViewModel fileViewModel, List<IFormFile> files)
    {
        try
        {
            if (files.Count > 0)
            {
                //string folderRoot = Path.Combine(_environment.ContentRootPath, "Uploads");
                //string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);
                //filePath = Path.Combine(folderRoot, filePath);
                //using (var stream = new FileStream(filePath, FileMode.Create))
                //{
                //    await file.CopyToAsync(stream);
                //}
            }
            return Ok(new { success = true, message = "File Uploaded" });
        }
        catch (Exception)
        {
            return BadRequest(new { success = false, message = "Error file failed to upload" });
        }
    }

Lihat Halaman:

@model WebApplication6.Models.FileViewModel

@{
    ViewData["Title"] = "UploadFile";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>UploadFile</h1>
  
<form asp-action="UploadFile" enctype="multipart/form-data" method="POST">
    <div class="form-group">
        @*<label asp-for="Name" class="control-label"></label>
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>*@
        <input type="text" asp-for="Name" />
        <div class="dropzone" id="dropzone-form" name="mainFileUploader">
            <div class="fallback">
                <input asp-for="File" type="file" multiple />
            </div>
        </div>
    </div>
    <div class="form-group">
        <button type="button" id="submit-all"> upload </button>
    </div>
</form>
  

Tambahkan skrip JQuery berikut:

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <link rel="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>

    <script type="text/javascript">
        Dropzone.options.dropzoneForm = {
            url: "/Test/UploadFile",
            paramName: "file", 
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",
            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on("addedfile", function (file) {

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                    });

                    // Add the button to the file preview element.
                    file.previewElement.appendChild(removeButton);
                });
                this.on("sending", function (file, response, formData) {
                    formData.append("Name", $("#Name").val());
                    formData.append("Files", file); 
                });
                //this.on('sendingmultiple', function (data, xhr, formData) {
                //    formData.append("Name", $("#Name").val());
                //});
            }
        };
    </script>
}

Hasilnya seperti ini:

enter image description here

0
Zhi Lv 12 Mei 2021, 07:00