如何在ASP.NET Core的Dropzone.js中传递运行时计算的参数值？

Got it, let's solve this problem of attaching your dropdown's selected value to each file upload in Dropzone for ASP.NET Core. Here's a step-by-step approach that works reliably:

1. Set Up Your Dropdown (if not already done) #

First, make sure your dropdown has a unique ID so we can easily grab its value with JavaScript. For example:

<select id="fileCategory" class="form-control">
    <option value="1">Documents</option>
    <option value="2">Images</option>
    <option value="3">Videos</option>
</select>

2. Modify Dropzone Configuration to Include the Dropdown Value #

Dropzone has a handy sending event that fires right before a file is sent to the server. We'll use this to dynamically add the dropdown's selected value to the upload request's form data.

Add this JavaScript to your page (make sure it runs after Dropzone is loaded):

// Initialize Dropzone with custom configuration
Dropzone.options.uploader = {
    url: "/YourController/Upload", // Match your asp-action route
    autoProcessQueue: true, // Adjust to false if you want manual upload triggering
    paramName: "files", // This matches the IFormFile[] parameter name in your controller
    sending: function(file, xhr, formData) {
        // Grab the current selected value from the dropdown
        const selectedCategory = document.getElementById("fileCategory").value;
        // Add the value to form data - "CategoryId" is the name your controller will use to receive it
        formData.append("CategoryId", selectedCategory);
    },
    // Optional: Add success/error handlers if needed
    success: function(file, response) {
        console.log("File uploaded successfully:", response);
    }
};

3. Update Your ASP.NET Core Controller Action to Receive the Value #

Now, modify your Upload action to accept both the files and the dropdown value. You can receive it as a separate parameter, and use it alongside the uploaded files (e.g., to associate the file with a category in your database):

[HttpPost]
public async Task<IActionResult> Upload(IFormFile[] files, int categoryId)
{
    // Get the path to your uploads folder (adjust as needed)
    var uploadsPath = Path.Combine(WebHostEnvironment.WebRootPath, "uploads");
    Directory.CreateDirectory(uploadsPath);

    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            var filePath = Path.Combine(uploadsPath, Guid.NewGuid() + Path.GetExtension(file.FileName));
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }

            // Here you can use categoryId to link the file to the selected category (e.g., save to DB)
            // Example: _dbContext.FileUploads.Add(new FileUpload { FilePath = filePath, CategoryId = categoryId });
        }
    }

    return Ok(new { message = $"{files.Length} files uploaded with category ID: {categoryId}" });
}

Key Notes: #

• The sending event is perfect here because it captures the current selected value at the time of upload, not just the value when Dropzone initialized. This is crucial if users might change the dropdown selection before uploading files.
• Make sure the parameter name in formData.append("CategoryId", ...) matches exactly with the parameter name in your controller (int categoryId). Case sensitivity matters here!

内容的提问来源于stack exchange，提问作者greedyLump