0

I using symfony for the first time and in its last version i.e. 5 I managed to code a multiple file upload and it works properly. Nevertheless, when choosing the files, nothing is displayed into the FileType field (i.e. neither the number nor the name of the choosen files appears). Doing some searches on the web, I discovered that I must do some javascripting to solve this. Moreover as I want to add progress bar, javascript becomes necessary.

The trouble is I cannot manage having JQuery and Javascript working on the page.

Here is what I did.

webpack.config.js (most comments are removed to shorten the file)

var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
.setOutputPath('public/build/')
.setPublicPath('/build')

.copyFiles({
    from: './assets/images',
})

/*
 * ENTRY CONFIG
 */
.addEntry('app', './assets/js/app.js')
.addEntry('upload', './assets/js/upload.js')
.splitEntryChunks()

.enableSingleRuntimeChunk()

/*
 * FEATURE CONFIG
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
 })
 // enables Sass/SCSS support
.enableSassLoader()

// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();

base.html.twig (the master template)

<!-- <!DOCTYPE html> -->
<html>
    <head>
        <meta charset="UTF-8" />
        <title>
          {% block title %}
             Welcome!
          {% endblock %}
       </title>

  {% block stylesheets %}
      {#       'app' must match the first argument to addEntry() in webpack.config.js #}
      {{ encore_entry_link_tags('app') }}
     {% endblock %}
  </head>

  <body>
    {% include 'topbar.html.twig' %}
    {% include 'banner.html.twig' %}
    {% include 'menubar.html.twig' %}
    {% include 'slogan.html.twig' %}
    {% include 'flashmessages.html.twig' %}

    <div class="container my-content">
       {% block body %} {% endblock %}
    </div>
    {% include 'footer.html.twig' %}
    {% block javascripts %} {% endblock %}

    </body>
</html>

assets/js/upload.js (the upload page specific script)

$(document).ready(function() {
    //bsCustomFileInput.init();
    console.log('document ready');
    alert('loaded');
})

After compilation with

yarn encore dev

the public/build directory contains a upload.js file with this content

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["upload"],{

/***/ "./assets/js/upload.js":
/*!*****************************!*\
  !*** ./assets/js/upload.js ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var $ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");

$(document).ready(function () {
  //bsCustomFileInput.init();
  console.log('document ready');
  alert('loaded');
});

/***/ })

},[["./assets/js/upload.js","runtime","vendors~app~upload"]]]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvanMvdXBsb2FkLmpzIl0sIm5hbWVzIjpbIiQiLCJyZXF1aXJlIiwiZG9jdW1lbnQiLCJyZWFkeSIsImNvbnNvbGUiLCJsb2ciLCJhbGVydGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLElBQU1BLENBQUMsR0FBR0MsbUJBQU8sQ0FBQyxvREFBRCxDQUFqQjs7QUFDQUQsQ0FBQyxDQUFDRSxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFXO0FBQ3pCO0FBQ0FDLFNBQU8sQ0FBQ0MsR0FBUixDQUFZLGdCQUFaO0FBQ0FDLFFBQU0sQ0FBQyxRQUFELENBQU47QUFDSCxDQUpELEUiLCJmaWxlIjoidXBsb2FkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgJCA9IHJlcXVpcmUoJ2pxdWVyeScpO1xuJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKSB7XG4gICAgLy9ic0N1c3RvbUZpbGVJbnB1dC5pbml0KCk7XG4gICAgY29uc29sZS5sb2coJ2RvY3VtZW50IHJlYWR5Jyk7XG4gICAgYWxlcnRlKCdsb2FkZWQnKTtcbn0pIl0sInNvdXJjZVJvb3QiOiIifQ==

Once the page loaded the browser inspector shows the script

<script src="/build/upload.js><script>

but it has no effect . No console.log , no alert

yivi
  • 42,438
  • 18
  • 116
  • 138
meaulnes
  • 303
  • 2
  • 13

1 Answers1

1

In your twig template, you need to include the encore tags for both CSS and JS.

I see you added {{ encore_entry_link_tags('app') }}

But I do not see the tag for JS entries

{{ encore_entry_script_tags('app') }} or {{ encore_entry_script_tags('upload') }}.

Might be that it's included in your footer.html.twig, but we don't see that here.

Hope this helps!

EDIT: Since you found your answer, I think we can resolve this by giving insight in how to find a hidden Javascript error.

First, try with other browsers. In the past I had an error in my JS, couldn't see it in the chrome console, but I could see it with Firefox's.

You could always try using chrome's debugger, add a breakpoint then go step by step. How do you launch the JavaScript debugger in Google Chrome?

Or with Firefox's https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript

If nothing shows up with this, the problem will probably be somewhere else.

Tortus
  • 141
  • 7
  • In fact the tag for the js which is specific to the upload page is added into the javascripts block of the page. – meaulnes Jan 29 '20 at 09:20
  • I finally discovered that the comments into the javascripts block in the base template were the source of the trouble but as copying this template I deleted the comments no one could see it. Deleting theses comments in the real template solved the problem. Thank you for your help. – meaulnes Jan 29 '20 at 09:23
  • I would be very interested in finding out if my proposition would have found your error. Would you try that please? And if you do, would you consider my answer a resolution? – Tortus Jan 30 '20 at 19:28