How to add 2 Dropzone in the same view

Question

Well I’m trying to add two Dropzone on a screen, one is specific to a file(pdf,doc) and the other is for attachment(doc,pdf,image etc). Below is an example of using Dropzone:

@{
Layout = null;
}

@Styles.Render("~/Content/dropzonescss")     
<form id="my-awesome-dropzone" class="dropzone" action="#">
                        <div class="dropzone-previews"></div>
                        <button type="submit" class="btn btn-primary pull-right">Submit this form!</button>
                    </form>
 <!-- DROPZONE -->
<script src="js/plugins/dropzone/dropzone.js"></script>


<script>
    $(document).ready(function(){

        Dropzone.options.myAwesomeDropzone = {

            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,

            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                });
                this.on("errormultiple", function(files, response) {
                });
            }

        }

   });
</script>

Here’s an example where it works with 2 Dropzone, but the css gets disorganized because to get the default css of Dropzone you must add the class Dropzone.

When adding the Dropzone class, the plugin does not work because it does not know which Dropzone is, url errors etc

@Styles.Render("~/Content/dropzonescss")
<link href="~/Scripts/dropzone/basic.css" rel="stylesheet">
<link href="~/Scripts/dropzone/dropzone.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
@section Scripts {   
@Scripts.Render("~/bundles/dropzonescripts")
@Scripts.Render("~/plugins/util")

<script type="text/javascript">
$( function() {
    //essas funções foram as unicas que possibilitaram a inserção de 2 dropzone na mesma tela
    $.fn.dropzone.uploadStarted = function(fileIndex, file, current_dropzone_id){
        alert(cur_id);
        //console.log("teste ouro")
        var infoDiv = $("<div></div>");
        infoDiv.attr("id", current_dropzone_id + "-info" + fileIndex);
        infoDiv.html("upload started: " + file.fileName);

        var progressDiv = $("<div></div>");
        progressDiv.css({
            'background-color': 'orange',
            'height': '20px',
            'width': '0%'
        });
        progressDiv.attr("id", current_dropzone_id + "-speed" + fileIndex);

        var fileDiv = $("<div></div>");
        fileDiv.addClass(current_dropzone_id + "-info");
        fileDiv.css({
            //'border' : 'thin solid black',
            //'margin' : '5px'
        });
        fileDiv.append(infoDiv);
        fileDiv.append(progressDiv);
        //console.log("teste nobre")
        $("#" + current_dropzone_id + "-info").after(fileDiv);
    };
    $.fn.dropzone.uploadFinished = function (fileIndex, file, duration, current_dropzone_id) {
        //console.log("teste salve")
        $("#" + current_dropzone_id + "-info" + fileIndex).html("upload finished: " + file.fileName + " ("+getReadableFileSizeString(file.fileSize)+") in " + (getReadableDurationString(duration)));
        $("#" + current_dropzone_id + "-speed" + fileIndex).css({
            //'width': '100%',
        //  'background-color': 'green'
        });

        if (current_dropzone_id) {
            //console.log("teste")
            // TAKE ACTIONS FOR A SPECIFIC DROPZONE ACTIVITY
        } else {
            // TAKE OTHER ACTIONS
        }
    };
    $.fn.dropzone.fileUploadProgressUpdated = function (fileIndex, file, newProgress, current_dropzone_id) {
       // console.log("teste rosa")
        $("#" + current_dropzone_id + "-speed" + fileIndex).css("width", newProgress + "%");
    };
    $.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond, current_dropzone_id){
        var dive = $("#" + current_dropzone_id + "-speed" + fileIndex);
        //console.log("teste mundo")
        dive.html( getReadableSpeedString(KBperSecond) );
    };
    /*
    $.fn.dropzone.newFilesDropped = function(current_dropzone_id){
        $("#" + current_dropzone_id + "-info").remove();
    };
    */

    $("#file-dropzone").dropzone({
        url : "@(System.Web.VirtualPathUtility.ToAbsolute("~/Documento/SaveDocumentoAjax/"))", // Set the url

        //printLogs: true,
        autoProcessQueue: false,            
        parallelUploads: 100,
        uploadMultiple: true, 
        uploadRateRefreshTime : 500,
        numConcurrentUploads: 2,
        dictDefaultMessage: "Arraste arquivos para cá ou clique para selecionar.",          
        success: function (response) {
            console.log(response);
            if (response.msg == "sucess") {
                htmlArquivos = " <input type='hidden' name='id_documentos[]' class='ids_documentos' value=" + response.idArquivo + " />";
                $('#divDocDigital').append(htmlArquivos);
                $(".alertDocumento").hide()
            }
        }
    });

    $("#anexo-dropzone").dropzone({
        url : "@(System.Web.VirtualPathUtility.ToAbsolute("~/Documento/SaveAnexoAjax/"))", // Set the url
        //printLogs: true,
        uploadMultiple: true,
        uploadRateRefreshTime : 500,
        numConcurrentUploads: 2,
        dictDefaultMessage: "Arraste arquivos para cá ou clique para selecionar."
    });
});
</script>
   }
<div class="">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-file">                  </span> Escolha o(s) arquivo(s)</h3>
            <small class="help-block">Envie arquivos de no máximo    <b>30</b>MB. Você poderá enviar arquivos das seguintes extensões: <b>PDF</b>, <b>DOC</b> e  <b>DOCX</b> .</small>
    </div>
    <div class="panel-body">
        <div class="ibox-content">
<!-- <div id="files-dropzone" class="dropzone">-->
            <div id="files-dropzone" class="">
                <div id="file-dropzone" class="dropzone-previews" style="width: 100%; height: 200px;"></div>
                <div id="file-dropzone-info" style="width: 50px;"></div>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title"><span class="glyphicon glyphicon-paperclip"></span> Anexos</h3>
        <small class="help-block m-b-none">O anexo tem finalidade de complementar, possibilitando melhores informações não referenciados no documento.</small>
    </div>
    <div class="panel-body">
        <div class="ibox-content">
            <div id="anexos-dropzone" class="">
                <div id="anexo-dropzone" class="dropzone-previews" style="width: 100%; height: 200px;"></div>
                <div id="anexo-dropzone-info" style="width: 50px;"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

To create two Dropzone in the same view I had to use the following code:

$(document).ready(function () {
Dropzone.autoDiscover = false;
$(".dropzone").each(function () {
    new Dropzone($(this).get(0), {
        url: "...."
    });
});
});

Source:https://github.com/enyo/dropzone/issues/823