Is it possible to check and validate file type on presubmit ?

SilicaGel

Currently in my form I'm checking whether or not the field has a value and also length but I'm wondering if there's a way to check the file type on uploads as well?

This is my code for the presubmit >

editor.on( 'preSubmit', function ( e, o, action ) {
     if ( action !== 'remove' ) {
         var numOfFields = $('[data-editor-template]').length;
         var fieldNames = Object.keys(this.s.fields);
         var skip = ['home_sections.status_id','home_sections.section_image_id','home_sections.link'];
         for(var i=0;i<numOfFields;i++){

          if(fieldNames[i] == "home_sections.section_image_id"){
              console.log(this.field(fieldNames[i]));
              this.field(fieldNames[i]).error('This field can not be over 200 characters');
             }

            if(fieldNames[i] == "home_sections.link" && this.field(fieldNames[i]).val().length >= 200 ){
              this.field(fieldNames[i]).error('This field can not be over 200 characters');
             }

             else {
                if (skip.includes(fieldNames[i])) {
                 continue;
               }
             }

             if(fieldNames[i] == "home_sections.title" && this.field(fieldNames[i]).val().length >= 75 ){
              this.field(fieldNames[i]).error('This field can not be over 75 characters');
             }


             if( !this.field(fieldNames[i]).val() ) {
                  this.field(fieldNames[i]).error('This field can not be empty');
             }
         }

         if ( this.inError() ) {
             return false;
         }
     }
 } );

allan

The file type is a little more tricky with client-side validation since the file upload is async to the rest of the form. The preSubmitevent doesn't fire for the upload handler - in fact looking at it, there isn't any pre-upload event handler (something which I think is missing and I'll add that). So at the moment a workaround would be to provide your own ajax call for the upload field type. Honestly that's not much fun!

If you can, I'd recommend doing the validation on the server-side (since client-side validation can be by-passed easily anyway), but if that isn't an option, would a preUpload event handler that can cancel the upload suit?

Regards,
Allan

Tester2017

@Allan,
I really feel a lack of some kind of preSubmit event for the upload. I would like to check the file size before the actual upload.

In my case, for example, I am allowing file sizes till 300kb, but now I can select a file of 10MB and it will first be uploaded and then "my server" will tell me that the size was bigger than 300kb......

So if there is some way to offer this kind of functionality it would be very appreciated.

corpo

@Tester2017 it can even be worse if you select a file bigger than the max post size / max upload size, it'll generate a server error and show a generic error in the form

@allan I'd like a preUpload event too, as I can check there the file(s) size and cancel the upload if needed. I was goind to add max file size capability, but this event could be fine too

allan

Thanks for the feedback! I've just committed a change that will ship in Editor 1.7.3 to add a preUpload event for Editor. With that you'll have access to the File object for the file being uploaded as well as the data to be sent to the server. return false; from the event handler will cancel the upload action for that file - e.g.:

    editor.on( 'preUpload', function ( e, fieldName, file, ajaxData ) {
        if ( file.size > 50000 ) {
            editor.field( fieldName ).error('File must be smaller than 50K');
            return false;
        }
        else {
            editor.field( fieldName ).error(''); // Clear any old errors
        }
    } );

Its possible (although probably unlikely) that Editor 1.7.3 will ship later today. If that isn't the case it will happen at the start of next week.

Regards,
Allan

Tester2017

@allan,
Great! Perfect!
And thanks!

corpo

@allan thanks, that's exactly what I needed.Looking forward Editor 1.7.3

corpo

@allan is the release of Editor 1.7.3 planned for today or later ? Just to know if I wait or if I plan the use of preUpload event in the next build of my app

allan

I've gotten wrapped up in a few other things I'm afraid. Its likely to fall into the end of this week now.

I can send over a pre-release version if that would be useful?

Allan

corpo

Working perfectly, thank you @allan