0

Tengo este código en mi plantilla blade donde declaro dos div con distintos ids, para identificar cada uno con un dropzone.

            <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div  id="dropzoneEsp" class="col-md-6">
                    {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload1' ]) !!}

                    {!! Form::close() !!}
                </div>

                <button type="submit" id="buttonImagenCat" class="btn btn-primary">Subir imagen (cat)</button>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div  id="dropzoneCat" class="col-md-6">
                    {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload2' ]) !!}

                    {!! Form::close() !!}
                </div>

                <button type="submit" id="buttonImagenEsp" class="btn btn-primary">Subir imagen (esp)</button>
            </div>
        </div>

Y luego con Jquery intento construir este código para darle una funcionalidad a cada uno, siguiendo este código

<script type="text/javascript">

    var myDropzoneTheFirst = new Dropzone(
        //id of drop zone element 1
        '#dropzoneCat', {
            url : "uploadUrl/1"
        }
    );

    var myDropzoneTheSecond = new Dropzone(
        //id of drop zone element 2
        '#dropzoneEsp', {
            url : "uploadUrl/2"
        }
    );

    myDropzoneTheFirst.options.imageUpload = {
        maxFiles: 1,
        addRemoveLinks : true,
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        init: function() {

            var myDropzoneESP = this;

            this.on("maxfilesexceeded", function(file){
                alert("No more files please!");
            });

            // Update selector to match your button
            $("#buttonImagenEsp").click(function (e) {
                e.preventDefault();
                myDropzoneESP.processQueue();
            });

            this.on("addedfile", function (file) {
                if (this.files[1] != null) {
                    //alert('add file');
                    this.removeFile(this.files[0]);
                }
            });
        },
    };

No se si lo planteo bien en el JavaScript, lo que intento hacer es definir dos objetos dropzone y luego intento asignarle a cada uno unas características.

1
  • Pero te da algún error tu desarrollo? En que podemos ayudarte?
    – Fergush
    Commented el 3 feb. 2020 a las 9:08

1 respuesta 1

2

Al final lo he solucionado , instanciando 2 componentes dropzone js de esta forma

    Dropzone.options.drozponeEsp = {
        maxFiles: 1,
        addRemoveLinks : true,
        autoProcessQueue: false,
        accept: function(file, done) {
            buttonImagenEsp = true;
            done();
        },
        init: function() {

            var myDropzoneESP = this;

            this.on("maxfilesexceeded", function(file){
                alert("No more files please!");
            });

            // Update selector to match your button
            $("#buttonImagenEsp").click(function (e) {
                e.preventDefault();
                myDropzoneESP.processQueue();
            });

            this.on("addedfile", function (file) {
                if (this.files[1] != null) {
                    //alert('add file');
                    this.removeFile(this.files[0]);
                }
            });

            this.on("removedfile", function (file) {
                imageEsp = '';
            });

            this.on("success", function (file, responseText) {
                imageEsp = responseText.image;
            });

        },
    };



    Dropzone.options.drozponeCat = {
        maxFiles: 1,
        addRemoveLinks : true,
        autoProcessQueue: false,
        accept: function(file, done) {
            buttonImagenCat = true;
            done();
        },
        init: function() {

            var myDropzoneCat = this;

            this.on("maxfilesexceeded", function(file){
                alert("No more files please!");
            });

            // Update selector to match your button
            $("#buttonImagenCat").click(function (e) {
                e.preventDefault();
                myDropzoneCat.processQueue();
            });

            this.on("addedfile", function (file) {
                if (this.files[1] != null) {
                    //alert('add file');
                    this.removeFile(this.files[0]);
                }
            });

            this.on("removedfile", function (file) {
                imageCat = '';
            });

            this.on("success", function (file, responseText) {
                console.log(responseText.image);
                imageCat = responseText.image;
                console.log('imageCat  ' + imageCat);
            });

        },
    };

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.