File upload validate doesn't work

[ArrowBaZ]

Hello, if I set a validate required on type file I got error on JS console An invalid form control with name='' is not focusable.

Theme Antimatter 2.0.0
Grav 1.1.12
Form 2.0.8

    fields:
        -
            name: picture
            type: file
            classes: "form-control form-control-lg"
            label: Picture
            multiple: false
            random_name: true
            avoid_overwriting: true
            destination: '@self'
            accept:
                - "image/*"
            validate:
                required: true

[flaviocopes]

Same issue as getgrav/grav-plugin-admin#887

[bleutzinn]

Having a serious problem because of this issue.
The console message An invalid form control with name='' is not focusable. is shown by Chrome.
In Safari the console shows:
Failed to load resource: the server responded with a status of 404 (Not Found) http ... /user/plugins/form/assets/form.min.js.map.
Is there a workaround to make file upload fields mandatory ?

[rhukster]

the .map file being missing is not critical. It's only a JS map file that is used to map compressed files to source. it's only in play when the developer console is up. The other JS message is probably minor also, but might be causing a bigger JS failure.

[flaviocopes]

Currently the file upload cannot be set as required, it's a known issue.
The reason is the actual file field is hidden, as we show a better file uploader, and the browser returns this error as it tries to validate the field, but that field is hidden.

Going to look at this

[bleutzinn]

When
.form-input-file input { display: none; } is commented out from user/plugins/form/assets/form-style.css the standard file input field shows in the user interface visually appearing 'inside' the dropzone box. Since the field is then no longer hidden this solves the browser error but does not solve the actual problem.
In https://github.com/getgrav/grav-plugin-form/blob/develop/templates/forms/fields/file/file.html.twig#L60-L70 this standard input field can actually be commented out without breaking the upload when required: false. But this also does not allow for uploads with required: true.
I suspect a possibility lies in changing the input value in https://github.com/getgrav/grav-plugin-form/blob/develop/app/main.js#L140.

[rhukster]

Closing because due to issue age. Please re-open if you continue to have issues

[bleutzinn]

A form with a File Field set to validate.required: true still refuses to submit.

Tested with a clean Grav 1.6.9 install and this frontmatter:

title: 'Add Page'
template: form
form:
    name: new-page
    fields:
        -
            name: title
            label: 'Post Title'
            type: text
        -
            name: content
            label: 'Post Content'
            type: textarea
            size: long
            classes: editor
        -
            name: images
            label: 'Images to upload'
            type: file
            multiple: true
            accept:
                - 'image/*'
            destination: '@self'
            validate:
                required: true
        -
            name: honeypot
            type: honeypot
    buttons:
        -
            type: submit
            value: Submit
    process:
        -
            redirect: /

[jeremybuff]

This is definitely still an issue. As @bleutzinn mentioned, requiring a File Field is still not working. I consider this a fairly major bug.

[bleutzinn]

@jeremybuff, I believe closed issues like this one are not seen by the developers.
Creating a new issue and referencing this one (#116) and #1217, #887 and #106 might get some attention though.