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.

Problems that I am having:

1. 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)

2. 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)

var myDropzone = null;
    Dropzone.options.uploadForm = {
        paramName: "file", // 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: "image/*",
        accept: function (file, done) {
            done();
        },
        init: function () {
            myDropzone = this;

        $(document).off('click').on("click", "#uploadCapturePhotoToDropZone", function(e) 
        {
                e.preventDefault();

                var number = 1 + Math.floor(Math.random() * 6);
                var fileBase64 = $("#capturePhotoID").val();
                var mockFile = {
                    name: "capturePhoto.png",
                    size: 12345,
                    type: 'image/png',
                    status: Dropzone.ADDED,
                    url: fileBase64,
                    serverID: number,
                    accepted: true 
                };

                myDropzone.emit("addedfile", mockFile);
                myDropzone.createThumbnailFromUrl(mockFile, fileBase64);
                myDropzone.files.push(mockFile);

                $(".dz-progress").show();
                $("#LoaderIconGov").show();
                myDropzone.processQueue();
            });

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

$(document).on("click", "#addImageToMainPage", function (e) {
    e.preventDefault();
    $("#capturePhotoID").val(imageData);
    $("#uploadCapturePhotoToDropZone").click();
    $('#myModal0').modal('toggle');
});