Bug fixes

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.1.5 (2024-03-05)
+
+- Fix: Typescript bugs caused by not setting optional options as optional.
+
+- Fix: The bug caused by not selecting the provided form field element by query selector before passing it to the FormData object.
+
+- Fix: Bug caused by trying to get `file` key from the returned data in the progress event listener in the elegant UI type before file upload.
+
 ## 1.1.4 (2024-03-05)
 
 - Fix: A bug caused by trying to update `_custupDefaultUploadSentence` option in `setOptions` method.

__test__/custup.test-d.ts

@@ -5,5 +5,9 @@ import {ICustUpOptions} from '../types/types'
 const instance1 = new CustUp({} as ICustUpOptions);
 const instance2 = new CustUp({autoInitialize: false} as ICustUpOptions);
 
+instance1.on('audio.recordCancel', (e) => {
+    console.log(e.detail)
+})
+
 expectType<CustUp>(instance1);
 expectType<CustUp | undefined>(instance2.initializeUI());

core/custupCore.d.ts

@@ -815,6 +815,10 @@ export default class CustUpCore extends EventTarget {
      * @protected @method configure_axios
      */
     protected configure_axios(): void;
+    /**
+     * @private @method get_attached_form_field
+     */
+    private get_attached_form_field;
     /**
      * @private @method handleUploadFileToEndpoint
      * @param {File} file - file to upload to the server
@@ -1016,9 +1020,11 @@ export default class CustUpCore extends EventTarget {
      * @public @method on - Custom and shothand event listener
      * @typedef {import('../utils/eventNames.js').TEventNames} TEventNames
      * @param {TEventNames} eventName
-     * @param {Function} callback
+     * @param {(e: Event & {detail?: any}) => any} callback
      */
-    public on(eventName: import("../utils/eventNames.js").TEventNames, callback: Function): void;
+    public on(eventName: import("../utils/eventNames.js").TEventNames, callback: (e: Event & {
+        detail?: any;
+    }) => any): void;
     /**
      * @method get_file_sources - Returns all the allowed file sources icons wrapped in HTML element
      * @param {HTMLElement | null} iconsContainer - An HTML element to automatically append the icons to

core/custupCore.js

@@ -1853,8 +1853,7 @@ export default class CustUpCore extends EventTarget {
     handleUploadFile (file=undefined) {
         if (!this.isUploadConditionsSatisfied()) return;
         const _class = this;
-        const form_field = _class.options.file_upload_settings.form_field
-        _class.file_upload_form_data = new FormData(form_field == '' ? undefined : form_field)
+        _class.file_upload_form_data = new FormData(this.get_attached_form_field());
 
         if (!file) {
             const files_to_upload = _class.selectedFiles.filter(file => _class.successfullyUploadedFiles.findIndex(f => f.name == file.name && f.size == file.size) == -1)
@@ -1876,9 +1875,8 @@ export default class CustUpCore extends EventTarget {
      */
     async handleUploadAllFiles () {
         if (!this.isUploadConditionsSatisfied()) return;
-        const _class = this
-        const form_field = _class.options.file_upload_settings.form_field
-        _class.file_upload_form_data = new FormData(form_field == '' ? undefined : form_field)
+        const _class = this;
+        _class.file_upload_form_data = new FormData(this.get_attached_form_field());
 
         if (_class.options.file_upload_settings.additional_data != undefined) { 
             for (const key in _class.options.file_upload_settings.additional_data) {
@@ -1906,7 +1904,7 @@ export default class CustUpCore extends EventTarget {
         attached_files.map(file => _class.file_upload_form_data.append(_class.options.file_upload_settings.files_field_name, file))
 
         const all_files = [...this.selectedFiles, ...attached_files];
-        const beforeUploadStartCheck = this.triggerEvent('upload_beforeStart', {files: all_files, formData: _class.file_upload_form_data, form: this.options.file_upload_settings.form_field})
+        const beforeUploadStartCheck = this.triggerEvent('upload_beforeStart', {files: all_files, formData: _class.file_upload_form_data, form: form_field})
         if (!beforeUploadStartCheck) {
             this.show_message("Please check that all requirements have been satisfied", "error");
             return;
@@ -1973,6 +1971,13 @@ export default class CustUpCore extends EventTarget {
         })
     }
 
+    /**
+     * @private @method get_attached_form_field
+     */
+    get_attached_form_field () {
+        return !_class.options.file_upload_settings.form_field ? undefined : document.querySelector(_class.options.file_upload_settings.form_field);
+    }
+
     /**
      * @private @method handleUploadFileToEndpoint
      * @param {File} file - file to upload to the server
@@ -1983,8 +1988,8 @@ export default class CustUpCore extends EventTarget {
     handleUploadFileToEndpoint (file, upload_element, chunking = false) {
         const _class = this;
         const chunk_size = _class.options.file_upload_settings.chunk_size;
-        const form_field = _class.options.file_upload_settings.form_field;
-        const uniq_formdata = new FormData(form_field == '' ? undefined : form_field)
+
+        const uniq_formdata = new FormData(this.get_attached_form_field());
 
         if (_class.options.file_upload_settings.should_chunk) {
             if (Object.keys(this.file_chunks).includes(file.id)) {
@@ -2370,7 +2375,7 @@ export default class CustUpCore extends EventTarget {
      * @public @method on - Custom and shothand event listener
      * @typedef {import('../utils/eventNames.js').TEventNames} TEventNames
      * @param {TEventNames} eventName
-     * @param {Function} callback 
+     * @param {(e: Event & {detail?: any}) => any} callback 
      */
     on (eventName, callback) {
         this.addEventListener(eventName, callback);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "custup",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Highly customisable file upload library with zero dependencies",
   "main": "src/custup.min.js",
   "scripts": {

src/custup.js

@@ -234,13 +234,14 @@ export default class CustUp extends CustUpCore {
         });
 
         this.on("upload.success", (e) => {
-            upload_btn.disabled = false
-            clear_all_btn.disabled = false
-            upload_btn.innerHTML = "Upload"
+            upload_btn.disabled = false;
+            clear_all_btn.disabled = false;
+            upload_btn.innerHTML = "Upload";
         })
 
         this.on("upload.error", (e) => {
-            upload_btn.disabled = false
+            if (this.options.single_upload) return;
+            upload_btn.disabled = false;
             clear_all_btn.disabled = false
             upload_btn.innerHTML = "Upload"
 
@@ -689,13 +690,15 @@ export default class CustUp extends CustUpCore {
             });
 
             this.on("upload.error", (e) => {
+                if (this.options.single_upload) return;
                 const file_error_el = this._custupEl.querySelector('#'+e.detail.file.id).querySelector('[id*="retry_"]');
                 file_error_el.style.display = "flex";
                 submitBtnEl_clone.innerHTML = "Upload";
                 submitBtnEl_clone.disabled = false;
             });
 
             this.on("upload.retry", (e) => {
+                if (this.options.single_upload) return;
                 const file_error_el = this._custupEl.querySelector('#'+e.detail.file.id).querySelector('[id*="retry_"]');
                 file_error_el.style.display = "none";
             });