feat: add RzFileUpload custom element

Author: roadiz-ci

templates/base.html.twig

@@ -83,6 +83,10 @@
         </div>
         <div id="codemirror-preview-containers"></div>
         <script>
+            /**
+             * Global Rozier configuration object
+             * @type {RozierConfig}
+             */
             window.RozierConfig = {
                 'baseUrl':           '{{ app.request.schemeAndHttpHost }}{{ app.request.basePath }}',
                 'resourcesUrl':      '{{ asset('/bundles/roadizrozier/') }}',

templates/documents/upload.html.twig

@@ -16,20 +16,23 @@
     <article class="content content-upload">
         <div class="content-upload-inner">
             {% form_theme form '@RoadizRozier/forms.html.twig' %}
-            <form id="upload-dropzone-document"
-                  {% if folder.id %}
-                      data-folder-id="{{ folder.id }}"
-                      style="--rz-accent-color: {{ folder.color }};"
-                  {% endif %}
-                  class="uk-form uk-form-stacked dropzone-container"
+            <form
+                  class="uk-form uk-form-stacked"
                   action="#"
                   method="post"
                   enctype="multipart/form-data">
-                <div class="fallback">
-                    {{ form_widget(form) }}
-                    <input class="uk-button uk-button-primary" type="submit" value="{% trans %}upload{% endtrans %}" />
-                </div>
-                {{ form_rest(form) }}
+                  <rz-file-upload 
+                    {% if folder.id %}
+                        url="{{ path('documentsUploadPage', {_format: 'json'}) ~ '/' ~ folder.id }}"
+                        style="--rz-accent-color: {{ folder.color }};"
+                    {% endif %}
+                  >
+                    <noscript>
+                        {{ form_widget(form) }}
+                        <input class="uk-button uk-button-primary" type="submit" value="{% trans %}upload{% endtrans %}" />
+                    </noscript>
+                    {{ form_rest(form) }}
+                  </rz-file-upload>
             </form>
         </div>
     </article>

templates/widgets/drawer.html.twig

@@ -138,13 +138,11 @@
                 </ul>
             </div>
             {% if enableDropzone %}
-                <dropzone v-if="drawer.isDropzoneEnable"
-                          id="dropzone{{ random() }}"
-                          :language="dropzoneLanguage"
-                          url="{{ path('documentsUploadPage', {_format: 'json'}) }}"
-                          v-on:vdropzone-error="showError"
-                          v-on:vdropzone-success="showSuccess">
-                </dropzone>
+                <rz-file-upload 
+                    v-if="drawer.isDropzoneEnable"
+                    @error="showError"
+                    @success="showSuccess">
+                </rz-file-upload>
             {% endif %}
         </div>
     </drawer-container>