gidaban79's avatar

dropzone.js How to hide progress bar of uploaded files?

Hello guys,

on beginning i want to say this script is really awesome :)

i want to integrate with Laravel, working fine, function return true or error, but if my function return true progress bar of uploaded files is still visible.

var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
            url: "/admins/gallery/upload", // Set the url
            headers: {
                'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
            },
            thumbnailWidth: 220,
            parallelUploads: 20,
            previewTemplate: previewTemplate,
            autoQueue: false,
            previewsContainer: "#previews",
            clickable: ".fileinput-button"
        });

        myDropzone.on("addedfile", function(file) {
            // Hookup the start button
            file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
        });

        myDropzone.on("totaluploadprogress", function(progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
        });

        myDropzone.on("sending", function(file) {
            document.querySelector("#total-progress").style.opacity = "1";
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        });

        myDropzone.on("queuecomplete", function(progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });

        document.querySelector("#actions .start").onclick = function() {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        };
        document.querySelector("#actions .cancel").onclick = function() {
            myDropzone.removeAllFiles(true);
        };

php function

        $image = $request->file('file');
        $imageName = md5(uniqid(rand(), true) . $image) . '.' . $image->getClientOriginalExtension();
        $upload_success = $image->move(public_path('images'),$imageName);

        if ($upload_success) {
            return response()->json(true, 200);
        }
        // Else, return error 400
        else {
            return response()->json('error', 400);
        }

template html

            <div id="actions" class="row">

                <div class="col-md-7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-flat btn-success fileinput-button dz-clickable">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                        </span>
                    <button type="submit" class="btn btn-flat btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start upload</span>
                    </button>
                    <button type="reset" class="btn btn-flat btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel upload</span>
                    </button>
                </div>

                <div class="col-lg-5">
                   <span class="fileupload-process">
          <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0"
               aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;"
                             data-dz-uploadprogress=""></div>
                    </div>
                    </span>
                </div>
                <div class="clearfix">&nbsp;</div>
            </div>
            <div class="row" class="files" id="previews">

                <div id="template" class="file-row col-md-3">
                    <!-- This is used as the file preview template -->
                    <div>
                        <div class="preview"><img data-dz-thumbnail class="img-thumbnail"/></div>
                    </div>
                    <div>
                        <strong class="error text-danger" data-dz-errormessage></strong>
                    </div>
                    <div>
                        <p class="size" data-dz-size></p>
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                             aria-valuemax="100" aria-valuenow="0">
                            <div class="progress-bar progress-bar-success" style="width:0%;"
                                 data-dz-uploadprogress></div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button class="btn btn-flat btn-sm btn-primary start">
                            <i class="glyphicon glyphicon-upload"></i>
                            <span>Start</span>
                        </button>
                        <button data-dz-remove class="btn btn-flat btn-sm btn-warning cancel">
                            <i class="glyphicon glyphicon-ban-circle"></i>
                            <span>Cancel</span>
                        </button>
                        <button data-dz-remove class="btn btn-flat btn-sm btn-danger delete">
                            <i class="glyphicon glyphicon-trash"></i>
                            <span>Delete</span>
                        </button>
                    </div>
                </div>

            </div>
0 likes
8 replies
bobbybouwmann's avatar

Are you ure the on queuecomplete is triggered here? You can test it with for example an alert or a console log ;)

gidaban79's avatar

i added

        myDropzone.on("queuecomplete", function (progress) {
            document.querySelector("#total-progress").style.opacity = "0";
            console.log(1);
        });

and yes after upload in console i see '1'.

bobbybouwmann's avatar

Also have you tried it without the quotes?

myDropzone.on("queuecomplete", function (progress) {
    document.querySelector("#total-progress").style.opacity = 0;
});
gidaban79's avatar

I really don't have problems with total upload progress bar, but with each file.

bobbybouwmann's avatar

What are you exactly trying to achieve? You only do one thing in the queuecomplete event! If you want to do something for each file you need to do that in that event I guess. Not really sure what you want here! Can you elaborate a bit more?

gidaban79's avatar

i'm trying upload images to gallery.

i don't need a total progress bar but for each files. if files will be upload successfully progress bar should be hidden. After upload files on server i have my files, but still is active a progress bar of file which has been uploaded.

h4rdkur's avatar

If you want to hide EACH progress bar from successfully uploaded files do this.

JS

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone

    url: "/admins/gallery/upload", // Set the url
    success:function(file, response)
    {
        file.previewElement.querySelector(".indi_progress").remove();
    }

});

HTML

<div>
<p class="size" data-dz-size></p>
    <div class="progress progress-striped active indi_progress" role="progressbar" 
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <div class="progress-bar progress-bar-success" style="width:0%" data-dz-uploadprogress></div>
    </div>
</div>

Please or to participate in this conversation.