Form file upload does not work

[piotrjozwiak]

Hi guys! I heve problem with attaching files to email message. I have configured this fields:

form:
action: /contact
name: contact-form
fields:
…

    name: my-file
    label: 'Add a file'
    type: file
    multiple: false
    destination: user/data/files
    accept:
        - application/pdf
        - application/x-pdf
        - image/png
        - text/plain
buttons:
-
  type: submit
  value: 'Send Message’
  classes: 'btn btn-primary’
  process:
-
  email:
    from: ‘{{ config.plugins.email.from }}‘
    to: [’{{ config.plugins.email.to }}’]
    subject: '[Contact] {{ form.value.name|e }}'
    body: '{% include ‘‘forms/data.html.twig’’ %}'
    content_type: 'text/html’
    charset: 'UTF-8’
    attachments:
        - my-file

But still i receive messages without attachment. Also ajax upload does not work and it looks like inactive button. I have to uncheck “display: none” in css properties. Anybody have idea what is a problem?

I am testing this on localhost and also building by heroku on herokuapp.com

[nick-bettondesign]

I am having the same issue, did you find a solution to this?

[rhukster]

Please make sure your theme has a bottom JS block. If it doesn't add this before the </body> tag:

{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

[nick-bettondesign]

Hi thank you I do have this yes.

[rhukster]

Do your files actually get uploaded to user/data/files ? Also can you try with jus a single file by disabling multiple ? Also maybe try changing the name of the file from my-file to my_file and also again the attachments reference.

[piotrjozwiak]

Helo, thanks for your reply. I will try your suggestions and let you know ;)

[roorco]

Hi, I'm having the same issue here. Files uploaded are not sent with the message. I do have a bottom JS block and my files are not uplaoded in user/data/files, multiple is disabled, file name has no - or _. Moreover, the cancel button do not delete the uploaded file and there is no way to deleted unless refreshing the page. Although this may be another issue.

[rhukster]

I did release with a fix where files that were too large were silently being ignored. Perhaps this fix is related to your problem?

[SarahBaghdadi]

I had the same problem. I added the bottom block like was suggested above:

{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

Then, I had to add autofocus: false to the file field (since the field is required but hidden and caused an error in Chrome, when Chrome couldn't autofocus). That allowed to form to upload.

Last, to get it to attach to my form's email output, I had to add a name property to the file field.

Also if you do all that and it still doesn't work and you have a js error in your console, go to system.yaml and check to see if turning off JS pipeline and minify fixes your error (js_pipeline: falseand js_minify: false). That's a catch-all for any JS error, but still it can break things. Then you know that it's something in how grav's combining resources, possibly caused by a syntax error that didn't matter before they were combined.

[gesundelehre]

I figured out what the problem was

you used the wrong quotation marks to close the strings here in those two lines:

content_type: 'text/html’
charset: 'UTF-8’

instead you should use:

content_type: 'text/html'
charset: 'UTF-8'

I hope this helps anyone who has the same problem

[SarahBaghdadi]

Adding the bottom JS block at the end and a few other things ended up only fixing the problem in my dev environment, I still haven't gotten it to work in production. Does anyone have any thoughts?

[francoisjacquet]

+1 for the JS pipeline issue.

When the JS pipeline is activated, the following error shows up in the console:

ReferenceError: GravForm is not defined

[localnetwork]

Same issue with @francoisjacquet when enabling JS pipeline.

+1 for the JS pipeline issue.

[rhukster]

Fixed in https://github.com/getgrav/grav-plugin-form/commit/96eeff2634a6eb0d52dfc0afc30f5dd7e7b98255