Possibility to handle upload errors.

Tester2017

I have 4 kinds of possible errors that are handled on the server:

1. An unexpected error has occurred.
2. Not correct file type (only JPEG, PNG and GIF images are allowed).
3. Bad image format.
4. Size to big.

If one of those errors happen I will send a JSON back to the client with fieldErrors like this:

{"fieldErrors":[{"name":"groups.image","status":"Max allowed size is 400kb."}]}

But then I have an unexpected issue.

Below 4 events. The only event being triggered is [uploadXhrSuccess].

editor.on(`submitUnsuccessful`, function(e, json)
{
    console.log(`submitUnsuccessful`);
    /*  Only if the server reported fieldErrors we need to set our tabs in error color. */
    if (json.hasOwnProperty(`fieldErrors`))
    {
        setTabErrors()
    }

    /*  Other code below ..... */
});


/*  Submit Error. */
editor.on(`submitError`, function(e, xhr, err, thrown, data)
{
    console.log(`submitError`);
});



/*  Upload Xhr Success. */
editor.on(`uploadXhrSuccess`, function (e, fieldName, json)
{
    console.log(`uploadXhrSuccess`);

    /*  Only if we have fieldErrors we need to set or tabs in error color. */
    if (json.hasOwnProperty(`fieldErrors`))
    {
        console.log(json.fieldErrors);
        setTabErrors()
    }
});


/*  Upload Xhr Error. */
editor.on(`uploadXhrError`, function(e, fieldname, xhr)
{
    console.log(`uploadXhrError`);
});



/*  Show tabs in danger color if fields inside have errors. */
function setTabErrors()
{
    console.log(`editor.field('groups.image').inError(): ` + editor.field(`groups.image`).inError());

    /*  Other code below ..... */
};

So I have put my code to check if some errors were found on the server side during the upload inside the [uploadXhrSuccess] event.

The label of my image-upload receives the error color, the error message is shown. But both edit.field(`groups.image`).inError() and editor.inError() return false.

I have read this forum post about this kind of issue:
https://datatables.net/forums/discussion/39090/upload-submiterror-events-not-triggered-for-upload

Tester2017

I have one more question related to the upload type. Is there a way to create a kind of preUpload event? I am using the upload type different than the default one. My uploads receive as name a prefix and id of the proper table.

So let's say I have a table [groups] and a table [subgroups], then images for the table [groups] will have as name "g" + id of the group and images for the table [subgroups] the name "s" + id of the subgroup.

To let everything works correctly I have to fake the browser's cache functionality by adding a query string to the image to load. Like <img src="`+image+`?`+ Date.now()+`"/>, otherwise a already cached image with the same name will be shown.

But instead of "Date.now()" I like to use a var which can be set in a kind of preUpload event, because if the user did not changed the image I would use the cache of the browser instead loading the same image from the server again.

allan

I've just tried to replicate the inError() issue with this example. If you upload a largish file (more than half a megabyte) it will result in an error. Then in the console run:

editor.field(`image`).inError()

and it does return true. Are you able to tell me how to reproduce the error please?

But instead of "Date.now()" I like to use a var which can be set in a kind of preUpload event,

The closest to that at the moment is the ajaxData option of the upload field type. That would tell you when an upload is happening and also let you add data to the form, which might do for what you want, but the file would still upload. If you need to be able to cancel the upload you would need to use a custom ajax option as a function.

Allan

Tester2017

@allan I will do some little more investigation as I see that there is a difference in the error class given to the upload field in your example and in my script.

your sample:

<....DTE_Field_StateError">

my script:

<....error has-error">

Maybe this has something to do with my bootstrap layout and CSS classes. I will experiment with some variations and then let you know the result.

allan

I've just tried changing my upload example to be Bootstrap styles and it uses the following for the error classes:

DTE_Field DTE_Field_Type_upload DTE_Field_Name_image error has-error

The field().inError() method still appears to work okay.

The inError method does use hasClass to determine if there is an error:

this.dom.container.hasClass( this.s.classes.error );

so it does sound like it is related to this in some way. Is it Bootstrap 3 or 4 you are using? I've just tested 3.

Thanks,
Allan

Tester2017

@allan I am using Bootstrap 3, but if I make a test with your sample files it is working as expected, so it must have to do something with my specific design. Do not worry, I have a functioning workaround.

I have to do some other things first, but I promise you that after that I will tackle this one and send you the results of my findings. May take maybe 1 week.

Thanks for your great attention as always.