Vue-dropzone: custom error message instead of [Object Object]

[DeepakAryal]

How to add custom error message for file upload fail?
here is my code:

<dropzone v-if="import_leads"
        id="lead-import-dropzone"
        ref="dropzone"
        :maxNumberOfFiles=5
        :useFontAwesome=true
        :headers="authorization_header"
        :url="import_fb_url"
        :language="{dictResponseError: 'vdsbcvk'}"
        @vdropzone-success="importFBSuccess"
      ></dropzone>

but the result is:
error with [Object Object] message with fail icon

[vrajroham]

Hi @DeepakAryal ,
Which dropzone component version are you using? Try using https://rowanwins.github.io/vue-dropzone/docs/dist/#/demo . Let me know if this too fails for you.

[vrajroham]

From your example it seems you are using earlier version. I would suggest to upgrade and use latest version (3.*) which is released few days before.

[DeepakAryal]

version 2.3.6 now, doesn't this work for version 2.*?

[vrajroham]

It works in 2.* too. Do as below,

• Listen to vdropzone-error(file, message, xhr) event
• Log message in console.

What error is it showing?

[DeepakAryal]

error from server is "file encoding not supported" but component shows like this "[Objects Objects]". i just want to replace that [Object Object] error with that server error message.

[vrajroham]

Correct me if I am wrong. You are sending file to server then server validates file and returns error say file encoding not supported. ?

[DeepakAryal]

yes there is a error say file encoding not supported from api response, and i want to display it instead of [Object Object].

[DeepakAryal]

This is the result i faced and i want to replace message of that red label.

[rowanwins]

Hi @DeepakAryal

You can't really provide a custom error label based on error from the server. If you really wanted to do that you'd need to write some custom js

[DeepakAryal]

no luck !!! let's close this issue

[vrajroham]

@DeepakAryal
As you are using API and it would be returning some object surely for error response. Dropzone can't show the object directly it needs plain text.

Found the very simple way to address your issue is return your error message as plain text or simple json string.

For more clarification see this comment from core dropzone library https://github.com/enyo/dropzone/issues/372#issuecomment-30056661 This will surely address your issue.

[LeorentKelmendi]

@DeepakAryal found a solution to this: listen for v-on:vdropzone-error and call a function

<template>
    <div class="container">
        <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"
         v-on:vdropzone-queue-complete="completed"
         v-on:vdropzone-error="failed"
         v-on:vdropzone-sending="sendingEvent"></vue-dropzone>
    </div>
</template>

then failed function parse the validation error

    failed:function(file,message,xhr){
      let response = xhr.response;
      let parse = JSON.parse(response, (key, value)=>{
        return value;
      });
      $('.dz-error-message span').text(parse.message);
    }

dont forget to require jquery at the top of script const $ = require('jquery');

then the validation message from the backed:

[xkovacikm]

@DeepakAryal found a solution to this: listen for v-on:vdropzone-error and call a function

<template>
    <div class="container">
        <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"
         v-on:vdropzone-queue-complete="completed"
         v-on:vdropzone-error="failed"
         v-on:vdropzone-sending="sendingEvent"></vue-dropzone>
    </div>
</template>

then failed function parse the validation error

    failed:function(file,message,xhr){
      let response = xhr.response;
      let parse = JSON.parse(response, (key, value)=>{
        return value;
      });
      $('.dz-error-message span').text(parse.message);
    }

dont forget to require jquery at the top of script const $ = require('jquery');

then the validation message from the backed:

if you use $('.dz-error-message span').text(parse.message); won't you overwrite all error messages?

file object contains attribute previewElement so you can edit only actual thumbnail.
for example:
$(file.previewElement).find(".dz-error-message span").text( parse.message )

[Ross-Hunter]

Thanks for the great solution, but you don't need jquery for this. The suggested answer also changes all error messages, and you probably only want to set the last error message. So probably do something like this instead, still kind of hacky, but it works.

  failed(_file, _message, xhr) {
    const message = JSON.parse(xhr.response).error.message
    const elements = document.querySelectorAll('.dz-error-message span')
    const lastElement = elements[elements.length - 1]
    lastElement.textContent = message
  }

[LeorentKelmendi]

@Ross-Hunter yeah realized that jquery and vue not a bright idea, but works.

[dmlux]

@Ross-Hunter Your solution does not work correctly if the user drops multiple files at once into the dropzone. A more elaborate solution I found is given below:

this.dropzone.on("error", (file: Dropzone.DropzoneFile, error) => {
    const elements = document.querySelectorAll(".dz-file-preview");
    for (const element of elements) {
        const filename = element.querySelectorAll(".dz-filename span")[0].textContent;
        const errorMessage = element.querySelectorAll(".dz-error-message span")[0];
        if (filename === file.name) {
            errorMessage.textContent = (<any>error).message;
        }
    }
});

Note: this solution is written in typescript, but can easily be translated into Javascript. It also does not rely on jQuery.

In my case the error object has a property named message which is why i can access error.message to get text. You may want to parse a JSON object to get the errorMessage value.

[alexandercrice]

I found an improvement to the solution to the above (by dmlux) was, rather than attempting to find the HTML element for the thumbnail by checking the DOM for a matching filename is to use the first parameter, file, to the error handler function.

file.previewElement.querySelectorAll('.dz-error-message span')[0].textContent = 'A custom error message';

It seems to reason that looping through all thumbnails and matching by the string value of the filename might cause unintended behavior if one attempted to upload multiple files with the same name.