several improvements for the gallery upload

- add index.php files in the subdirectories of the uploader
- avoid reloading the whole page
- re-add progress-bar and status messages about the upload
- cleanup of unused files (and unused functions and styles)
- impose the correct file size limit and file type on the client side
- display a hint to save changes upon completed upload

languages/DE.php

@@ -66,6 +66,7 @@
 $MOD_NEWS_IMG['DRAG_N_DROP_HERE'] = 'Dateien hier mit Drag & Drop ablegen';
 $MOD_NEWS_IMG['CLICK_TO_ADD'] = 'Klicken, um Dateien hinzuzufügen';
 $MOD_NEWS_IMG['NO_FILES_UPLOADED'] = 'Keine Dateien hochgeladen.';
+$MOD_NEWS_IMG['COMPLETE_MESSAGE'] = 'Speichern Sie Ihre Änderungen, um den Upload in der Galerie anzuzeigen';
 
 //Variables for the frontend
 $MOD_NEWS_IMG['TEXT_READ_MORE'] = 'Details anzeigen';

languages/EN.php

@@ -67,7 +67,8 @@
 $MOD_NEWS_IMG['DRAG_N_DROP_HERE'] = 'Drag & drop files here';
 $MOD_NEWS_IMG['CLICK_TO_ADD'] = 'Click to add Files';
 $MOD_NEWS_IMG['NO_FILES_UPLOADED'] = 'No files uploaded.';
-
+$MOD_NEWS_IMG['COMPLETE_MESSAGE'] = 'Save your changes to show the upload in the gallery';
+
 //Variables for the frontend
 $MOD_NEWS_IMG['PAGE_NOT_FOUND'] = 'Page not found';
 $MOD_NEWS_IMG['TEXT_AT'] = 'at';

languages/FR.php

@@ -66,6 +66,7 @@
 $MOD_NEWS_IMG['DRAG_N_DROP_HERE'] = 'Glisser & Déposez les fichiers ici';
 $MOD_NEWS_IMG['CLICK_TO_ADD'] = 'Cliquez pour ajouter des fichiers';
 $MOD_NEWS_IMG['NO_FILES_UPLOADED'] = 'Aucun fichier téléchargé.';
+$MOD_NEWS_IMG['COMPLETE_MESSAGE'] = 'Enregistrez vos modifications pour afficher le téléchargement dans la galerie';
 
 // Variables pour le frontend
 $MOD_NEWS_IMG['PAGE_NOT_FOUND'] = 'Page non trouvée';

languages/IT.php

@@ -66,6 +66,7 @@
 $MOD_NEWS_IMG['DRAG_N_DROP_HERE'] = 'Trascina & rilasciare i file qui';
 $MOD_NEWS_IMG['CLICK_TO_ADD'] = 'Clicca per aggiungere file';
 $MOD_NEWS_IMG['NO_FILES_UPLOADED'] = 'Nessun file caricato.';
+$MOD_NEWS_IMG['COMPLETE_MESSAGE'] = 'Salva le modifiche per mostrare il caricamento nella galleria';
 
 // Variabili per il frontend 
 $MOD_NEWS_IMG ['PAGE_NOT_FOUND'] = 'Pagina non trovata';

languages/NL.php

@@ -68,8 +68,9 @@
 $MOD_NEWS_IMG['DRAG_N_DROP_HERE'] = 'Drag & zet hier bestanden neer ';
 $MOD_NEWS_IMG['CLICK_TO_ADD'] = 'Klik om bestanden toe te voegen';
 $MOD_NEWS_IMG['NO_FILES_UPLOADED'] = 'Geen bestanden geüpload.';
-
- // Variabelen voor de frontend 
+$MOD_NEWS_IMG['COMPLETE_MESSAGE'] = 'Sla je wijzigingen op om de upload in de galerij te tonen'; 
+
+// Variabelen voor de frontend 
 $MOD_NEWS_IMG['PAGE_NOT_FOUND'] = 'Pagina niet gevonden';
 $MOD_NEWS_IMG['TEXT_AT'] = 'om';
 $MOD_NEWS_IMG['TEXT_BACK'] = 'Terug';

modify_post.php

@@ -337,6 +337,11 @@ function show_wysiwyg_editor($name, $id, $content, $width, $height)
     }
     echo '</tbody></table></div>';
 }
+
+// load imagemaxsize for the current section
+$query_settings = $database->query("SELECT * FROM `".TABLE_PREFIX."mod_news_img_settings` WHERE `section_id` = '$section_id'");
+$fetch_settings = $query_settings->fetchRow();
+$imgmaxsize = $fetch_settings['imgmaxsize'];
 ?>
 <noscript>
     <!-- Formular -->
@@ -363,9 +368,26 @@ function show_wysiwyg_editor($name, $id, $content, $width, $height)
             </div>
           </div><!-- /uploader -->
 
+        </div>
+        <div class="col-md-6 col-sm-12">
+          <div class="card h-100">
+            <ul class="list-unstyled p-2 d-flex flex-column col" id="files">
+              <li class="text-muted text-center empty"><?php echo $MOD_NEWS_IMG['NO_FILES_UPLOADED']; ?></li>
+            </ul>
+          </div>
+        </div>
+
         </div>
       </div><!-- /file list -->
 
+      <div class="row">
+        <div class="col-12">
+           <div class="card h-100">
+            <ul class="list-group list-group-flush" id="status">
+            </ul>
+          </div>
+        </div>
+      </div> <!-- /status messages -->
 
     </main> <!-- /container -->
 
@@ -385,6 +407,8 @@ function show_wysiwyg_editor($name, $id, $content, $width, $height)
 
 <script type="text/javascript"> 
     var NWI_UPLOAD_URL = "<?php echo WB_URL."/modules/news_img/uploader/upload.php?post_id=$post_id"; ?>";
+    var NWI_COMPLETE_MESSAGE = "<?php echo $MOD_NEWS_IMG['COMPLETE_MESSAGE']; ?>";
+    var NWI_IMAGE_MAX_SIZE = <?php echo $imgmaxsize;?>;
 </script>
 
     <script src="<?php echo WB_URL."/modules/news_img/uploader/js/jquery.dm-uploader.js"; ?>"></script>
@@ -410,6 +434,11 @@ function show_wysiwyg_editor($name, $id, $content, $width, $height)
       </li>
     </script>
 
+    <!-- Status item template -->
+    <script type="text/html" id="status-template">
+      <li class="list-group-item"><strong>%%message%%</strong></li>
+    </script>
+
 <script type="text/javascript">
 
     $('#title<?php echo $page_id ?>').furl({id:'link<?php echo $page_id ?>', seperate: '<?php echo PAGE_SPACER ?>' });

uploader/config.js

@@ -7,7 +7,8 @@ $(function(){
    */
   $('#drag-and-drop-zone').dmUploader({ //
     url: NWI_UPLOAD_URL,
-    maxFileSize: 3000000, // 3 Megs 
+    maxFileSize: NWI_IMAGE_MAX_SIZE,
+    allowedTypes: "image/*", 
     onDragEnter: function(){
       // Happens when dragging something over the DnD area
       this.addClass('active');
@@ -16,23 +17,16 @@ $(function(){
       // Happens when dragging something OUT of the DnD area
       this.removeClass('active');
     },
-    onInit: function(){
-      // Plugin is ready to use
-      ui_add_log('Penguin initialized :)', 'info');
-    },
     onComplete: function(){
       // All files in the queue are processed (success or error)
-      ui_add_log('All pending tranfers finished');
-      window.location.reload();
+      ui_add_status(NWI_COMPLETE_MESSAGE);
     },
     onNewFile: function(id, file){
       // When a new file is added using the file selector or the DnD area
-      ui_add_log('New file added #' + id);
       ui_multi_add_file(id, file);
     },
     onBeforeUpload: function(id){
       // about tho start uploading a file
-      ui_add_log('Starting the upload of #' + id);
       ui_multi_update_file_status(id, 'uploading', 'Uploading...');
       ui_multi_update_file_progress(id, 0, '', true);
     },
@@ -47,21 +41,12 @@ $(function(){
     },
     onUploadSuccess: function(id, data){
       // A file was successfully uploaded
-      ui_add_log('Server Response for file #' + id + ': ' + JSON.stringify(data));
-      ui_add_log('Upload of file #' + id + ' COMPLETED', 'success');
       ui_multi_update_file_status(id, 'success', 'Upload Complete');
       ui_multi_update_file_progress(id, 100, 'success', false);
     },
     onUploadError: function(id, xhr, status, message){
       ui_multi_update_file_status(id, 'danger', message);
       ui_multi_update_file_progress(id, 0, 'danger', false);  
-    },
-    onFallbackMode: function(){
-      // When the browser doesn't support this plugin :(
-      ui_add_log('Plugin cant be used here, running Fallback callback', 'danger');
-    },
-    onFileSizeError: function(file){
-      ui_add_log('File \'' + file.name + '\' cannot be added: size excess limit', 'danger');
     }
   });
 });