CodeseniorSoftware Tutorials

Dropzone HTML Implementation

<link href="<?php echo base_url() ?>assets/css/dropzone.css" rel="stylesheet">
<div class="card">
    <div class="row">
        <div class="col-sm-12">
            <div class="col-md-12 col-sm-12">

                <form action="<?= base_url('admin/do_send_gallery'); ?>"
                      class="dropzone"
                      id="my-awesome-dropzone">
                </form>

            </div>

        </div>
    </div>
</div>
</div>
<script src="<?php echo base_url() ?>assets/js/dropzone.js" type="text/javascript"></script>
<script>
    Dropzone.options.myAwesomeDropzone = {
        paramName: "files",
        init: function () {
            var element = this;
            $.ajax({
                type: 'GET',
                url: "<?=base_url('admin/do_init_gallery'); ?>",
                success:function(data) {
                    $.each(data, function(index) {
                        var mockFile = {name: data[index].name, size: 12345, type: 'image/jpeg'};
                        element.emit("addedfile", mockFile);

                        // And optionally show the thumbnail of the file:
                        element.emit("thumbnail", mockFile, data[index].url);
                    });
                }
            });
        },
        renameFile : function (file) {
            return new Date().getTime() + '_' + file.name;
        },
        accept: function (file, done) {
            done();
        },
        success: function (file, response) {
            file.previewElement.querySelector("img").src = response.files[0].url;
            file.previewElement.classList.add("dz-success");
            var fileuploded = file.previewElement.querySelector("[data-dz-name]");
            fileuploded.innerHTML = response.files[0].name;
            file.name = response.files[0].name;
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        },
        addRemoveLinks: true,
        removedfile: function (file) {
            var name="";
            if(file.upload!==undefined)
                name  = file.upload.filename;
            else name=file.name;
            $.ajax({
                type: 'POST',
                url: "<?=base_url('admin/do_delete_gallery'); ?>",
                data: "id=" + name,
                dataType: 'html'
            });
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        }
    };
</script>

Dropzone Server Side Implementation

function gallery()
{
    $data['page_name'] = 'gallery';
    $data['page_title'] = 'Galeri';
    $this->load->view('admin/index', $data);
}
function do_init_gallery()
{
    $this->db->where('year', date('Y'));
    $result=$this->db->get('gallery')->result();
    header('Content-Type: application/json');
    echo json_encode( $result );
}
function do_send_gallery()
{
    $this->load->library("UploadHandler");
    $files = $this->uploadhandler->response['files'];
    if (count($files) == 0) return;
    $data['name'] = $files[0]->name;
    $data['url'] = $files[0]->url;
    $data['thumbnail']=$files[0]->thumbnailUrl;
    $data['year']=date('Y');
    $data['created_at']=date('Y-m-d H:i:s');
    $this->db->insert('gallery', $data);
}
function do_delete_gallery()
{
    $id=$this->input->post('id');
    $this->db->where('name',$id);
    $this->db->delete('gallery');
}

UploadHandler.php file: https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php