FM / GalleryImages

/var/www/vhosts/ihelp.ro/httpdocs/templates/Admin/element/GalleryImages/

/var/www/vhosts/ihelp.ro/httpdocs/templates/Admin/element/GalleryImages

Name	Size	Mode	Actions
dropzone.php	8827	0644	edit dl rm

Edit: /var/www/vhosts/ihelp.ro/httpdocs/templates/Admin/element/GalleryImages/dropzone.php (8827B)

<?php echo $this->Form->create(null, ['id' => 'galleryImages', 'type' => 'file', 'url' => [
                    'prefix' => 'Admin',
                    'controller' => 'GalleryImages',
                    'action' => 'upload',
                    $model,
                    $foreignKey,
                    $foreignUuid
                ]]); ?>
                <div id="actions" class="row mt-2">
                    <div class="col-lg-6">
                        <div class="btn-group w-100">
                            <span class="btn btn-success col fileinput-button">
                                <i class="fas fa-plus"></i>
                                <span><?php echo __('Add files'); ?></span>
                            </span>
                            <button type="submit" class="btn btn-primary col start">
                                <i class="fas fa-upload"></i>
                                <span><?php echo __('Start upload'); ?></span>
                            </button>
                            <button type="reset" class="btn btn-warning col cancel">
                                <i class="fas fa-times-circle"></i>
                                <span><?php echo __('Cancel upload'); ?></span>
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex align-items-center">
                        <div class="fileupload-process w-100">
                            <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>
                        </div>
                    </div>
                </div>
                <div class="table table-striped files" id="previews">
                    <div id="template">
                        <div class="row mt-4">
                            <div class="col-auto">
                                <span class="preview"><img src="data:," alt="" data-dz-thumbnail /></span>
                            </div>
                            <div class="col d-flex align-items-center">
                                <p class="mb-0">
                                    <span class="lead" data-dz-name></span>
                                    (<span data-dz-size></span>)
                                </p>

</div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <strong class="error text-danger" data-dz-errormessage></strong>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-lg-6">
                                <input class="text form-control  mt-2" type="text" name="name" id="name" placeholder="Title">
                            </div>
                            <div class="col-lg-6">
                                <input class="text form-control  mt-2" type="text" name="alt" id="alt" placeholder="Alt">
                            </div>
                        </div>
                        <div class="row  mt-2">
                            <div class="col-6 d-flex align-items-center">
                                <div class="progress progress-striped active w-100" 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="col-6 d-flex align-items-center">
                                <div class="btn-group">
                                    <button class="btn btn-primary start">
                                        <i class="fas fa-upload"></i>
                                        <span><?php echo __('Start'); ?></span>
                                    </button>
                                    <button data-dz-remove class="btn btn-warning cancel">
                                        <i class="fas fa-times-circle"></i>
                                        <span><?php echo __('Cancel'); ?></span>
                                    </button>
                                    <button data-dz-remove class="btn btn-danger delete">
                                        <i class="fas fa-trash"></i>
                                        <span><?php echo __('Delete'); ?></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <?php echo $this->Form->end();
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php echo $this->Form->end(); ?>
<?php $this->append('script'); ?>
<script>
    $("#galleryImages").submit(function(e) {
        return false;
    });
    $(document).ready(function() {
        // DropzoneJS Demo Code Start
        Dropzone.autoDiscover = false;
        // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
        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: "<?php echo $this->Url->build(['prefix' => 'Admin', 'controller' => 'GalleryImages', 'action' => 'upload', $model, $foreignKey, $foreignUuid], ['fullBase' => true]) ?>", // Set the url
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            maxFilesize: 1, // MB
            acceptedFiles: "image/jpeg, image/png",
            paramName: "image_path",
            previewTemplate: previewTemplate,
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
            headers: {
                'X-CSRF-Token': $('meta[name="_csrfToken"]').attr('content')
            }
        });

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

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

// reload if is complet
        myDropzone.on("complete", function(data) {
            if (data.status == "success")
                setTimeout(function() {
                    location.reload();
                }, 3000)

});
        // sending
        myDropzone.on("sending", function(file, xhr, formData) {
            // Show the total progress bar when upload starts
            document.querySelector("#total-progress").style.opacity = "1";

var str = $("#name").val();
            formData.append("name", str);
            var str = $("#alt").val();
            formData.append("description", str);

// And disable the start button
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        });

// Hide the total progress bar when nothing's uploading anymore
        myDropzone.on("queuecomplete", function(progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });

// Setup the buttons for all transfers
        // The "add files" button doesn't need to be setup because the config
        // `clickable` has already been specified.
        document.querySelector("#actions .start").onclick = function() {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        };
        document.querySelector("#actions .cancel").onclick = function() {
            myDropzone.removeAllFiles(true);
        };
        // DropzoneJS Demo Code End
    })
</script>
<?php $this->end();   ?>

cmd: