title: How can I programmatically upload an image using Dropzone
body: <p>What is the correct way to upload a file programmatically using Dropzone? I have been using the code below to do it but it has not been working. My actual code opens a modal and allows the user to take an image and add the image to Dropzone on the main page.</p>
  <p>Problems that I am having:</p>
  <ol>
  <li><p>My files keep on getting duplicated when I use the modal form to add the file to the dropzone on the main page. (I think my event handliers are being duplicated every time I open the modal but my short fixes haven't been working)</p>
  </li>
  <li><p>The file added programmatically is not uploaded to the server. Request.Files does not contain the uploaded file. (All manually uploaded files are in Request.Files)</p>
  </li>
  </ol>
  <pre><code>var myDropzone = null;
      Dropzone.options.uploadForm = {
          paramName: &quot;file&quot;, // The name that will be used to transfer the file
          maxFilesize: 10, // MB
          uploadMultiple: true,
          maxFiles: 4,
          clickable: true,
          autoProcessQueue: false,
          parallelUploads: 10,
          addRemoveLinks: true,
          acceptedFiles: &quot;image/*&quot;,
          accept: function (file, done) {
              done();
          },
          init: function () {
              myDropzone = this;
  
          $(document).off('click').on(&quot;click&quot;, &quot;#uploadCapturePhotoToDropZone&quot;, function(e) 
          {
                  e.preventDefault();
  
                  var number = 1 + Math.floor(Math.random() * 6);
                  var fileBase64 = $(&quot;#capturePhotoID&quot;).val();
                  var mockFile = {
                      name: &quot;capturePhoto.png&quot;,
                      size: 12345,
                      type: 'image/png',
                      status: Dropzone.ADDED,
                      url: fileBase64,
                      serverID: number,
                      accepted: true 
                  };
  
                  myDropzone.emit(&quot;addedfile&quot;, mockFile);
                  myDropzone.createThumbnailFromUrl(mockFile, fileBase64);
                  myDropzone.files.push(mockFile);
  
                  $(&quot;.dz-progress&quot;).show();
                  $(&quot;#LoaderIconGov&quot;).show();
                  myDropzone.processQueue();
              });
  </code></pre>
  <p>My modal form has the following partial code to send the base64 image to the main form and call the action to upload the image</p>
  <pre><code>$(document).on(&quot;click&quot;, &quot;#addImageToMainPage&quot;, function (e) {
      e.preventDefault();
      $(&quot;#capturePhotoID&quot;).val(imageData);
      $(&quot;#uploadCapturePhotoToDropZone&quot;).click();
      $('#myModal0').modal('toggle');
  });
  </code></pre>