3

I'm currently testing the new Symfony UX Dropzone and after a few hours of research I still have one question left to answer: Why don't UX packages include JS scripts? - how is Symfony supposed to include dropzone(.min).js for example ?

Currently for the code to work I have to:

  1. Download the dropzone.js file from the official website.
  2. Place the file under /assets/dropzone/dropzone.js
  3. Add to the assets/app.js file the line window.Dropzone = require('./dropzone/dist/dropzone.js');

I started by creating a new project and then installing Dropzone as follows:

symfony composer req ux-dropzone
npm install
npm run build

/src/Form/FormType.php

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('file', DropzoneType::class)
    ;
}

/src/templates/base.html.twig

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

/assets/app.js

import './styles/app.css';

window.Dropzone = require('./dropzone/dropzone.js');

// start the Stimulus application
import './bootstrap';

Without this manual import of the dropzone(.min).js file the variable window.Dropzone is not initialized.

I found a similar topic here, however it seems that in this case the installation of the package created the file /node_modules/ux-dropzone/dist/min/dropzone.min.js. But in my case here is the generated tree structure:

tree structure

Is this the right way to proceed?

Wishing you a good day :)

Stephan Vierkant
  • 9,674
  • 8
  • 61
  • 97
N3T
  • 31
  • 3
  • I haven't gone through UX yet, but I'd assume it would come in through `yarn` or `npm` and be stored in the node_modules folder. Is it not? – Chris Haas Mar 09 '21 at 14:48
  • That's what I assumed too but it seems that only two js files are imported into `/nodes_modules/@symfony/ux-dropzone` named `dist/controller.js` and `src/controller.js` - there is no trace of `dropzone.js`... "tree structure" link in my previous position shows the tree structure of the folder – N3T Mar 09 '21 at 15:12
  • Hi, have you found anything since then ? I am also struggling to make it work. I have the UI, but it isn't responding when I upload files... – Arlien Jul 21 '21 at 09:02
  • `window.Dropzone = require('./dropzone/dropzone.js');` is not necessary. – Cadot.eu Nov 24 '21 at 12:10

0 Answers0