I create a profile image downloader using dropzone.js and I copied the layout proposed by Facebook , but I want it to be when you drop the image, it replaces the contents inside dropzone.
My demo so far:
Image link
My code is:
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, I want the text “Download photo from your computer” to be replaced by a progress bar when uploading the image, and then, as soon as the download is complete, the thumbnail preview will go to the div that is currently DP in it (it's a div, not image), and then replace the progress bar with the "delete" button, which, if pressed, will remove the image from the preview (left) and reset to call again.
Where I am stuck is the download progress, image preview, and the reset part. I'm not sure which functions to use, and the documentation on the site does not actually show what each of these functions returns or how to use them.
I have a form that works, and it does what I need, it's just the formatting and styling that I need help with :)