Cannot save page with media upload if validate.required: true is set

[erichgoldman]

I am trying to create a blueprint which includes something like the following:

   header.image:
      type: file
      label: Select the event logo image
      multiple: false
      destination: 'event'
      random_name: false
      avoid_overwriting: false
      limit: 1
      filesize: 2
      validate:
        required: true
      accept:
        - image/*

However, if I have the validate.required: true component when I got to click the save button in the admin panel, nothing will happen. I only get a javascript error:

An invalid form control with name='' is not focusable.

If I remove:

      validate:
        required: true

Then the page will save, file uploads, etc.

I have tried changing and removing the various other parameters, but it seems to be that when I make it a required field I am unable to save.

What might be interfering and preventing me from making this work that I can set within grav? I believe this error is because it is failing to perform the client-side validation (?)

I also noted if I add:

   header.image:
      type: file
      label: Select the event logo image
      name: 'event-image'
     ...

The name value (in this case event-image) does not appear anywhere in the HTML source on the admin page (I also tried with quoting the value for name)

[flaviocopes]

Replicated and got to http://stackoverflow.com/a/28340579 but I can't find the source of the problem, because there is no hidden field marked as required.

[flaviocopes]

Actually I see the issue, the field field has no type: hidden but is set to display: none and this is enough to trigger the problem:

make sure this form control doesn't have a display: none or visibility: hidden declaration
https://tiffanybbrown.com/2015/11/an-invalid-form-control-is-not-focusable/index.html

@w00fz is this a known issue already?

[flaviocopes]

[w00fz]

You looking at the wrong field, that one highlighted has no name so it's not really part of the form.
It is tricky because file upload is kind of independent, you save the json data and not the actual file upload, so setting a required validation makes it tricky.

[flaviocopes]

Yes the problem looks like the browser shows the error because that field (which is hidden) is required, and from my understanding it tries to say "Fill this field" but since it's hidden, it raises that An invalid form control with name='' is not focusable error.

[flaviocopes]

So maybe we should remove required="required" from the hidden file field and do a js validation?

[erichgoldman]

In the documentation , for the The File Field "Common Attributes Allowed" does include validate.required - for the time being should this be removed? Did the file upload function differently in the past?

Have not yet traced through all of the JavaScript and client side...

After the successful AJAX can we set the value of the hidden field (e.g., set)? Then the validation rule would just be checking that value. If all of the uploads are removed from the JS upload box, then this field is unset?

[w00fz]

Yes this has completely changed, see #748 for a better understanding.

[HiddenType]

Using the required attribute for the file input field is not possible.

When using dropzone the standard file field is hidden and can't be focused to display the client side error message: client side validation fails. But removing the dropzone plugin from the form plugin just solves the first issue. The second issue appears when gravs deeply build in ajax-upload functionality kicks in to clear the standard file field selection so that it does not upload any data to the server: server side validation fails.

The form plugin should have a flag to turn on dropzone + ajax-upload. The standard html file form field which would work with the build in validation of the browser should be default for the form plugin

[avxkim]

So we can't make "file" type as required?

[guins]

(Bug still here in Grav 1.4.3)
The main problem seems to be because the browser is trying to do a pre-validation but the input field as no attribute name. According to the Blueprint documentation, the file field should accept the name attribute, but if you setup a name it never show up on the front-end side of the form (as @erichgoldman already mentioned).
Any updates on this one ?

[localnetwork]

Still encounter this problem. Any updates on this?