CODEWITHSUNDEEP
javascriptasp.net-coredropzone.jsrazor-pages
dobestar
dobestar

Reputation: 331

Cannot get Dropzone.js to send additional data

I'm using Dropzone.js with .net core 3.1. I can get it to call my controller action, bt I cannot get it to send any additional data with the request.

This is my form:

<form action="/api/photos/"
          class="dropzone needsclick dz-clickable"
          id="image-upload"
          method="post">
        <input type="hidden" name="eventId" value="1"/>
        <div class="dz-message needsclick">
            <span class="note needsclick">
                Drop files here or click to upload.
            </span>
        </div>
    </form>

This is my Javascript:

<script>
            Dropzone.options.imageUpload = {
                dictDefaultMessage: "Drop files here or Click to Upload",
                addRemoveLinks: true, // Allows for cancellation of file upload and remove thumbnail
                init: function () {
                myDropzone = this;
                    myDropzone.on("sending", function (file, xhr, data) {
                data.append("message", "hello world");
                        console.log(data);
                    });
                    myDropzone.on("success", function (file, response) {
                console.log("Success");
                        myDropzone.removeFile(file);
                    });
                }
            };
    </script>

This is my controller endpoint

public async Task<IActionResult> PostPhoto(List<IFormFile> file)
        {
            ..code removed..
        }

So as you can see I have a hidden field in the form, which should have sent the data along with the request, and I also have tried to append a value to the form data via the JS, but either it's not sending or I can't find it. I've looked in the network panel of dev tools and can see the images being sent but nothing else. Or how would I find it in the controller if it was being sent? I've spent ages on this, which is slightly annoying, please help!

Upvotes: 1

Views: 862

Answers (1)

Denis Stukalov
Denis Stukalov

Reputation: 1242

You can add eventId to url parameter in form action, like this <form action="/api/photos/1"

Then update you controller action:

    [HttpPost]
    [Route("api/photos/{eventId:int}")]
    public async Task<IActionResult> PostPhoto([FromRoute] int eventId, List<IFormFile> file)
    {
        ..code removed..
    }

Another solution with using sending event, like you do. But you need to add param to you contoller action. You append message in js, so your code will be like this:

    public async Task<IActionResult> PostPhoto([FromForm]string message, List<IFormFile> file)
    {
        ..code removed..
    }

Upvotes: 1

Related Questions