Ich bin nicht in der Lage Zusätzliche Formulardaten mit der Dropzone Datei hochladen

Question

Dies ist der Dropzone-Code senden I

var myDropzone = new Dropzone("#my-dropzone", 
    { 
     url: "/opd/addMedicalRecord", 
     autoProcessQueue: false, 
     parallelUploads: 20, 
     uploadMultiple: 20, 
     maxFiles: 20, 
     paramName: 'file', 
     headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, 
     init: function() 
      { 
       var submitButton = document.querySelector("button#modal_addRecord") 
       myDropzone = this; // closure 
       submitButton.addEventListener("click", function() 
        { 
         myDropzone.processQueue(); // Tell Dropzone to process all queued files. 
         alert("Called Process Queue"); 
        }); 
       // You might want to show the submit button only when 
       // files are dropped here: 
       this.on("addedfile", function() 
        { 
         // Show submit button here and/or inform user to click it. 
         // alert("Called Added File"); 
        }); 
       this.on('uploadprogress', function(file, progress, bytesSent, formData) 
        { 
         formData.append('reportType', $('input[name=modal_reportType]:checked', 'div#addNewReport').val()); 
         formData.append('reportTitle', $("#modal_reportTitle").val()); 
         formData.append('reportInvestigationDate', $("#modal_investigationDate").val()); 
         formData.append('reportNote', $("#modal_notes").val()); 

         // console.log('File is ' + file); 
         // console.log('Progress is ' + file.upload.progress); 
         // console.log('Size is ' + file.upload.bytesSent); 
         // $("#uploadProgress").css("width",Math.ceil(file.upload.progress) + "%"); 
        }); 

       this.on('complete',function(file) 
        { 
         // $("#full").modal('hide'); 
         $("#uploadProgress").css("width","0%"); 
         myDropzone.removeAllFiles(); 
        }); 
      } 
    }); 

Das ist mein HTML-Code bin Ausführung:

<div class="modal fade" id="full" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div enctype="multipart/form-data" id="addNewReport" onSubmit="return false;"> 
      <div class="modal-content"> 
       <div class="modal-header green-modal"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
        <h4 class="modal-title">Add new report for Abhishek Bharambe</h4> 
       </div> 
       <div class="modal-body"> 
        {{-- <form onSubmit="return false;" enctype="multipart/form-data" id="addNewReport"> --}} 
        <div class="row mt-15"> {{-- Report Type--}} 
         <div class="col-md-8 col-md-offset-2"> 
          <div class="form-group form-md-radios"> 
           <label>Select Report Type</label> 
           <div class="md-radio-inline"> 
            <div id="r_labreports_r_a" class="md-radio"> 
             <input type="radio" id="modal_labReports" name="modal_reportType" value="lab" class="md-radiobtn"> 
             <label for="modal_labReports"> <span class="inc"></span> <span class="check"></span> <span class="box"></span> Lab Reports </label> 
            </div> 
            <div id="r_imaging_r_a" class="md-radio"> 
             <input type="radio" id="modal_labImaging" name="modal_reportType" value="image" class="md-radiobtn"> 
             <label for="modal_labImaging"> <span class="inc"></span> <span class="check"></span> <span class="box"></span> Imaging </label> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="row mt-15"> {{-- Report Title--}} 
         <div class="col-md-8 col-md-offset-2"> 
          <div class="form-group"> 
           <div class="input-group"> <span class="input-group-addon input-circle-left capsule-lightblue"> 
            <i class="fa fa-hospital-o blue-icon-font"></i> 
            </span> 
            <input type="text" class="typeahead-newrecord form-control input-circle-right" id="modal_reportTitle" placeholder="Enter Report Title" name="reportTitle"> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="row mt-15"> 
         <div class="col-md-8 col-md-offset-2"> 
          <div class="form-group"> 
           <div class="input-group"> 
            <span class="5pw input-group-addon input-circle-left capsule-lightblue"> 
             <i class="fa fa-calendar blue-icon-font"></i> 
            </span> 
            <input name="date" class="pw100 input-circle-right form-control form-control-inline input-medium date-picker" form-input size="16" type="text" id="modal_investigationDate" data-date-format="dd-mm-yyyy" placeholder="Date of Investigation (Optional)" /> </div> 
          </div> 
         </div> 
        </div> 
        <div class="row mb-25"> 
         <form class="dropzone dropzone-file-area" multiple name="file[]" id="my-dropzone" accept=accept="image/*, .pdf, .doc, .docx, .xls, .xlsx" style="width: 500px; margin-top: 50px;"> 
          <h3 class="sbold">Drop Report related files here or click to upload</h3> 
          <p> You can upload images (.jpg, .jpeg, .png) or documents (.pdf, .docx, .doc, .xls, .xlsx) of the report. </p> 
         </form> 
         <br> 
         <br> 
         <br> 
         <div class="col-md-9 col-md-offset-1"> 
          <div class="progress progress-striped active"> 
           <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="uploadProgress"> 
            <span class="sr-only"> 0% Uploaded </span> 
           </div> 
          </div> 
         </div> 
         <a class="btn hide" id="mbtn">Upload</a> 
        </div> 
        <div class="row">{{--Notes--}} 
         <div style="margin-top: 20px;"></div> 
         <div class="col-md-8 col-md-offset-2"> 
          <div class="form-group form-md-line-input form-md-floating-label"> 
           <textarea class="form-control" id="modal_notes" rows="2" cols="2" name="modal_notes"></textarea> 
           <label for="mpdal_notes">Notes</label> 
           <span class="help-block">Additional Notes Here</span> 
          </div> 
         </div> 
        </div> 
        {{-- </form> --}} 
       </div> 
       <div class="modal-footer"> 
        <div class="row"> 
         {{-- Submit Button --}} 
         <div class="col-md-8 col-xs-12 col-sm-12 col-md-offset-2"> 
          <div class="col-md-6 col-sm-6 col-xs-6 nopad"> 
           <button id="modal_addRecord" class="fwb btn btn-circle green-meadow"> 
            <i class="fa fa-check"></i> Add Record 
           </button> 
          </div> 
          <div class="col-md-6 col-sm-6 col-xs-6 nopad"> 
           <button type="button" class="fwb btn btn-circle btn-outline dark" data-dismiss="modal"><i class="fa fa-close"></i> Cancel</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

ich die Laravel Backend Side Ich zeige die Daten an, um die Antwort anzuzeigen:

print_r($request->all()); 
exit(); 

Das Problem ist, dass ich auch die restlichen Formulardaten mit dem senden möchte Datei-Upload. In der aktuellen Situation gibt es einen erfolgreichen Datei-Upload, es erreicht auch den Server, aber die verbleibenden Formulardaten werden nicht auf dem Server veröffentlicht. Was ist der Fehler, den ich nicht zurückverfolgen kann?

Während die Daten in der Dropzone Abschnitt Anhängen gibt es eine erro wie =>Uncaught TypeError: Cannot read property 'push' of undefined

Answer 1

Statt uploadprogress Sie sending .Dropzone upload verwenden sollte nicht Formulardaten nicht nehmen. Lesen Sie mehr here, schauen Sie sich die Ereignisliste an und lesen Sie, was jeder tut. Hier

ein Beispiel:

myDropzone.on('sending', function(file, xhr, formData){... 

Edit.

• schicken nimmt 3 Parameter file, xhr, formData

die sneding Linie Formular oben hinzufügen, dann Formdata .... und dann pu diese zur Verarbeitung der Warteschlange myDropzone.processQueue();