locked
Dropzone doesnt pass files RRS feed

  • Question

  • User-2104573357 posted

    Hi,

    been on this for hours... I'm trying to Upload multiple pictures with dropzone. My Upload Action in controller gets called when dragging in a picture, but doesn't get passed any files in "List<IFormFile> files".

    Here is my controller action method & cshtml form:

    public async Task<IActionResult> UploadData(List<IFormFile> files)
            {
                ...
    
                return RedirectToAction("DownloadFile", "Download");
            }
    
    
    <form id="upload-widget" method="post" action="@Url.Action("UploadData", "Home")" class="dropzone dz-clickable">
        <div class="dz-message">
            <p>Drop photos or click to upload.</p>
        </div>
    </form>

    Would appreciate your help on this!

    Friday, April 3, 2020 8:36 AM

Answers

  • User711641945 posted

    Hi emilector,

    Here is a workaround you could refer:

    View:

    <form asp-controller="Home" asp-action="UploadData" asp-antiforgery="false"
            class="dropzone" id="UploadForm" enctype="multipart/form-data">
        <div class="fallback">
            <input name="file" type="file" multiple />
            <input type="submit" value="Upload" />
        </div>
    </form>
    @section Scripts
    {
    <script src="~/lib/dropzone-5.7.0/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="~/lib/dropzone-5.7.0/dist/min/dropzone.min.css" />
    <link rel="stylesheet" href="~/lib/dropzone-5.7.0/dist/min/basic.min.css" />
    <script>
        Dropzone.options.UploadForm = {
            uploadMultiple: true,  
    paramName: () => "files" //paramName: function () { "files" } }; </script> }

    Controller:

    [HttpPost]
    public IActionResult UploadData(List<IFormFile> files)
    { 
        //do your stuff...
        return Ok();
    }

    Result:

    Reference:

    https://stackoverflow.com/a/50320576/11398810

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 6, 2020 2:39 AM

All replies

  • User711641945 posted

    Hi emilector,

    Could you share more details about your code?

    For your view:

    <form enctype="multipart/form-data">
    <input asp-for="..." type="file" name="files" multiple>
    </form>

    For your controller(the name should be matched):

    public async Task<IActionResult> UploadData(List<IFormFile> files)

    Best Regards,

    Rena

    Friday, April 3, 2020 9:47 AM
  • User-2104573357 posted

    I think the view you posted is just a standard upload form, am I wrong? I need a form with dropzone class...

     The rest of the code inside of the controller should be irrelevant, since the files don't get passed in the first place. Tested with breakpoint.

    Other than that I just link my dropzone.js, that works just fine.

    <link rel="stylesheet" type="text/css" href="~/dropzone/dist/basic.css">
    <link rel="stylesheet" href="~/dropzone/dist/dropzone.css">
    <script src="~/dropzone/dist/dropzone.js"></script>

    Thank you,

    emile

    Friday, April 3, 2020 9:55 AM
  • User-474980206 posted

    Dropzone uploads the files to the server when selected. When the form post happens there are no files because they have already been uploaded. 

    Friday, April 3, 2020 2:33 PM
  • User-2104573357 posted

    Hmm where exactly would they be uploaded to?

    Friday, April 3, 2020 2:41 PM
  • User-474980206 posted

    you specified the url in the dropzone config, if not specified, it uses the form action url. 

    $("div#myId").dropzone({ url: "/file/post" });

    when a file is selected, its posted to this url.   if you select two files, its called twice. when the user hits form submit there are no files as they have been uploaded already.

    Friday, April 3, 2020 3:09 PM
  • User711641945 posted

    Hi emilector,

    Here is a workaround you could refer:

    View:

    <form asp-controller="Home" asp-action="UploadData" asp-antiforgery="false"
            class="dropzone" id="UploadForm" enctype="multipart/form-data">
        <div class="fallback">
            <input name="file" type="file" multiple />
            <input type="submit" value="Upload" />
        </div>
    </form>
    @section Scripts
    {
    <script src="~/lib/dropzone-5.7.0/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="~/lib/dropzone-5.7.0/dist/min/dropzone.min.css" />
    <link rel="stylesheet" href="~/lib/dropzone-5.7.0/dist/min/basic.min.css" />
    <script>
        Dropzone.options.UploadForm = {
            uploadMultiple: true,  
    paramName: () => "files" //paramName: function () { "files" } }; </script> }

    Controller:

    [HttpPost]
    public IActionResult UploadData(List<IFormFile> files)
    { 
        //do your stuff...
        return Ok();
    }

    Result:

    Reference:

    https://stackoverflow.com/a/50320576/11398810

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 6, 2020 2:39 AM
  • User-2104573357 posted

    In the end I solved it like this:

    <form id="upload-widget" method="post" action="@Url.Action("UploadFiles", "FileUpload")" class="dropzone dz-clickable">
            <div class="dz-message">
                <p>Drop photos or click to upload.</p>
            </div>
    </form>
    public async Task<ActionResult> UploadFiles()
            {
                // Methode wird für jedes pic aufgerufen
    
                var files = HttpContext.Request.Form.Files;
    
                System.Security.Claims.ClaimsPrincipal currentUser = this.User;
                string uname = currentUser.Identity.Name;
    
                // S/C
                string folderpath = @"D:\Uploaded_Files\" + uname;
                //string folderpath = @"PATH" + uname;
    
                Random rand = new Random();
                int r = rand.Next(0, 10000);
    
                while (Directory.Exists(folderpath + @"\" + r + ".jpg"))
                    r = rand.Next(0, 10000);
    
                string filePath = folderpath + @"\" + r + ".jpg";
    
                if (files[0].Length > 0)
                {     
                    using (var fileStream = new FileStream(filePath, FileMode.Create))
                    {
                        await files[0].CopyToAsync(fileStream).ConfigureAwait(false);
                        fileStream.Close();
                    }
                }
    
                return Json("file uploaded successfully");
            }
    

    Friday, April 10, 2020 3:25 PM