Modify Dropzone: Show uploaded image in another div

Question

I'm creating a profile image uploader using dropzone.js, and I've sort of copied the layout offered by Facebook, but what I'm wanting it to do is when you drop the image, it replaces the content inside the dropzone.

My demo so far :

Image Link

My code so far:

Dropzone.options.employeeImageDropzone = {
maxFiles: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
dictDefaultMessage: '<strong>Upload a Photo</strong><br/><small class="muted">From your computer</small>',
paramName : 'empImage',
init: function() {
    this.on("success", function(file, responseText) {
        $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>" class="button form-button">Next</a>').css('display','block');
    });
    this.on("removedfile", function (file) {
        $.get("upload-image.php", {id: <?php echo $empID; ?>, get: "1"}).done(function(data) {});
    });
}
};

So what I would like is when the image is uploading, the text "Upload a Photo From your computer" is replaced with a progress bar, and then once the upload is complete, the thumbnail preview goes into the div that currently has DP in it (That is a div, not an image), and then replace the progress bar with a "remove" button, which if pressed will remove the image from the preview (on the left) and reset the dropzone to start again.

Where I'm stuck is the upload progress, image preview, and reset part. I'm not sure which functions to use, and the website documentation doesn't actually show what each of those functions return or how to use them.

I have the form working and it does what I need it to, it's just the formatting and styling I need help with :)

Answer 1

I ended up doing this with some functions and some CSS

Javascript:

Dropzone.options.employeeImageDropzone = {
    maxFiles: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    dictDefaultMessage: '<strong>Upload a Photo</strong><br/><small class="muted">From your computer</small>',
    paramName : 'empImage',
    thumbnailWidth:'200',
    thumbnailHeight:'200',
    init: function() {
        this.on("success", function(file, responseText) {
            document.querySelector(".dz-progress").style.opacity = "0";
            $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>" class="button form-button">Next</a>');
        });
        this.on("thumbnail", function(file, dataUrl) {
            $('#dz-preview').html('<img src="'+dataUrl+'" width="200" height="200" alt="<?php echo $empNameFull; ?>">');
        });
        this.on("removedfile", function (file) {
            $.get("upload-image.php", {id: <?php echo $empID; if(isset($oldImage) && !empty($oldImage)) {echo ', old: "'.$oldImage.'" ';} ?>, get: "1"}).done(function(data) {});
            $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>">Skip this step</a>');
        });
        this.on("reset", function (file) {
            $('#dz-preview').html('<?php echo $previousData; ?>');                  
        });
    }
};

CSS:

#employee-image-dropzone.dropzone .dz-preview, #employee-image-dropzone .dropzone-previews .dz-preview {background:transparent;position:inherit;display:block;margin:0;vertical-align:middle;border:none;padding:0;margin-top:60px;text-align:center;}
#employee-image-dropzone.dropzone .dz-preview .dz-progress, #employee-image-dropzone .dropzone-previews .dz-preview .dz-progress {top:-25px;}
#employee-image-dropzone.dropzone .dz-preview .dz-details, #employee-image-dropzone.dropzone .dz-preview .dz-success-mark, #employee-image-dropzone.dropzone .dz-preview .dz-error-mark,  #employee-image-dropzone.dropzone .dz-preview .dz-error-message {display:none;}
#employee-image-dropzone.dropzone .dz-preview .dz-remove {border: 2px solid #F7931D;color: #F7931D;padding: 6px 20px !important;}

Which ends up looking like this

And resets to last state on removal