Modifica Dropzone: mostra immagine caricata in un altro div

Question

Sto creando un uploader di immagini profilo utilizzando dropzone.js e ho un po 'copiato il layout offered by Facebook, ma quello che sto volendo fare è quando si rilascia l'immagine, sostituisce il contenuto all'interno della dropzone.

mio demo finora:

Image Link

Il mio codice finora:

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) {}); 
    }); 
} 
}; 

Quindi quello che vorrei è quando il caricamento immagine, il testo " Carica una foto dal tuo computer "viene sostituita con una barra di avanzamento, quindi una volta completato il caricamento, l'anteprima della miniatura va al div dispone di DP (che è un div, non di un'immagine), quindi sostituisce la barra di avanzamento con un pulsante "Rimuovi", che se premuto rimuove l'immagine dall'anteprima (a sinistra) e reimposta la zona di rilascio per iniziare ancora.

Il punto in cui sono bloccato è l'avanzamento del caricamento, l'anteprima dell'immagine e il ripristino della parte. Non sono sicuro delle funzioni da utilizzare e la documentazione del sito Web non mostra in realtà ciò che ciascuna funzione restituisce o come utilizzarle.

ho avere la forma di lavoro e fa quello che ho bisogno di, è solo la formattazione e lo stile che ho bisogno di aiuto con :)

Answer 1

ho finito per fare questo con alcune funzioni e alcuni 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;} 

che finisce per assomigliare a questo

e reimposta per ultimo stato alla rimozione