FM / GalleryImages

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

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

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

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

<div class="row">
    <div class="col-md-12">
        <div class="">
            <div class="">
                <?php echo $this->Form->create(null, ['id' => 'galleryImages', 'type' => 'file', 'url' => [
                    'prefix' => 'Dashboard',
                    'controller' => 'GalleryImages',
                    'action' => 'upload',
                    $model,
                    $foreignKey,
                    $foreignUuid
                ]]); ?>
                <div class="fallback">
                    <input name="image_path" type="file" multiple />
                </div>
                <?php echo $this->Form->end(); ?>
                <div id="actions" class="row my-2">
                    <div class="col-lg-12 mb-3">
                        <div class="btn-group w-100">
                            <span class="btn btn-success col fileinput-button">
                                <i class="fas fa-plus"></i>
                                <span><?php echo __('Adaugă imagini'); ?></span>
                            </span>
                            <button type="submit" class="btn btn-primary col start">
                                <i class="fas fa-upload"></i>
                                <span><?php echo __('Încarcă imaginile'); ?></span>
                            </button>
                            <button type="reset" class="btn btn-warning col cancel">
                                <i class="fas fa-times-circle"></i>
                                <span><?php echo __('Anulează'); ?></span>
                            </button>
                            <button type="submit" class="btn btn-info col ">
                                <i class="fas fa-times-circle"></i>
                                <span><?= $this->Html->link(
                                            __('Vezi produs'),
                                            ['prefix' => false, 'controller' => 'Products', 'action' => 'view', $product->slug, $product->uuid],
                                            ['target' => '_blank', 'class' => ' text-secondary']
                                        ) ?>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-12 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 mt-4" 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="Titlu poza">
                            </div>
                            <div class="col-lg-6">
                                <input class="text form-control  mt-2" type="text" name="alt" id="alt" placeholder="Titlu 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 btn-success start">
                                        <i class="fas fa-upload"></i>
                                        <span><?php echo __('Încarcă'); ?></span>
                                    </button>
                                    <button data-dz-remove class="btn btn-warning cancel">
                                        <i class="fas fa-times-circle"></i>
                                        <span><?php echo __('Anulează'); ?></span>
                                    </button>
                                    <button data-dz-remove class="btn btn-danger delete">
                                        <i class="fas fa-trash"></i>
                                        <span><?php echo __('Șterge'); ?></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' => 'Dashboard', 'controller' => 'GalleryImages', 'action' => 'upload', $model, $foreignKey, $foreignUuid], ['fullBase' => true]) ?>", // Set the url
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            maxFilesize: 1, // MB
            maxFiles: 10,
            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();
                }, 2000)

});
        // 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();   ?>

Form->create(null, ['id' => 'galleryImages', 'type' => 'file', 'url' => [ 'prefix' => 'Dashboard', 'controller' => 'GalleryImages', 'action' => 'upload', $model, $foreignKey, $foreignUuid ]]); ?>

Form->end(); ?>

()

Form->end(); ?>

Form->end(); ?> append('script'); ?> end(); ?>