0

Tengo este código en blade y javascript donde solo quiero permitir subir un archivo, el código que tengo es este.

El comportamiento que me hace es el siguiente , me sube la primera imagen y realmente crea el fichero, las imagenes posteriores las muestra por pantalla pero no las sube (bien) pero en cambio pone una "X" encima como si se pudiese eliminar pero no lo hace.

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html>
<head>
    <title>Upload Multiple Images using dropzone.js and Laravel</title>
    <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Upload Multiple Images using dropzone.js and Laravel</h1>
            {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
            <div>
                <h3>Upload Multiple Image By Click On Box</h3>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>


<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFiles: 1,
        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        init: function() {
            this.on("maxfilesexceeded", function(file){
                alert("No more files please!");
            });
        },

    };
</script>

</body>
</html>

1 respuesta 1

2

No se puede eliminar porque la funcionalidad esa no está definida en tu dropzone. La que X que miras es del fallo del upload del dropzone, pero no para eliminar la imagen. Para definir que puedas eliminar imagenes necesitas agregar addRemoveLinks: true.

Dropzone.options.imageUpload = {
    maxFiles: 1,
    addRemoveLinks: true,
    accept: function(file, done) {
        console.log("uploaded");
        done();
    },
    init: function() {
        this.on("maxfilesexceeded", function(file){
            alert("No more files please!");
        });
    },
   maxfilesexceeded: function (files) {
    this.removeAllFiles();
    this.addFile(files);
  },

};

La función maxfilesexceeded elimina las imágenes que se hayan agregado después de acceder el limite, dejándote la que agregaste a lo último.

3
  • 1
    Muchas gracias por tu respuesta.
    – ilernet
    Commented el 7 feb. 2020 a las 7:37
  • 1
    Con gusto, me cuentas si funciono. Commented el 7 feb. 2020 a las 14:02
  • 1
    Gracias @Danielle Lpz funcionó a la perfección.
    – ilernet
    Commented el 10 feb. 2020 a las 9:34

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.