Dropzone zusätzliche Formulareingabe mit C# Controller

Question

Ich verwende Dropzone js, um Dateien hochzuladen. Ich möchte einige Eingabefelder wie Titel und Beschreibungen weitergeben. Ich habe das Sendeereignis verwendet, weiß aber nicht, wie ich diese Daten in meinem C# -Controller erfassen kann. Bitte helfen Sie.

Hier sind meine Js-Codes.

<div id="my-awesome-dropzone" class="dropzone"> 
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. --> 
<!-- Now setup your input fields --> 
<input type="text" name="Title" id="Title" placeholder="Title" /> 
<input type="text" name="Description" id="Description"/> 

<button type="submit">Submit data and files!</button> 
</div> 

@section scripts 
{ 
<script type="text/javascript"> 

    sabio.page.startUp = function() { 

     sabio.page.initializeDropzone(); 
    }; 

    sabio.page.initializeDropzone = function() { 
     Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element 

      // The configuration we've talked about above 
      autoProcessQueue: false, 
      uploadMultiple: false, 
      parallelUploads: 1, 
      maxFiles: 1, 
      maxFilesize: 5, 
      url: "/api/MediaUploader/upload", 

      // The setting up of the dropzone 
      init: function() { 
       var myDropzone = this; 

       // First change the button to actually tell Dropzone to process the queue. 
       this.element.querySelector("button[type=submit]").addEventListener("click", function (e) { 
        // Make sure that the form isn't actually being sent. 
        e.preventDefault(); 
        e.stopPropagation(); 
        myDropzone.processQueue(); 
       }); 

       this.on("sending", function (file, xhr, formData) { 
        // Will send the filesize along with the file as POST data. 
        formData.append("Title", $('#Title').val()); 
        console.log("formdata is " + formData.Title) 
       }); 

       // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead 
       // of the sending event because uploadMultiple is set to true. 
       this.on("sendingmultiple", function() { 
        // Gets triggered when the form is actually being sent. 
        // Hide the success button or the complete form. 
       }); 
       this.on("successmultiple", function (files, response) { 
        // Gets triggered when the files have successfully been sent. 
        // Redirect user or notify of success. 
       }); 
       this.on("errormultiple", function (files, response) { 
        // Gets triggered when there was an error sending the files. 
        // Maybe show form again, and notify user of error 
       }); 
      } 

     } 
    }; 

</script> 

}

Und hier sind meine C# Controller Codes.

[Route("upload")] 
    public HttpResponseMessage Upload() 
    { 
     HttpResponseMessage result = null; 

     var httpRequest = HttpContext.Current.Request; 

     ItemResponse<int> response = new ItemResponse<int>(); 

     if (httpRequest.Files.Count > 0) 
     { 
      string filePath = null; 
      string fileName = null; 
      //string fileTitle = null; 

      var docfiles = new List<string>(); 
      foreach (string file in httpRequest.Files) 
      { 
       var postedFile = httpRequest.Files[file]; 

       filePath = HttpContext.Current.Server.MapPath("~/Media/" + postedFile.FileName); 
       fileName = postedFile.FileName; 
       //fileTitle = postedFile.; 

       postedFile.SaveAs(filePath); 

       docfiles.Add(filePath); 

       // upload to amazon S3 
       FileUploadService uploadNow = new FileUploadService(); 
       uploadNow.uploadFiles(filePath, fileName); 

       MediaRequestModel mediaModel = new MediaRequestModel(); 
       mediaModel.FileName = fileName.Substring(0, fileName.LastIndexOf(".")); 
       mediaModel.Path = "C15"; 
       mediaModel.MediaType = fileName.Substring(fileName.Length - 3); 

       // insert into db. 

       //MediaService.InsertMedia(mediaModel); 
       response.Item = MediaService.InsertMedia(mediaModel); 

      } 
      result = Request.CreateResponse(HttpStatusCode.Created, docfiles); 
     } 
     else 
     { 
      result = Request.CreateResponse(HttpStatusCode.BadRequest); 
     } 

     return Request.CreateResponse(response); 
    } 

Danke.

Answer 1

Vereinfacht:

<script> 
     Dropzone.options.mediaUploader= { 
      init: function() { 
       this.options.uploadMultiple = false; 
       this.on("success", function (file, responseText) { 
        alert("Wheeeee!"); 
       }); 
      } 
     }; 
</script> 

<div id="dropzone"> 
    <form id="mediaUploader" action="/api/MediaUploader/upload" class="dropzone needsclick dz-clickable"> 
     <!-- inputs --> 
     <input type="text" name="Title" id="Title" placeholder="Title" /> 
     <input type="text" name="Description" id="Description"/> 

     <div class="dz-message needsclick"> 
      <h2>Drop file here or click to upload.</h2><br> 
     </div> 
    </form> 
</div> 

Dann können Sie wahrscheinlich die Werte in Ihrem Controller zugreifen einfach durch diese:

HttpContext.Current.Request.Form["Title"] 

... oder vielleicht mit mit "Titel" als Parameter spielen, um in Der Controller.