DropZone JS change default preview image after success - dropzone

Question

So I am having a problem with changing the default image that is displayed after a successful document upload.
I have the following for my DropZone definition;
$(document).ready(function () {
$(".dropzone").dropzone({
renameFilename: function (filename) {
return 'ps' + $('#txtID').val() + '_' + filename;
},
success: function (file, response) {
var ext = getFileExt(file.name);
var newImagePath = file.name;
/* Check for extension */
if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif') {
if (ext == 'pdf') {
newImagePath = "/images/icon_pdf128.png";
}else{
newImagePath = "/images/icon_genericfile128.png";
}
}
this.createThumbnailFromUrl(file, newImagePath);
},
url: 'aPageHere',
method: 'post',
dictDefaultMessage: 'Drop files here or click to upload<br>(max 5MB)',
thumbnailWidth: 60,
thumbnailHeight: 60,
maxFilesize: 5,
previewsContainer: ".dropzone-previews",
previewTemplate: document.querySelector('#previews').innerHTML
});
});
The area I am having problems with is the Success function where if it is an image, then fine, DropZone shows a preview of the image, but I am trying to change the image to a PDF pic or a generic picture if required
Any suggestions would be welcome
Thanks
Matt

Answer 1

I assuming the image will be placed on the preview.
You can do a query Selector on your preview as below:
success: function (file, response) {
//Select the preview element
var previewImg = file.previewElement.querySelector('img');
var ext = getFileExt(file.name);
var newImagePath = file.name;
/* Check for extension */
if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif') {
if (ext == 'pdf') {
newImagePath = "/images/icon_pdf128.png";
}else{
newImagePath = "/images/icon_genericfile128.png";
}
previewImg.src = newImagePath;
}
}