Как добавить Dropzone. js полезную нагрузку в ViewModel и затем передать в контроллер - PullRequest
Новая
       9

Как добавить Dropzone. js полезную нагрузку в ViewModel и затем передать в контроллер

0 голосов
/ 18 апреля 2020

Я использую DropZone. JS для обработки загрузок моего изображения в моем частичном представлении и хочу перехватить данные изображения, добавить их в модель и передать модель в контроллер. Я вижу способы отправки данных формы и использования контроллера для их захвата, но я бы предпочел это в модели, чтобы я мог добавлять метаданные и более легко обрабатывать их.

В настоящее время я не могу понять, как заполнить параметр файла моей модели и ввести его как ноль в контроллере

Upload.cs html

    <form action="@Url.Action("UploadImage", "Listings", new { Model_Name = "K-1" })" class="dropzone" id="image_upload_dropzone">
    </form>

    <button class="btn btn-primary" id="removeAllImages" type="button" style="margin-right: 5px;margin-left: 5px;background-color: rgba(0,123,255,0);color: rgb(3,3,3);">
        Remove Images
    </button>

    <input type="button" value="Upload" id="upload_images" class="btn btn-primary" />
</div>

<script type="text/javascript">

    //Dropzone Configuration
    //Dropzone.autoDiscover = false;

    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        // Manual dropzone init
        $("#image_upload_dropzone").dropzone({
            init: function () {
                var $this = this;
                $("button#delete_images").click(function () {
                    $this.removeAllFiles(true);
                });
            },
            paramName: "files",
            addRemoveLinks: true,
            maxFilesize: 5, // mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: "image/*",
            uploadMultiple: true,
            autoProcessQueue: false,
        });
    });

    $('#upload_images').click(function () {
        var myDropzone = Dropzone.forElement("#image_upload_dropzone");
        myDropzone.processQueue();
    });

</script>

ViewModel .cs 

    {
        public int Listing_ID { get; set; }
        public IFormFile[] Files { get; set; }
        public string Model_Name { get; set; }

    }

Controller.cs 

        public async Task<IActionResult> UploadImage(UploadViewModel model)
        {
            var filePath = Path.GetTempFileName();

            string ext = System.IO.Path.GetExtension(model.File.FileName);
            string randomPath = Path.GetFileNameWithoutExtension(Path.GetRandomFileName());

            string prefix = model.Model_Name;

            if (prefix == null)
            {
                prefix = "";
            }

            // K-22_1a2b3c4d.png
            string newPath = prefix + "_" + randomPath + ext;

            using (var stream = model.File.OpenReadStream())
            {
                await bunnyCDN.UploadAsync(stream, "/folder/" + newPath);
            }

            return RedirectToAction("Index");
        }

1 Ответ

0 голосов
/ 20 апреля 2020

Если у вас есть опция uploadMultiple, установленная на true, тогда Dropzone добавит [] к paramName. Вы можете вызвать метод, который возвращает параметр «Файлы» для параметра paramName, как показано ниже: 

<script type="text/javascript">

    function myFileParam() {
       return "Files";
    }
    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        // Manual dropzone init
        $("#image_upload_dropzone").dropzone({
            init: function () {
                var $this = this;
                $("button#delete_images").click(function () {
                    $this.removeAllFiles(true);
                });
            },
            paramName: myFileParam,
            addRemoveLinks: true,
            maxFilesize: 5, // mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: "image/*",
            uploadMultiple: true,
            autoProcessQueue: false,
        });
    });

    $('#upload_images').click(function () {
        var myDropzone = Dropzone.forElement("#image_upload_dropzone");
        myDropzone.processQueue();
    });

</script>

Результат: enter image description here

...