CODEWITHSUNDEEP
dropzone
Matt Simpson
Matt Simpson

Reputation: 9

DropZone JS change default preview image after success

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

Upvotes: 0

Views: 2032

Answers (1)

Gerard Haw
Gerard Haw

Reputation: 107

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

  }

Upvotes: 2

Related Questions