File upload does not work on themes such as Gravstrap (Box not clickable, no text appears in box)

[nro-bot]

File upload works with antimatter theme but not many others.

The error looks like so (working on left, not working on the right):

With file

user/pages/02.form/form.md

---
title: Milestones
slug: milestones
template: form
 
 
form:
    name: contact
 
    fields:
        - name: my_file
          type: file
          label: upload Label
          destination: '@self'
          multiple: true
          accept:
           - image/*
 
    buttons:
        - type: submit
          value: Submit


        - type: reset
          value: Reset
 
    process:
        - save:
        - message: Thank you for getting in touch!
        - display: thankyou
 
---

On "deliver" theme, https://github.com/getgrav/grav-theme-deliver, to fix, add one line:
/user/themes/[theme]/templates/partials/base.html.twig

{{ assets.js('bottom') }}

in pre-existing "bottom" block.

See https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/partials/base.html.twig#L84
and
https://github.com/getgrav/grav-plugin-form/blob/develop/templates/forms/fields/file/file.html.twig#L78

However, in gravstrap theme, https://github.com/giansi/gravstrap-theme-skeleton,
adding the lines

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

results only in new errors in console (originally no console errors despite box not working);

Uncaught ReferenceError: GravForm is not defined(…)
Uncaught Error: No URL provided.(…)

:( How can I get the file upload in forms in this theme to work?

[flaviocopes]

The file field loads some JS in the bottom group by default, so that js position must be loaded by the theme. Most themes do. @w00fz do you think it's wiser just to load it in the default position, so it's compatible with all themes, and use bottom optionally?

I fixed Deliver, not sure about GravStrap, try disabling javascript minification and concatenation to check if form.min.js is loaded.

[w00fz]

It should be ok to move it to a default location, I thought bottom was always available.

Might need to make sure it loads at the right time though and that it doesn't throw js errors. The good thing about loading in the bottom is that you avoid FOUC and you don't have to pollute the window with dom ready events because all you need is there already available.

[flaviocopes]

According to @rhukster it has to be in the bottom, so we should add that position to all themes.

[nsteinmetz]

Hi,

I have the same bug but it appears only once js concatenation is enabled. When disabled, it works fine. I tried to clear grav & browser cache but still the same. Any idea ?

I use Grav 1.1.12 + Form 2.0.8

Let me know if you prefer me to open a new bug on this.

Thanks,
Nicolas

[flaviocopes]

Which theme are you using @nsteinmetz ?

[nsteinmetz]

Hi @flaviocopes it's one of my own and I have in partials/base.html the assets.js directive as follow:

    {% block bottom %}      
        {% do assets.addJs('theme://foundation/js/vendor/foundation.min.js', {'group':'bottom'}) %}
        {% do assets.addJs('theme://foundation/js/app.js', {'group':'bottom'}) %}
        {{ assets.js('bottom') }}
    {% endblock %}

So from my pov, I shouldn't have any bug.

[flaviocopes]

Ok I've been able to replicate the problem also with Antimatter, with system.js_pipeline enabled, there is a Javascript issue (ReferenceError: GravForm is not defined) and so the javascript execution is halted.

Disable the JS pipeline until we sort it out.

[TigerHix]

This issue also occurs on Bootstrap, Afterburner2, Receptar... and a lot more.

@flaviocopes I have disabled JS Pipeline in the Configuration of Admin panel, yet the issue persists.

[TigerHix]

Using OP's solution,

by adding {{ assets.js('bottom') }} into the bottom block of base.html.twig, the upload form now displays correctly.

[boredland]

I've got the same problem here. Would really like to use pipelining...

[TigerHix]

@boredland You can try my solution above :)

[boredland]

I did, but this works only disabling pipelining...

[robertbak]

Ok, @boredland so a quick workaround you can update the theme so that the bottom js defers it's load:

    {{ assets.js('bottom', {loading: 'defer'}) }}

The issue is that the form plugin inlines some javascript code into the page. But when pipeline is enabled, the code before it (form.min.js) doesn't defer it's load anymore, but depends on the inlined code (that's located below it).

There's a couple of ways to fix this:

1. Putting the inline code into the 'head' js section. This is the quickest, and should work for most themes, but requires the theme files to have both the js sections.
2. Wrapping the whole form.min.js into something that will make it act like it's deferred without the need for defer, eg.:

document.addEventListener("DOMContentLoaded", function() {
  // code...
});. 

3. Using the priorities. But it would require making the asset manager respect the priority of scripts, even if some are inline. Seems a lot of work.

[rhukster]

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