Merge pull request #30 from dachcom-digital/feature/filetype

Adds filetype to dropzone preview-element

Author: pascalmoser

README.md

@@ -22,6 +22,9 @@ npm i js-pimcore-formbuilder
 
 ## Upgrade Notes
 
+### 1.3.1
+- **[ENHANCEMENT]**: Adds filetype to dropzone preview-element [#30](https://github.com/dachcom-digital/js-pimcore-formbuilder/pull/30)
+
 ### 1.3.0
 - **[NEW FEATURE]**: Bootstrap 5 layout support
 
@@ -79,4 +82,4 @@ npm i js-pimcore-formbuilder
 [dachcom.com](https://www.dachcom.com), [email protected]  
 Copyright © 2025 DACHCOM.DIGITAL. All rights reserved.  
 
-For licensing details please visit [LICENSE.md](LICENSE.md)  
+For licensing details please visit [LICENSE.md](LICENSE.md)  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-pimcore-formbuilder",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Dependency free js plugins for Pimcore Formbuilder",
   "author": "DACHCOM.DIGITAL",
   "license": "GPL-3.0-or-later",

src/js/dynamicMultiFileHandlers/dropzoneHandler.js

@@ -62,8 +62,20 @@ export default class DropzoneHandler {
         element.classList.add('dropzone');
 
         new Dropzone(element, dropzoneConfiguration)
-            .on('removedfile', (file) => {
+            .on('addedfile', (file) => {
+                const elType = file.previewElement.querySelector('[data-dz-type]');
+
+                if (!elType || !file.type || !file.type.includes('/')) {
+                    return;
+                }
+
+                const splittedType = file.type.split('/');
 
+                if (splittedType.length > 1) {
+                    elType.textContent = splittedType[1];
+                }
+            })
+            .on('removedfile', (file) => {
                 if (this.suspendFileRemoval) {
                     return;
                 }
@@ -81,22 +93,26 @@ export default class DropzoneHandler {
                             id: data.uuid,
                         });
                     });
-            }).on('sending', (file, xhr, formData) => {
-            submitButton.setAttribute('disabled', 'disabled');
-            formData.append('uuid', file.upload.uuid);
-        }).on('complete', () => {
-            submitButton.removeAttribute('disabled');
-        }).on('success', (file, response) => {
-            this.addToStorageField(storageField, {
-                id: response.uuid,
-                fileName: response.fileName,
+            })
+            .on('sending', (file, xhr, formData) => {
+                submitButton.setAttribute('disabled', 'disabled');
+                formData.append('uuid', file.upload.uuid);
+            })
+            .on('complete', () => {
+                submitButton.removeAttribute('disabled');
+            })
+            .on('success', (file, response) => {
+                this.addToStorageField(storageField, {
+                    id: response.uuid,
+                    fileName: response.fileName,
+                });
+            })
+            .on('cancel', () => {
+                submitButton.removeAttribute('disabled');
+            })
+            .on('reset', () => {
+                this.suspendFileRemoval = false;
             });
-        }).on('cancel', () => {
-            submitButton.removeAttribute('disabled');
-        }).on('reset', () => {
-            this.suspendFileRemoval = false;
-        });
-
     }
 
     addToStorageField(storage, newData) {