diff --git a/README.md b/README.md
index bc7a4e1..b5d6d42 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# VDM Uikit Uploader Integration Guide
+# VDM Uikit File Integration Guide
 
 ## Overview
 
-Uploader is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website. By simply adding the `Uploader` class to any element that triggers an upload, you can enable users to upload files easily.
+Upload/Delete is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website. By simply adding the `vdm-uikit` class to any element that triggers an upload, you can enable users to upload files easily.
 
 ## How to Add Uploader to Your Website
 
@@ -12,12 +12,12 @@ Uploader is an intuitive and lightweight JavaScript solution for embedding uploa
 
    ```html
    <!-- Include the Uploader script from jsDelivr CDN -->
-   <script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@latest/dist/js/Uploader.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@latest/dist/js/vdm.min.js"></script>
    ```
 
 2. **Markup Your Upload Area:**
 
-   In the body of your HTML document, apply the `vdm-uikit-uploader` class to any element that should trigger an upload action. Here is an example using a custom div:
+   In the body of your HTML document, apply the `vdm-uikit` class to any element that should trigger an upload action. Here is an example using a custom div:
 
    ```html
    <select id="type-field-id" class="uk-select" aria-label="Select">
@@ -25,7 +25,7 @@ Uploader is an intuitive and lightweight JavaScript solution for embedding uploa
         <option value="guid-value-2">Option 02</option>
    </select>
 
-   <div id="upload_id" class="vdm-uikit-uploader uk-placeholder uk-text-center"
+   <div id="upload_id" class="vdm-uikit uk-placeholder uk-text-center"
         data-type-id="type-field-id"
         data-progressbar-id="progressbar-id"
         data-display-id="display-id"
@@ -51,23 +51,24 @@ Uploader is an intuitive and lightweight JavaScript solution for embedding uploa
 
 3. **Initializing the Uploader:**
 
-   The script will automatically initialize all elements with the `vdm-uikit-uploader` class. You don’t need to manually initialize it unless additional customization is required.
+   The script will automatically initialize all elements with the `vdm-uikit` class. You don’t need to manually initialize it unless additional customization is required.
 
 4. **Customization:**
 
    You must set the various field configurations this way (before loading the class file):
    ```js
    <script>
-   window.vdmUploaderConfig = {
-      endpoint: 'https://your-type-endpoint.com',
-      targetClass: 'vdm-uikit-uploader',
+   window.vdm.uikit.config = {
+      endpoint_type: 'https://your-type-endpoint.com',
+      target_class: 'vdm-uikit',
       upload_id: {
-         endpoint: 'https://your-upload-endpoint.com',
-         endpoint_diplay: 'https://your-display-endpoint.com'
+         endpoint_upload: 'https://your-upload-endpoint.com',
+         endpoint_diplay: 'https://your-display-endpoint.com',
+         endpoint_delete: 'https://your-delete-endpoint.com'
       }
    };
    </script>
-   <script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@2.0.5/dist/js/Uploader.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@latest/dist/js/vdm.min.js"></script>
    ```
 
 ### Preventing UIkit Collisions
diff --git a/dist/js/Uploader.min.js b/dist/js/Uploader.min.js
deleted file mode 100644
index 0b2e26f..0000000
--- a/dist/js/Uploader.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! VDM Uikit Uploader v2.1.2 | https://git.vdm.dev/joomla/uikit | (c) 2020 - 2024 Llewellyn van der Merwe | MIT License */
-!function(){"use strict";function t(t,e,r){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:r;throw new TypeError("Private element is not present on this object")}function e(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function r(t){return function(){var r=this,n=arguments;return new Promise((function(o,i){var a=t.apply(r,n);function c(t){e(a,o,i,c,u,"next",t)}function u(t){e(a,o,i,c,u,"throw",t)}c(void 0)}))}}function n(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(e,r){return e.get(t(e,r))}function a(t,e,r){n(t,e),e.set(t,r)}function c(e,r,n){return e.set(t(e,r),n),n}function u(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,p(n.key),n)}}function s(t,e,r){return e&&u(t.prototype,e),r&&u(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t,e,r){return(e=p(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function f(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function d(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?f(Object(r),!0).forEach((function(e){l(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function h(){h=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function s(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,r){return t[e]=r}}function l(t,e,r,n){var i=e&&e.prototype instanceof g?e:g,a=Object.create(i.prototype),c=new A(n||[]);return o(a,"_invoke",{value:L(t,r,c)}),a}function f(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=l;var d="suspendedStart",p="suspendedYield",v="executing",y="completed",m={};function g(){}function b(){}function w(){}var E={};s(E,a,(function(){return this}));var x=Object.getPrototypeOf,k=x&&x(x(M([])));k&&k!==r&&n.call(k,a)&&(E=k);var O=w.prototype=g.prototype=Object.create(E);function j(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function I(t,e){function r(o,i,a,c){var u=f(t[o],t,i);if("throw"!==u.type){var s=u.arg,l=s.value;return l&&"object"==typeof l&&n.call(l,"__await")?e.resolve(l.__await).then((function(t){r("next",t,a,c)}),(function(t){r("throw",t,a,c)})):e.resolve(l).then((function(t){s.value=t,a(s)}),(function(t){return r("throw",t,a,c)}))}c(u.arg)}var i;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return i=i?i.then(o,o):o()}})}function L(e,r,n){var o=d;return function(i,a){if(o===v)throw Error("Generator is already running");if(o===y){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=S(c,n);if(u){if(u===m)continue;return u}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===d)throw o=y,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=v;var s=f(e,r,n);if("normal"===s.type){if(o=n.done?y:p,s.arg===m)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(o=y,n.method="throw",n.arg=s.arg)}}}function S(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,S(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),m;var i=f(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,m;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,m):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,m)}function P(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function A(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(P,this),this.reset(!0)}function M(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return i.next=i}}throw new TypeError(typeof e+" is not iterable")}return b.prototype=w,o(O,"constructor",{value:w,configurable:!0}),o(w,"constructor",{value:b,configurable:!0}),b.displayName=s(w,u,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===b||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,s(t,u,"GeneratorFunction")),t.prototype=Object.create(O),t},e.awrap=function(t){return{__await:t}},j(I.prototype),s(I.prototype,c,(function(){return this})),e.AsyncIterator=I,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new I(l(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},j(O),s(O,u,"Generator"),s(O,a,(function(){return this})),s(O,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},e.values=M,A.prototype={constructor:A,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(T),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),s=n.call(a,"finallyLoc");if(u&&s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!s)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,m):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),m},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),m}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;T(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:M(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),m}},e}function p(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function v(t){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},v(t)}var y=new WeakMap,m=new WeakMap,g=new WeakMap,b=new WeakMap,w=s((function t(e){var n=this;o(this,t),a(this,y,void 0),a(this,m,{}),l(this,"set",(function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;i(m,n)[t]=i(m,n)[t]||{},"object"===v(e)?Object.assign(i(m,n)[t],e):i(m,n)[t][e]=r})),l(this,"get",(function(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=i(m,n)[t];return a?null===r?a:null!==(e=a[r])&&void 0!==e?e:o:o})),l(this,"init",function(){var t=r(h().mark((function t(e,r){var o,a,c,u=arguments;return h().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(o=u.length>2&&void 0!==u[2]&&u[2],!i(m,n)[e]||o){t.next=4;break}return t.abrupt("return");case 4:return t.prev=4,a=i(b,n).call(n,i(y,n),r),t.next=8,i(g,n).call(n,a);case 8:if(null==(c=t.sent)||!c.data||"object"!==v(c.data)){t.next=14;break}n.set(e,c.data),t.next=16;break;case 14:if(null==c||!c.error){t.next=16;break}throw new Error(c.error||"An error occurred during the file type request.");case 16:t.next=21;break;case 18:t.prev=18,t.t0=t.catch(4);case 21:case"end":return t.stop()}}),t,null,[[4,18]])})));return function(e,r){return t.apply(this,arguments)}}()),a(this,g,function(){var t=r(h().mark((function t(e){var r;return h().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,fetch(e,{method:"GET",headers:{"Content-Type":"application/json"}});case 2:if((r=t.sent).ok){t.next=6;break}return t.abrupt("return");case 6:return t.next=8,r.json();case 8:return t.abrupt("return",t.sent);case 9:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()),l(this,"getParams",(function(t){var e={};return Array.isArray(t)&&0!==t.length?(t.forEach((function(t){var r=document.getElementById(t);r&&(e[t]=r.value)})),e):e})),a(this,b,(function(t,e){var r=t.includes("?")?"&":"?";return"".concat(t).concat(r,"guid=").concat(e)})),c(y,this,e)})),E=new WeakMap,x=s((function t(){var e=this;o(this,t),l(this,"set",function(){var t=r(h().mark((function t(r,n,o){var a,c,u,s,l,f,d;return h().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,a=i(E,e).call(e,r,o),t.next=4,fetch(a,{method:"GET",headers:{"Content-Type":"application/json"}});case 4:if((c=t.sent).ok){t.next=8;break}return t.abrupt("return");case 8:return t.next=10,c.json();case 10:if(!(u=t.sent).error){t.next=14;break}return t.abrupt("return");case 14:u.data&&""!==u.data.trim()?(f=new CustomEvent("vdm.uikit.uploader.beforeFilesDisplay",{detail:{result:u,displayArea:n}}),document.dispatchEvent(f),n.innerHTML=u.data,n.removeAttribute("hidden"),d=new CustomEvent("vdm.uikit.uploader.afterFilesDisplay",{detail:{result:u,displayArea:n}}),document.dispatchEvent(d)):(s=new CustomEvent("vdm.uikit.uploader.beforeHideFilesDisplay",{detail:{result:u,displayArea:n}}),document.dispatchEvent(s),n.innerHTML="",n.setAttribute("hidden","hidden"),l=new CustomEvent("vdm.uikit.uploader.afterHideFilesDisplay",{detail:{result:u,displayArea:n}}),document.dispatchEvent(l)),t.next=20;break;case 17:t.prev=17,t.t0=t.catch(0);case 20:case"end":return t.stop()}}),t,null,[[0,17]])})));return function(e,r,n){return t.apply(this,arguments)}}()),a(this,E,(function(t,e){if(!e||0===Object.keys(e).length)return t;var r=t.includes("?")?"&":"?",n=new URLSearchParams(e);return"".concat(t).concat(r).concat(n.toString())}))})),k=new WeakMap,O=new WeakMap,j=new WeakMap,I=new WeakMap,L=new WeakSet,S=s((function e(r,i,u){var s,l;o(this,e),n(s=this,l=L),l.add(s),a(this,k,void 0),a(this,O,void 0),a(this,j,void 0),a(this,I,{}),c(k,this,new w(i)),c(O,this,new x),c(j,this,u),t(L,this,P).call(this,r)}));function P(e){var r=this;Object.keys(e).forEach((function(n){t(L,r,T).call(r,n,e[n])}))}function T(e,n){var o=this,i=n.bar,a=n.typeId,c=n.endpoint,u=n.successId,s=n.errorId,l=n.allowedFormatId,f=n.fileTypeId,d=n.displayId,p=n.displayEndpoint;t(L,this,C).call(this,p,d);var v=document.getElementById(a);if(v){var y=function(){var n=r(h().mark((function r(n){return h().wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(!(n&&n.length>1)){r.next=9;break}return r.prev=1,r.next=4,t(L,o,A).call(o,e,n,i,c,u,s,l,f,d,p);case 4:r.next=9;break;case 6:r.prev=6,r.t0=r.catch(1),t(L,o,F).call(o,r.t0.message);case 9:case"end":return r.stop()}}),r,null,[[1,6]])})));return function(t){return n.apply(this,arguments)}}();v.addEventListener("change",(function(){return y(v.value)})),y(v.value).catch((function(e){return t(L,o,F).call(o,e.message)}))}else t(L,this,B).call(this,"Type field with ID ".concat(a," not found"))}function A(t,e,r,n,o,i,a,c,u,s){return M.apply(this,arguments)}function M(){return(M=r(h().mark((function e(r,n,o,a,c,u,s,l,f,p){var v,y,m=this;return h().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,t(L,this,G).call(this,"beforeInit",{id:r,typeGuid:n,progressBarId:o,uploadEndpoint:a,successId:c,errorId:u,allowedFormatId:s,fileTypeId:l,displayId:f,displayEndpoint:p}),v="".concat(r).concat(n),e.next=5,i(k,this).init(v,n,!0);case 5:y=t(L,this,_).call(this,o,c,u,s,l,f),t(L,this,G).call(this,"afterElementsInit",d({},y)),t(L,this,U).call(this,y,v,c,u),i(j,this).upload("#".concat(r),{url:t(L,this,D).call(this,a,n),multiple:!0,allow:i(k,this).get(v,"allow",!1),name:i(k,this).get(v,"name","files"),beforeSend:function(e){return t(L,m,W).call(m,v,e)},beforeAll:function(e){return t(L,m,G).call(m,"beforeAll",{files:e})},load:function(e){return t(L,m,G).call(m,"load",{event:e})},error:function(e){return t(L,m,N).call(m,e,y.errorMessage)},complete:function(e){return t(L,m,H).call(m,e,y.successMessage)},loadStart:function(e){return t(L,m,q).call(m,e,y.progressBar)},progress:function(e){return t(L,m,Y).call(m,e,y.progressBar)},loadEnd:function(e){return t(L,m,z).call(m,e,y.progressBar)},completeAll:function(e){return t(L,m,R).call(m,e,y.progressBar,y.successMessage,y.errorMessage,p,f,v)}}),e.next=14;break;case 11:throw e.prev=11,e.t0=e.catch(0),e.t0;case 14:case"end":return e.stop()}}),e,this,[[0,11]])})))).apply(this,arguments)}function _(t,e,r,n,o,i){return{progressBar:document.getElementById(t),successMessage:document.getElementById(e),errorMessage:document.getElementById(r),allowedFormatSpan:document.getElementById(n),fileTypeSpan:document.getElementById(o),displayArea:document.getElementById(i)}}function C(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=document.getElementById(e);t&&n&&i(O,this).set(t,n,r)}function F(t){i(j,this).notification({message:t,status:"danger",timeout:7e3})}function B(t){}function G(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};document.dispatchEvent(new CustomEvent("vdm.uikit.uploader.".concat(t),{detail:e}))}function D(t,e){var r=t.includes("?")?"&":"?";return"".concat(t).concat(r,"guid=").concat(e)}function U(t,e,r,n){t.successMessage&&t.successMessage.setAttribute("hidden","hidden"),t.errorMessage&&t.errorMessage.setAttribute("hidden","hidden"),t.allowedFormatSpan&&(t.allowedFormatSpan.innerHTML=i(k,this).get(e,"allow_span","")),t.fileTypeSpan&&(t.fileTypeSpan.innerHTML=i(k,this).get(e,"file_type_span","file"))}function W(e,r){t(L,this,G).call(this,"beforeSend",{environment:r}),r.data.params=i(k,this).getParams(i(k,this).get(e,"param_fields")),t(L,this,G).call(this,"afterSendPreparation",{environment:r})}function N(e,r){t(L,this,G).call(this,"error",{error:e}),r&&(r.removeAttribute("hidden"),r.textContent="Upload failed.")}function H(e,r){t(L,this,G).call(this,"complete",{xhr:e}),r&&(r.removeAttribute("hidden"),r.textContent="Upload completed successfully.")}function q(e,r){t(L,this,G).call(this,"loadStart",{event:e}),r&&(r.removeAttribute("hidden"),r.max=e.total,r.value=e.loaded)}function Y(e,r){t(L,this,G).call(this,"progress",{event:e}),r&&(r.max=e.total,r.value=e.loaded)}function z(e,r){t(L,this,G).call(this,"loadEnd",{event:e}),r&&(r.max=e.total,r.value=e.loaded)}function R(e,r,n,o,a,c,u){t(L,this,G).call(this,"completeAll",{xhr:e}),r&&setTimeout((function(){r.setAttribute("hidden","hidden"),n&&n.setAttribute("hidden","hidden"),o&&o.setAttribute("hidden","hidden")}),5e3),t(L,this,C).call(this,a,c,i(k,this).getParams(i(k,this).get(u,"display_fields")))}var J,K=["endpoint","targetClass"];J=window,document.addEventListener("DOMContentLoaded",(function(){var t;t=J.UIkit?J.UIkit:require("uikit").default;var e=J.vdmUploaderConfig||{},r=e.endpoint,n=e.targetClass;if(function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r={};for(var n in t)if({}.hasOwnProperty.call(t,n)){if(e.includes(n))continue;r[n]=t[n]}return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.includes(r)||{}.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}}(e,K),r&&n){var o=document.querySelectorAll("."+n),i={};o.forEach((function(t){var e=t.getAttribute("id"),r=J.vdmUploaderConfig[e]?J.vdmUploaderConfig[e].endpoint:null;if(r){var n=t.dataset.progressbarId,o=t.dataset.typeId,a=J.vdmUploaderConfig[e]?J.vdmUploaderConfig[e].endpoint_display:null,c=t.dataset.displayId||null,u=t.dataset.successId||null,s=t.dataset.errorId||null,l=t.dataset.allowedFormatId||null,f=t.dataset.fileTypeId||null;i[e]={bar:n,typeId:o,endpoint:r,successId:u,errorId:s,allowedFormatId:l,fileTypeId:f,displayId:c,displayEndpoint:a}}})),Object.keys(i).length>0&&new S(i,r,t)}}))}();
diff --git a/dist/js/Uploader.js b/dist/js/vdm.js
similarity index 65%
rename from dist/js/Uploader.js
rename to dist/js/vdm.js
index eca78aa..9406f24 100644
--- a/dist/js/Uploader.js
+++ b/dist/js/vdm.js
@@ -1,5 +1,5 @@
 /**
- * VDM Uikit Uploader v2.1.2
+ * VDM Uikit v3.0.0
  * https://git.vdm.dev/joomla/uikit
  * (c) 2020 - 2024 Llewellyn van der Merwe
  * MIT License
@@ -9,14 +9,14 @@
     'use strict';
 
     /**
-     * `UploadHelper` is a utility class that simplifies operations related to file uploading.
+     * `FileType` is a utility class that simplifies operations related to file uploading.
      * It handles the storage and retrieval of metadata associated with each upload and initializes
      * the upload process by setting up endpoint configuration. It also provides methods for
      * triggering the upload activities in an asynchronous manner.
      *
      * @class
      * @example
-     * const helper = new UploadHelper('http://example.com/upload');
+     * const helper = new FileType('http://example.com/upload');
      * const uniqueId = 'file123';
      * const globalId = 'glob124';
      * const data = { user: 'John Doe', file: 'myfile.txt' };
@@ -24,7 +24,7 @@
      * helper.set(uniqueId, data);
      * await helper.init(uniqueId, globalId);
      */
-    class UploadHelper {
+    class FileType {
         /**
          * The endpoint to which files would be uploaded.
          * Stored as a private property and used internally within the class methods.
@@ -36,7 +36,7 @@
         #endpoint;
 
         /**
-         * It is a private object used to store the data associated with an instance of `UploadHelper`.
+         * It is a private object used to store the data associated with an instance of `FileType`.
          * Default is an empty object.
          * This data is used when performing uploads.
          *
@@ -46,9 +46,9 @@
         #data = {};
 
         /**
-         * Constructor for the UploadHelper class.
+         * Constructor for the FileType class.
          *
-         * @param {string} endpoint - The endpoint to be associated with the instance of the UploadHelper.
+         * @param {string} endpoint - The endpoint to be associated with the instance of the FileType.
          */
         constructor(endpoint) {
             // Initialize private field with passed endpoint argument
@@ -104,7 +104,7 @@
         };
 
         /**
-         * Asynchronously initializes the UploadHelper object.
+         * Asynchronously initializes the FileType object.
          *
          * @param {string} id - The unique identifier associated with the initialization.
          * @param {string} guid - The globally unique identifier used to build the URL for fetching.
@@ -120,7 +120,7 @@
             }
 
             try {
-                const url = this.#buildUrl(this.#endpoint, guid);
+                const url = this.#buildUrl(guid);
                 const result = await this.#fetchData(url);
 
                 if (true) console.log('Data fetched:', result);
@@ -188,17 +188,16 @@
         /**
          * Builds a URL appending a unique identifier as a parameter.
          *
-         * @param {string} endpoint - The base endpoint of the URL.
          * @param {string} guid - The globally unique identifier to append to the URL.
          * @returns {string} The constructed URL with the appended unique identifier.
          * @private
          */
-        #buildUrl = (endpoint, guid) => {
+        #buildUrl = (guid) => {
             // Determine the appropriate separator for the query parameter
-            const separator = endpoint.includes('?') ? '&' : '?';
+            const separator = this.#endpoint.includes('?') ? '&' : '?';
 
             // Return the constructed URL
-            return `${endpoint}${separator}guid=${guid}`;
+            return `${this.#endpoint}${separator}guid=${guid}`;
         };
     }
 
@@ -216,7 +215,7 @@
      *
      * await helper.set(endpoint, area, params);
      */
-    class DisplayHelper {
+    class Display {
         constructor() {
         }
 
@@ -233,6 +232,9 @@
          */
         set = async (displayEndpoint, displayArea, params) => {
             try {
+                // Trigger a custom event before hide files display the entity files
+                this.#dispatchEvent('beforeGetFilesDisplay', {endpoint: displayEndpoint, element: displayArea, params: params});
+
                 // Build the URL with the query parameters
                 const url = this.#buildUrl(displayEndpoint, params);
 
@@ -266,35 +268,23 @@
                 // If there's no response.data or it's empty, clear the display area
                 if (!result.data || result.data.trim() === '') {
                     // Trigger a custom event before hide files display the entity files
-                    const beforeHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.beforeHideFilesDisplay', {
-                        detail: {result, displayArea}
-                    });
-                    document.dispatchEvent(beforeHideFilesDisplay);
+                    this.#dispatchEvent('beforeHideFilesDisplay', {result: result, element: displayArea});
 
                     displayArea.innerHTML = ''; // Empty the display area
                     displayArea.setAttribute('hidden', 'hidden');
 
                     // Trigger a custom event after hide files display the entity files
-                    const afterHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.afterHideFilesDisplay', {
-                        detail: {result, displayArea}
-                    });
-                    document.dispatchEvent(afterHideFilesDisplay);
+                    this.#dispatchEvent('afterHideFilesDisplay', {result: result, element: displayArea});
                 } else {
                     // Trigger a custom event before displaying the entity files
-                    const beforeFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.beforeFilesDisplay', {
-                        detail: {result, displayArea}
-                    });
-                    document.dispatchEvent(beforeFilesDisplayEvent);
+                    this.#dispatchEvent('beforeFilesDisplay', {result: result, element: displayArea});
 
                     // Replace the display area content with the new HTML
                     displayArea.innerHTML = result.data;
                     displayArea.removeAttribute('hidden');
 
                     // Trigger a custom event after displaying the entity files
-                    const afterFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.afterFilesDisplay', {
-                        detail: {result, displayArea}
-                    });
-                    document.dispatchEvent(afterFilesDisplayEvent);
+                    this.#dispatchEvent('afterFilesDisplay', {result: result, element: displayArea});
                 }
             } catch (error) {
                 // If an error occurs, log it in debug mode
@@ -304,6 +294,17 @@
             }
         };
 
+        /**
+         * Dispatches a custom event with optional detail data.
+         *
+         * @param {string} eventName - The name of the event to dispatch.
+         * @param {object} [detail={}] - The optional detail data to include with the event.
+         * @return {void}
+         */
+        #dispatchEvent(eventName, detail = {}) {
+            document.dispatchEvent(new CustomEvent(`vdm.uikit.display.${eventName}`, {detail}));
+        }
+
         /**
          * It's a private method that builds a complete URL from the endpoint and an object containing parameters.
          * It uses the URLSearchParams interface to turn the parameters object to a query string,
@@ -329,27 +330,41 @@
     }
 
     /**
-     * Helper class for uploading files.
+     * Class for uploading files.
      *
      * @class
      * @classdesc This class provides methods for uploading files to a server.
      */
-    class UikitUploader {
-        #uploadHelper;
-        #displayHelper;
-        #uikit;
-        #uploadInstances = {};
+    class UploadFile {
+        /**
+         * Utility class for uploading files.
+         *
+         * @class
+         */
+        #fileType;
 
         /**
-         * Creates an instance of the UikitUploader class.
+         * Helper class for displaying elements on the UI.
+         *
+         * @class
+         */
+        #display;
+
+        /**
+         * The UIKit variable is a reference to a UI framework for building web applications.
+         */
+        #uikit;
+
+        /**
+         * Creates an instance of the UploadFile class.
          *
          * @param {Object} config - Configuration details for uploader instances.
          * @param {string} endpoint - The endpoint where the files will be uploaded.
          * @param {any} uikit - Reference to UIKit.
          */
         constructor(config, endpoint, uikit) {
-            this.#uploadHelper = new UploadHelper(endpoint);
-            this.#displayHelper = new DisplayHelper();
+            this.#fileType = new FileType(endpoint);
+            this.#display = new Display();
             this.#uikit = uikit;
 
             this.#initializeFields(config);
@@ -390,13 +405,13 @@
                     try {
                         await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
                     } catch (error) {
-                        this.#notifyError(error.message);
+                        this.#showNotification(error.message, 'danger');
                     }
                 }
             };
 
             typeField.addEventListener('change', () => initializeUpload(typeField.value));
-            initializeUpload(typeField.value).catch(error => this.#notifyError(error.message));
+            initializeUpload(typeField.value).catch(error => this.#showNotification(error.message, 'danger'));
         }
 
         /**
@@ -429,7 +444,7 @@
                 });
 
                 const call = `${id}${typeGuid}`;
-                await this.#uploadHelper.init(call, typeGuid, true);
+                await this.#fileType.init(call, typeGuid, true);
 
                 const elements = this.#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId);
 
@@ -440,8 +455,8 @@
                 this.#uikit.upload(`#${id}`, {
                     url: this.#buildUrl(uploadEndpoint, typeGuid),
                     multiple: true,
-                    allow: this.#uploadHelper.get(call, 'allow', false),
-                    name: this.#uploadHelper.get(call, 'name', 'files'),
+                    allow: this.#fileType.get(call, 'allow', false),
+                    name: this.#fileType.get(call, 'name', 'files'),
                     beforeSend: (env) => this.#handleBeforeSend(call, env),
                     beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}),
                     load: (e) => this.#dispatchEvent('load', {event: e}),
@@ -459,50 +474,57 @@
 
         /**
          * Returns the required HTML elements by their IDs.
+         * If an element ID is null or the element does not exist on the page,
+         * the corresponding value in the returned object will be null.
          *
-         * @param {string} progressBarId - The ID of the progress bar element.
-         * @param {string} successId - The ID of the success message element.
-         * @param {string} errorId - The ID of the error message element.
-         * @param {string} allowedFormatId - The ID of the allowed format span element.
-         * @param {string} fileTypeId - The ID of the file type span element.
-         * @param {string} displayId - The ID of the display area element.
-         * @returns {object} - An object containing the required HTML elements.
+         * @param {string|null} progressBarId - The ID of the progress bar element, or null.
+         * @param {string|null} successId - The ID of the success message element, or null.
+         * @param {string|null} errorId - The ID of the error message element, or null.
+         * @param {string|null} allowedFormatId - The ID of the allowed format span element, or null.
+         * @param {string|null} fileTypeId - The ID of the file type span element, or null.
+         * @param {string|null} displayId - The ID of the display area element, or null.
+         * @returns {object} - An object containing the required HTML elements or null if they do not exist.
          */
         #getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId) {
             return {
-                progressBar: document.getElementById(progressBarId),
-                successMessage: document.getElementById(successId),
-                errorMessage: document.getElementById(errorId),
-                allowedFormatSpan: document.getElementById(allowedFormatId),
-                fileTypeSpan: document.getElementById(fileTypeId),
-                displayArea: document.getElementById(displayId)
+                progressBar: progressBarId ? document.getElementById(progressBarId) : null,
+                successMessage: successId ? document.getElementById(successId) : null,
+                errorMessage: errorId ? document.getElementById(errorId) : null,
+                allowedFormatSpan: allowedFormatId ? document.getElementById(allowedFormatId) : null,
+                fileTypeSpan: fileTypeId ? document.getElementById(fileTypeId) : null,
+                displayArea: displayId ? document.getElementById(displayId) : null
             };
         }
 
         /**
          * Initializes the display area with data from the display endpoint.
          *
-         * @param {string} displayEndpoint - The endpoint to retrieve the display data from.
-         * @param {string} displayId - The id of the display area element in the DOM.
+         * @param {string|null} displayEndpoint - The endpoint to retrieve the display data from.
+         * @param {string|null} displayId - The id of the display area element in the DOM.
          * @param {object} params - Additional parameters to be passed to the display helper.
-         *
          * @return {void}
          */
         #setupDisplayArea(displayEndpoint, displayId, params = {}) {
-            const displayArea = document.getElementById(displayId);
+            const displayArea = displayId ? document.getElementById(displayId) : null;
             if (displayEndpoint && displayArea) {
-                this.#displayHelper.set(displayEndpoint, displayArea, params);
+                this.#display.set(displayEndpoint, displayArea, params);
             }
         }
 
         /**
-         * Notifies the user of an error using UIKit notifications.
+         * Displays a notification with the given message and status.
          *
-         * @param {string} message - The error message to display.
-         * @return {void}
+         * @param {string} message - The message to be displayed in the notification.
+         * @param {string} status - The status of the notification (e.g., 'success', 'error', 'warning').
+         * @return {void} - Does not return a value.
          */
-        #notifyError(message) {
-            this.#uikit.notification({message, status: 'danger', timeout: 7000});
+        #showNotification(message, status) {
+            this.#uikit.notification({
+                message,
+                status,
+                pos: 'top-center',
+                timeout: 7000
+            });
         }
 
         /**
@@ -552,8 +574,8 @@
         #prepareUploadUI(elements, call, successId, errorId) {
             if (elements.successMessage) elements.successMessage.setAttribute('hidden', 'hidden');
             if (elements.errorMessage) elements.errorMessage.setAttribute('hidden', 'hidden');
-            if (elements.allowedFormatSpan) elements.allowedFormatSpan.innerHTML = this.#uploadHelper.get(call, 'allow_span', '');
-            if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#uploadHelper.get(call, 'file_type_span', 'file');
+            if (elements.allowedFormatSpan) elements.allowedFormatSpan.innerHTML = this.#fileType.get(call, 'allow_span', '');
+            if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#fileType.get(call, 'file_type_span', 'file');
         }
 
         /**
@@ -565,7 +587,7 @@
          */
         #handleBeforeSend(call, environment) {
             this.#dispatchEvent('beforeSend', {environment});
-            environment.data.params = this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'param_fields'));
+            environment.data.params = this.#fileType.getParams(this.#fileType.get(call, 'param_fields'));
             this.#dispatchEvent('afterSendPreparation', {environment});
         }
 
@@ -589,13 +611,15 @@
          * Handles the upload completion.
          *
          * @param {XMLHttpRequest} xhr - The XMLHttpRequest object representing the upload request.
-         * @param {HTMLElement} successMessage - The success message element to display.
+         * @param {HTMLElement|null} successMessage - The success message element to display.
          */
         #handleComplete(xhr, successMessage) {
             this.#dispatchEvent('complete', {xhr});
             if (successMessage) {
                 successMessage.removeAttribute('hidden');
                 successMessage.textContent = 'Upload completed successfully.';
+            } else {
+                this.#showNotification('Upload completed successfully.', 'primary');
             }
         }
 
@@ -603,7 +627,7 @@
          * Handles the loadStart event.
          *
          * @param {Event} e - The loadStart event object.
-         * @param {HTMLElement} progressBar - The progress bar element. Optional.
+         * @param {HTMLElement|null} progressBar - The progress bar element. Optional.
          * @return {void}
          */
         #handleLoadStart(e, progressBar) {
@@ -619,7 +643,7 @@
          * Handles the progress event.
          *
          * @param {Event} e - The progress event.
-         * @param {Element} progressBar - The progress bar element.
+         * @param {Element|null} progressBar - The progress bar element.
          *
          * @return {void}
          */
@@ -635,7 +659,7 @@
          * Handles the loadEnd event.
          *
          * @param {Event} e - The loadEnd event object.
-         * @param {Element} progressBar - The progress bar element to update.
+         * @param {Element|null} progressBar - The progress bar element to update.
          *
          * @return {void}
          */
@@ -651,11 +675,11 @@
          * Handles the completion of all uploads.
          *
          * @param {XMLHttpRequest} xhr - The XMLHttpRequest object used for the uploads.
-         * @param {HTMLElement} progressBar - The progress bar element.
-         * @param {HTMLElement} successMessage - The success message element.
-         * @param {HTMLElement} errorMessage - The error message element.
-         * @param {string} displayEndpoint - The display endpoint.
-         * @param {string} displayId - The display ID.
+         * @param {HTMLElement|null} progressBar - The progress bar element.
+         * @param {HTMLElement|null} successMessage - The success message element.
+         * @param {HTMLElement|null} errorMessage - The error message element.
+         * @param {string|null} displayEndpoint - The display endpoint.
+         * @param {string|null} displayId - The display ID.
          * @param {Object} call - The call object.
          *
          * @return {void}
@@ -669,7 +693,162 @@
                     if (errorMessage) errorMessage.setAttribute('hidden', 'hidden');
                 }, 5000);
             }
-            this.#setupDisplayArea(displayEndpoint, displayId, this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'display_fields')));
+            this.#setupDisplayArea(displayEndpoint, displayId, this.#fileType.getParams(this.#fileType.get(call, 'display_fields')));
+        }
+    }
+
+    /**
+     * Helper class for deleting files from the server.
+     *
+     * @class
+     * @classdesc This class provides methods for deleting files from the server.
+     */
+    class DeleteFile {
+        /**
+         * The endpoint to which files would be deleted.
+         * Stored as a private property and used internally within the class methods.
+         * This field must be a string representing a valid URL.
+         *
+         * @type {string}
+         * @private
+         */
+        #endpoint;
+
+        /**
+         * The UIKit variable is a reference to a UI framework for building web applications.
+         */
+        #uikit;
+
+        /**
+         * The error message that is displayed when the delete endpoint is not configured.
+         *
+         * @type {string}
+         */
+        static ERROR_ENDPOINT = 'Error: The delete endpoint is not configured.';
+
+        /**
+         * Creates an instance of the DeleteHelper class.
+         *
+         * @param {string} endpoint - The endpoint where the files will be uploaded.
+         * @param {any} uikit - Reference to UIKit.
+         */
+        constructor(endpoint, uikit) {
+            this.#endpoint = endpoint;
+            this.#uikit = uikit;
+        }
+
+        /**
+         * Deletes a file with the given fileGuid.
+         *
+         * @param {string} fileGuid - The unique identifier of the file to delete.
+         * @return {void}
+         */
+        delete(fileGuid) {
+            if (!fileGuid || fileGuid.length <= 30) {
+                return;
+            }
+
+            this.#uikit.modal.confirm('Are you sure you want to delete this file! It can not be undone!')
+                .then(() => this.#serverDelete(fileGuid));
+        }
+
+        /**
+         * Deletes a file from the server.
+         *
+         * @param {string} fileGuid - The unique identifier of the file to be deleted.
+         * @return {void}
+         */
+        #serverDelete(fileGuid) {
+            if (!this.#endpoint) {
+                console.error(DeleteFile.ERROR_ENDPOINT);
+                return;
+            }
+
+            this.#dispatchEvent('beforeFileDelete', {guid: fileGuid});
+
+            fetch(this.#buildUrl(fileGuid), {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(response => response.json())
+                .then(this.#handleResponse.bind(this, fileGuid))
+                .catch(console.error);
+        }
+
+        /**
+         * Handles the response from the server after a file upload.
+         * Removes the file from the UI if the response is successful and shows a success notification.
+         * Shows an error notification if the response contains an error.
+         * @param {string} fileGuid - The unique identifier of the file that was uploaded.
+         * @param {object} data - The response data from the server.
+         * @return {void}
+         */
+        #handleResponse(fileGuid, data) {
+            if (data.success) {
+                this.#fileRemoveFromUI(fileGuid);
+                this.#showNotification(data.success, 'primary');
+                this.#dispatchEvent('afterFileDelete', {data: data, guid: fileGuid});
+            } else if (data.error) {
+                this.#dispatchEvent('onFileDeleteError', {data: data, guid: fileGuid});
+                this.#showNotification(data.error, 'danger');
+            }
+        }
+
+        /**
+         * Displays a notification with the given message and status.
+         *
+         * @param {string} message - The message to be displayed in the notification.
+         * @param {string} status - The status of the notification (e.g., 'success', 'error', 'warning').
+         * @return {void} - Does not return a value.
+         */
+        #showNotification(message, status) {
+            this.#uikit.notification({
+                message,
+                status,
+                pos: 'top-center',
+                timeout: 7000
+            });
+        }
+
+        /**
+         * Remove file from user interface by fileGuid.
+         *
+         * @param {string} fileGuid - The unique identifier of the file.
+         * @example
+         * removeFileFromUI('file123')
+         *
+         * @return {void} - No return value.
+         */
+        #fileRemoveFromUI(fileGuid) {
+            const listItem = document.getElementById(fileGuid);
+            if (listItem) {
+                this.#dispatchEvent('beforeFileRemoveFromUI', {element: listItem, guid: fileGuid});
+                listItem.remove();
+            }
+        }
+
+        /**
+         * Dispatches a custom event with optional detail data.
+         *
+         * @param {string} eventName - The name of the event to dispatch.
+         * @param {object} [detail={}] - The optional detail data to include with the event.
+         * @return {void}
+         */
+        #dispatchEvent(eventName, detail = {}) {
+            document.dispatchEvent(new CustomEvent(`vdm.uikit.delete.${eventName}`, {detail}));
+        }
+
+        /**
+         * Builds a URL by appending the GUID parameter.
+         *
+         * @param {string} guid - The GUID parameter to be appended to the URL.
+         * @return {string} - The constructed URL with the GUID parameter appended.
+         */
+        #buildUrl(guid) {
+            const separator = this.#endpoint.includes('?') ? '&' : '?';
+            return `${this.#endpoint}${separator}guid=${guid}`;
         }
     }
 
@@ -683,35 +862,47 @@
                 UIkitLocal = global.UIkit;
             }
 
-            const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {};
-
-            if (!endpoint) {
-                console.error('Endpoint is not defined, exiting initialization.');
+            if (!global.VDM) {
+                console.error('VDM is not defined, exiting initialization.');
                 return;
             }
 
-            if (!targetClass) {
+            const { endpoint_type, target_class, ...additionalConfig } = global.VDM.uikit.config || {};
+
+            if (!endpoint_type) {
+                console.error('File Type Endpoint is not defined, exiting initialization.');
+                return;
+            }
+
+            if (!target_class) {
                 console.error('The target class is not defined, exiting initialization.');
                 return;
             }
 
-            const uploadElements = document.querySelectorAll('.' + targetClass);
+            const uploadElements = document.querySelectorAll('.' + target_class);
             const config = {};
 
+            // Ensure the global.VDM.uikit.delete_file exists, or initialize it
+            if (!global.VDM.uikit.delete_file) {
+                global.VDM.uikit.delete_file = {};  // Initialize delete_file object if it doesn't exist
+            }
+
             uploadElements.forEach(element => {
                 const id = element.getAttribute('id');
-                const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null;
+                const uploadEndpoint = additionalConfig[id]?.endpoint_upload ?? null;
 
                 if (!uploadEndpoint) {
                     console.error(`Upload Endpoint for ${id} is not defined, exiting initialization for this field.`);
                     return; // Skip this field if no upload endpoint is found
                 }
 
-                const progressBarId = element.dataset.progressbarId;
                 const typeId = element.dataset.typeId;
+
                 // optional
-                const displayEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint_display : null;
+                const progressBarId = element.dataset.progressbarId ?? null;
+                const displayEndpoint = additionalConfig[id]?.endpoint_display ?? null;
                 const displayId = element.dataset.displayId || null;
+                const deleteEndpoint = additionalConfig[id]?.endpoint_delete ?? null;
                 const successId = element.dataset.successId || null;
                 const errorId = element.dataset.errorId || null;
                 const allowedFormatId = element.dataset.allowedFormatId || null;
@@ -728,12 +919,39 @@
                     displayId: displayId,
                     displayEndpoint: displayEndpoint
                 };
+
+                // if delete endpoint found
+                if (deleteEndpoint)
+                {
+                    global.VDM.uikit.delete_file[id] = new DeleteFile(deleteEndpoint, UIkitLocal);
+                }
             });
 
             if (Object.keys(config).length > 0) {
-                new UikitUploader(config, endpoint, UIkitLocal);
+                new UploadFile(config, endpoint_type, UIkitLocal);
             }
+
         });
+
+        /**
+         * Performs a delete operation on the specified file.
+         *
+         * @param {string} id - The identifier of the delete_file object.
+         * @param {string} guid - The file GUID to delete.
+         *
+         * @return {void} - No return value.
+         */
+        global.VDMDeleteFile = function(id, guid) {
+            // Check if the delete_file object exists and is an instance of DeleteFile
+            if (global.VDM.uikit.delete_file[id] && global.VDM.uikit.delete_file[id] instanceof DeleteFile) {
+                // Call the delete method on the DeleteFile instance
+                global.VDM.uikit.delete_file[id].delete(guid);
+            } else {
+                // Log an error or handle the case where the object is missing or invalid
+                console.error(`Error: delete_file with id ${id} is either not defined or not an instance of DeleteFile.`);
+            }
+        };
+
     })(window);
 
 })();
diff --git a/dist/js/vdm.min.js b/dist/js/vdm.min.js
new file mode 100644
index 0000000..01bb140
--- /dev/null
+++ b/dist/js/vdm.min.js
@@ -0,0 +1,2 @@
+/*! VDM Uikit v3.0.0 | https://git.vdm.dev/joomla/uikit | (c) 2020 - 2024 Llewellyn van der Merwe | MIT License */
+!function(){"use strict";function t(t,e,n){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:n;throw new TypeError("Private element is not present on this object")}function e(t,e,n,r,i,o,a){try{var c=t[o](a),l=c.value}catch(t){return void n(t)}c.done?e(l):Promise.resolve(l).then(r,i)}function n(t){return function(){var n=this,r=arguments;return new Promise((function(i,o){var a=t.apply(n,r);function c(t){e(a,i,o,c,l,"next",t)}function l(t){e(a,i,o,c,l,"throw",t)}c(void 0)}))}}function r(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(e,n){return e.get(t(e,n))}function a(t,e,n){r(t,e),e.set(t,n)}function c(e,n,r){return e.set(t(e,n),r),r}function l(t,e){r(t,e),e.add(t)}function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,v(r.key),r)}}function s(t,e,n){return e&&u(t.prototype,e),n&&u(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function f(t,e,n){return(e=v(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function h(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function d(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?h(Object(n),!0).forEach((function(e){f(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function p(){p=function(){return e};var t,e={},n=Object.prototype,r=n.hasOwnProperty,i=Object.defineProperty||function(t,e,n){t[e]=n.value},o="function"==typeof Symbol?Symbol:{},a=o.iterator||"@@iterator",c=o.asyncIterator||"@@asyncIterator",l=o.toStringTag||"@@toStringTag";function u(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,n){return t[e]=n}}function s(t,e,n,r){var o=e&&e.prototype instanceof g?e:g,a=Object.create(o.prototype),c=new P(r||[]);return i(a,"_invoke",{value:L(t,n,c)}),a}function f(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}e.wrap=s;var h="suspendedStart",d="suspendedYield",v="executing",y="completed",m={};function g(){}function b(){}function w(){}var E={};u(E,a,(function(){return this}));var k=Object.getPrototypeOf,x=k&&k(k(T([])));x&&x!==n&&r.call(x,a)&&(E=x);var I=w.prototype=g.prototype=Object.create(E);function O(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function j(t,e){function n(i,o,a,c){var l=f(t[i],t,o);if("throw"!==l.type){var u=l.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?e.resolve(s.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(s).then((function(t){u.value=t,a(u)}),(function(t){return n("throw",t,a,c)}))}c(l.arg)}var o;i(this,"_invoke",{value:function(t,r){function i(){return new e((function(e,i){n(t,r,e,i)}))}return o=o?o.then(i,i):i()}})}function L(e,n,r){var i=h;return function(o,a){if(i===v)throw Error("Generator is already running");if(i===y){if("throw"===o)throw a;return{value:t,done:!0}}for(r.method=o,r.arg=a;;){var c=r.delegate;if(c){var l=M(c,r);if(l){if(l===m)continue;return l}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(i===h)throw i=y,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);i=v;var u=f(e,n,r);if("normal"===u.type){if(i=r.done?y:d,u.arg===m)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(i=y,r.method="throw",r.arg=u.arg)}}}function M(e,n){var r=n.method,i=e.iterator[r];if(i===t)return n.delegate=null,"throw"===r&&e.iterator.return&&(n.method="return",n.arg=t,M(e,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),m;var o=f(i,e.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,m;var a=o.arg;return a?a.done?(n[e.resultName]=a.value,n.next=e.nextLoc,"return"!==n.method&&(n.method="next",n.arg=t),n.delegate=null,m):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,m)}function S(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function P(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(S,this),this.reset(!0)}function T(e){if(e||""===e){var n=e[a];if(n)return n.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var i=-1,o=function n(){for(;++i<e.length;)if(r.call(e,i))return n.value=e[i],n.done=!1,n;return n.value=t,n.done=!0,n};return o.next=o}}throw new TypeError(typeof e+" is not iterable")}return b.prototype=w,i(I,"constructor",{value:w,configurable:!0}),i(w,"constructor",{value:b,configurable:!0}),b.displayName=u(w,l,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===b||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,u(t,l,"GeneratorFunction")),t.prototype=Object.create(I),t},e.awrap=function(t){return{__await:t}},O(j.prototype),u(j.prototype,c,(function(){return this})),e.AsyncIterator=j,e.async=function(t,n,r,i,o){void 0===o&&(o=Promise);var a=new j(s(t,n,r,i),o);return e.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},O(I),u(I,l,"Generator"),u(I,a,(function(){return this})),u(I,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),n=[];for(var r in e)n.push(r);return n.reverse(),function t(){for(;n.length;){var r=n.pop();if(r in e)return t.value=r,t.done=!1,t}return t.done=!0,t}},e.values=T,P.prototype={constructor:P,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(_),!e)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var n=this;function i(r,i){return c.type="throw",c.arg=e,n.next=r,i&&(n.method="next",n.arg=t),!!i}for(var o=this.tryEntries.length-1;o>=0;--o){var a=this.tryEntries[o],c=a.completion;if("root"===a.tryLoc)return i("end");if(a.tryLoc<=this.prev){var l=r.call(a,"catchLoc"),u=r.call(a,"finallyLoc");if(l&&u){if(this.prev<a.catchLoc)return i(a.catchLoc,!0);if(this.prev<a.finallyLoc)return i(a.finallyLoc)}else if(l){if(this.prev<a.catchLoc)return i(a.catchLoc,!0)}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return i(a.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,m):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),m},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),_(n),m}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var i=r.arg;_(n)}return i}}throw Error("illegal catch attempt")},delegateYield:function(e,n,r){return this.delegate={iterator:T(e),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=t),m}},e}function v(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function y(t){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},y(t)}var m=new WeakMap,g=new WeakMap,b=new WeakMap,w=new WeakMap,E=s((function t(e){var r=this;i(this,t),a(this,m,void 0),a(this,g,{}),f(this,"set",(function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;o(g,r)[t]=o(g,r)[t]||{},"object"===y(e)?Object.assign(o(g,r)[t],e):o(g,r)[t][e]=n})),f(this,"get",(function(t){var e,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=o(g,r)[t];return a?null===n?a:null!==(e=a[n])&&void 0!==e?e:i:i})),f(this,"init",function(){var t=n(p().mark((function t(e,n){var i,a,c,l=arguments;return p().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(i=l.length>2&&void 0!==l[2]&&l[2],!o(g,r)[e]||i){t.next=4;break}return t.abrupt("return");case 4:return t.prev=4,a=o(w,r).call(r,n),t.next=8,o(b,r).call(r,a);case 8:if(null==(c=t.sent)||!c.data||"object"!==y(c.data)){t.next=14;break}r.set(e,c.data),t.next=16;break;case 14:if(null==c||!c.error){t.next=16;break}throw new Error(c.error||"An error occurred during the file type request.");case 16:t.next=21;break;case 18:t.prev=18,t.t0=t.catch(4);case 21:case"end":return t.stop()}}),t,null,[[4,18]])})));return function(e,n){return t.apply(this,arguments)}}()),a(this,b,function(){var t=n(p().mark((function t(e){var n;return p().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,fetch(e,{method:"GET",headers:{"Content-Type":"application/json"}});case 2:if((n=t.sent).ok){t.next=6;break}return t.abrupt("return");case 6:return t.next=8,n.json();case 8:return t.abrupt("return",t.sent);case 9:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()),f(this,"getParams",(function(t){var e={};return Array.isArray(t)&&0!==t.length?(t.forEach((function(t){var n=document.getElementById(t);n&&(e[t]=n.value)})),e):e})),a(this,w,(function(t){var e=o(m,r).includes("?")?"&":"?";return"".concat(o(m,r)).concat(e,"guid=").concat(t)})),c(m,this,e)})),k=new WeakSet,x=new WeakMap,I=s((function e(){var r=this;i(this,e),l(this,k),f(this,"set",function(){var e=n(p().mark((function e(n,i,a){var c,l,u;return p().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,t(k,r,O).call(r,"beforeGetFilesDisplay",{endpoint:n,element:i,params:a}),c=o(x,r).call(r,n,a),e.next=5,fetch(c,{method:"GET",headers:{"Content-Type":"application/json"}});case 5:if((l=e.sent).ok){e.next=9;break}return e.abrupt("return");case 9:return e.next=11,l.json();case 11:if(!(u=e.sent).error){e.next=15;break}return e.abrupt("return");case 15:u.data&&""!==u.data.trim()?(t(k,r,O).call(r,"beforeFilesDisplay",{result:u,element:i}),i.innerHTML=u.data,i.removeAttribute("hidden"),t(k,r,O).call(r,"afterFilesDisplay",{result:u,element:i})):(t(k,r,O).call(r,"beforeHideFilesDisplay",{result:u,element:i}),i.innerHTML="",i.setAttribute("hidden","hidden"),t(k,r,O).call(r,"afterHideFilesDisplay",{result:u,element:i})),e.next=21;break;case 18:e.prev=18,e.t0=e.catch(0);case 21:case"end":return e.stop()}}),e,null,[[0,18]])})));return function(t,n,r){return e.apply(this,arguments)}}()),a(this,x,(function(t,e){if(!e||0===Object.keys(e).length)return t;var n=t.includes("?")?"&":"?",r=new URLSearchParams(e);return"".concat(t).concat(n).concat(r.toString())}))}));function O(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};document.dispatchEvent(new CustomEvent("vdm.uikit.display.".concat(t),{detail:e}))}var j=new WeakMap,L=new WeakMap,M=new WeakMap,S=new WeakSet,_=s((function e(n,r,o){i(this,e),l(this,S),a(this,j,void 0),a(this,L,void 0),a(this,M,void 0),c(j,this,new E(r)),c(L,this,new I),c(M,this,o),t(S,this,P).call(this,n)}));function P(e){var n=this;Object.keys(e).forEach((function(r){t(S,n,T).call(n,r,e[r])}))}function T(e,r){var i=this,o=r.bar,a=r.typeId,c=r.endpoint,l=r.successId,u=r.errorId,s=r.allowedFormatId,f=r.fileTypeId,h=r.displayId,d=r.displayEndpoint;t(S,this,B).call(this,d,h);var v=document.getElementById(a);if(v){var y=function(){var r=n(p().mark((function n(r){return p().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(!(r&&r.length>1)){n.next=9;break}return n.prev=1,n.next=4,t(S,i,D).call(i,e,r,o,c,l,u,s,f,h,d);case 4:n.next=9;break;case 6:n.prev=6,n.t0=n.catch(1),t(S,i,G).call(i,n.t0.message,"danger");case 9:case"end":return n.stop()}}),n,null,[[1,6]])})));return function(t){return r.apply(this,arguments)}}();v.addEventListener("change",(function(){return y(v.value)})),y(v.value).catch((function(e){return t(S,i,G).call(i,e.message,"danger")}))}else t(S,this,W).call(this,"Type field with ID ".concat(a," not found"))}function D(t,e,n,r,i,o,a,c,l,u){return A.apply(this,arguments)}function A(){return(A=n(p().mark((function e(n,r,i,a,c,l,u,s,f,h){var v,y,m=this;return p().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,t(S,this,C).call(this,"beforeInit",{id:n,typeGuid:r,progressBarId:i,uploadEndpoint:a,successId:c,errorId:l,allowedFormatId:u,fileTypeId:s,displayId:f,displayEndpoint:h}),v="".concat(n).concat(r),e.next=5,o(j,this).init(v,r,!0);case 5:y=t(S,this,F).call(this,i,c,l,u,s,f),t(S,this,C).call(this,"afterElementsInit",d({},y)),t(S,this,V).call(this,y,v,c,l),o(M,this).upload("#".concat(n),{url:t(S,this,N).call(this,a,r),multiple:!0,allow:o(j,this).get(v,"allow",!1),name:o(j,this).get(v,"name","files"),beforeSend:function(e){return t(S,m,U).call(m,v,e)},beforeAll:function(e){return t(S,m,C).call(m,"beforeAll",{files:e})},load:function(e){return t(S,m,C).call(m,"load",{event:e})},error:function(e){return t(S,m,H).call(m,e,y.errorMessage)},complete:function(e){return t(S,m,R).call(m,e,y.successMessage)},loadStart:function(e){return t(S,m,q).call(m,e,y.progressBar)},progress:function(e){return t(S,m,Y).call(m,e,y.progressBar)},loadEnd:function(e){return t(S,m,z).call(m,e,y.progressBar)},completeAll:function(e){return t(S,m,J).call(m,e,y.progressBar,y.successMessage,y.errorMessage,h,f,v)}}),e.next=14;break;case 11:throw e.prev=11,e.t0=e.catch(0),e.t0;case 14:case"end":return e.stop()}}),e,this,[[0,11]])})))).apply(this,arguments)}function F(t,e,n,r,i,o){return{progressBar:t?document.getElementById(t):null,successMessage:e?document.getElementById(e):null,errorMessage:n?document.getElementById(n):null,allowedFormatSpan:r?document.getElementById(r):null,fileTypeSpan:i?document.getElementById(i):null,displayArea:o?document.getElementById(o):null}}function B(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=e?document.getElementById(e):null;t&&r&&o(L,this).set(t,r,n)}function G(t,e){o(M,this).notification({message:t,status:e,pos:"top-center",timeout:7e3})}function W(t){}function C(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};document.dispatchEvent(new CustomEvent("vdm.uikit.uploader.".concat(t),{detail:e}))}function N(t,e){var n=t.includes("?")?"&":"?";return"".concat(t).concat(n,"guid=").concat(e)}function V(t,e,n,r){t.successMessage&&t.successMessage.setAttribute("hidden","hidden"),t.errorMessage&&t.errorMessage.setAttribute("hidden","hidden"),t.allowedFormatSpan&&(t.allowedFormatSpan.innerHTML=o(j,this).get(e,"allow_span","")),t.fileTypeSpan&&(t.fileTypeSpan.innerHTML=o(j,this).get(e,"file_type_span","file"))}function U(e,n){t(S,this,C).call(this,"beforeSend",{environment:n}),n.data.params=o(j,this).getParams(o(j,this).get(e,"param_fields")),t(S,this,C).call(this,"afterSendPreparation",{environment:n})}function H(e,n){t(S,this,C).call(this,"error",{error:e}),n&&(n.removeAttribute("hidden"),n.textContent="Upload failed.")}function R(e,n){t(S,this,C).call(this,"complete",{xhr:e}),n?(n.removeAttribute("hidden"),n.textContent="Upload completed successfully."):t(S,this,G).call(this,"Upload completed successfully.","primary")}function q(e,n){t(S,this,C).call(this,"loadStart",{event:e}),n&&(n.removeAttribute("hidden"),n.max=e.total,n.value=e.loaded)}function Y(e,n){t(S,this,C).call(this,"progress",{event:e}),n&&(n.max=e.total,n.value=e.loaded)}function z(e,n){t(S,this,C).call(this,"loadEnd",{event:e}),n&&(n.max=e.total,n.value=e.loaded)}function J(e,n,r,i,a,c,l){t(S,this,C).call(this,"completeAll",{xhr:e}),n&&setTimeout((function(){n.setAttribute("hidden","hidden"),r&&r.setAttribute("hidden","hidden"),i&&i.setAttribute("hidden","hidden")}),5e3),t(S,this,B).call(this,a,c,o(j,this).getParams(o(j,this).get(l,"display_fields")))}var K=new WeakMap,Q=new WeakMap,X=new WeakSet,Z=function(){return s((function t(e,n){i(this,t),l(this,X),a(this,K,void 0),a(this,Q,void 0),c(K,this,e),c(Q,this,n)}),[{key:"delete",value:function(e){var n=this;!e||e.length<=30||o(Q,this).modal.confirm("Are you sure you want to delete this file! It can not be undone!").then((function(){return t(X,n,$).call(n,e)}))}}])}();function $(e){o(K,this)&&(t(X,this,rt).call(this,"beforeFileDelete",{guid:e}),fetch(t(X,this,it).call(this,e),{method:"GET",headers:{"Content-Type":"application/json"}}).then((function(t){return t.json()})).then(t(X,this,tt).bind(this,e)).catch(console.error))}function tt(e,n){n.success?(t(X,this,nt).call(this,e),t(X,this,et).call(this,n.success,"primary"),t(X,this,rt).call(this,"afterFileDelete",{data:n,guid:e})):n.error&&(t(X,this,rt).call(this,"onFileDeleteError",{data:n,guid:e}),t(X,this,et).call(this,n.error,"danger"))}function et(t,e){o(Q,this).notification({message:t,status:e,pos:"top-center",timeout:7e3})}function nt(e){var n=document.getElementById(e);n&&(t(X,this,rt).call(this,"beforeFileRemoveFromUI",{element:n,guid:e}),n.remove())}function rt(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};document.dispatchEvent(new CustomEvent("vdm.uikit.delete.".concat(t),{detail:e}))}function it(t){var e=o(K,this).includes("?")?"&":"?";return"".concat(o(K,this)).concat(e,"guid=").concat(t)}f(Z,"ERROR_ENDPOINT","Error: The delete endpoint is not configured.");var ot,at=["endpoint_type","target_class"];ot=window,document.addEventListener("DOMContentLoaded",(function(){var t;if(t=ot.UIkit?ot.UIkit:require("uikit").default,ot.VDM){var e=ot.VDM.uikit.config||{},n=e.endpoint_type,r=e.target_class,i=function(t,e){if(null==t)return{};var n,r,i=function(t,e){if(null==t)return{};var n={};for(var r in t)if({}.hasOwnProperty.call(t,r)){if(e.includes(r))continue;n[r]=t[r]}return n}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(r=0;r<o.length;r++)n=o[r],e.includes(n)||{}.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}(e,at);if(n&&r){var o=document.querySelectorAll("."+r),a={};ot.VDM.uikit.delete_file||(ot.VDM.uikit.delete_file={}),o.forEach((function(e){var n,r,o,c,l,u,s,f=e.getAttribute("id"),h=null!==(n=null===(r=i[f])||void 0===r?void 0:r.endpoint_upload)&&void 0!==n?n:null;if(h){var d=e.dataset.typeId,p=null!==(o=e.dataset.progressbarId)&&void 0!==o?o:null,v=null!==(c=null===(l=i[f])||void 0===l?void 0:l.endpoint_display)&&void 0!==c?c:null,y=e.dataset.displayId||null,m=null!==(u=null===(s=i[f])||void 0===s?void 0:s.endpoint_delete)&&void 0!==u?u:null,g=e.dataset.successId||null,b=e.dataset.errorId||null,w=e.dataset.allowedFormatId||null,E=e.dataset.fileTypeId||null;a[f]={bar:p,typeId:d,endpoint:h,successId:g,errorId:b,allowedFormatId:w,fileTypeId:E,displayId:y,displayEndpoint:v},m&&(ot.VDM.uikit.delete_file[f]=new Z(m,t))}})),Object.keys(a).length>0&&new _(a,n,t)}}})),ot.VDMDeleteFile=function(t,e){ot.VDM.uikit.delete_file[t]&&ot.VDM.uikit.delete_file[t]instanceof Z&&ot.VDM.uikit.delete_file[t].delete(e)}}();
diff --git a/package.json b/package.json
index bb13f30..16ff2f7 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "vdm.uikit.uploader",
-  "title": "Uploader",
-  "description": "Uploader is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website.",
-  "version": "2.1.2",
-  "main": "dist/js/Uploader.min.js",
+  "name": "vdm.uikit",
+  "title": "VDM Uikit",
+  "description": "VDM-Uikit is an intuitive and lightweight JavaScript (extension) to Uikit for embedding upload/delete  functionality of server files into your website.",
+  "version": "3.0.0",
+  "main": "dist/js/vdm.min.js",
   "scripts": {
     "build": "rollup -c"
   },
diff --git a/rollup.config.js b/rollup.config.js
index 78312b9..cf08d8a 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,12 +6,12 @@ import license from 'rollup-plugin-license';
 import replace from '@rollup/plugin-replace';
 
 const licenseLine = {
-    banner: `/*! VDM Uikit Uploader v${require('./package.json').version} | https://git.vdm.dev/joomla/uikit | (c) 2020 - ${new Date().getFullYear()} Llewellyn van der Merwe | MIT License */`
+    banner: `/*! VDM Uikit v${require('./package.json').version} | https://git.vdm.dev/joomla/uikit | (c) 2020 - ${new Date().getFullYear()} Llewellyn van der Merwe | MIT License */`
 };
 
 const licenseHeader = {
     banner: `/**
- * VDM Uikit Uploader v${require('./package.json').version}
+ * VDM Uikit v${require('./package.json').version}
  * https://git.vdm.dev/joomla/uikit
  * (c) 2020 - ${new Date().getFullYear()} Llewellyn van der Merwe
  * MIT License
@@ -20,7 +20,7 @@ const licenseHeader = {
 
 export default [
     {
-        input: 'src/js/Uploader.js',
+        input: 'src/js/vdm.js',
         plugins: [
             license(licenseHeader),
             replace({
@@ -31,17 +31,17 @@ export default [
             commonjs()
         ],
         output: {
-            file: 'dist/js/Uploader.js',
+            file: 'dist/js/vdm.js',
             format: 'iife',
-            name: 'Uploader',
+            name: 'VDMUikit',
             globals: {
-                uikit: 'UIkit',
+                uikit: 'UIkit'
             }
         },
         external: ['uikit'],  // UIkit is treated as external
     },
     {
-        input: 'src/js/Uploader.js',
+        input: 'src/js/vdm.js',
         plugins: [
             resolve(),  // Resolves local and node modules
             commonjs(),
@@ -58,11 +58,11 @@ export default [
         ],
         external: ['uikit'],  // UIkit is treated as external
         output: {
-            file: 'dist/js/Uploader.min.js',
+            file: 'dist/js/vdm.min.js',
             format: 'iife',
-            name: 'Uploader',
+            name: 'VDMUikit',
             globals: {
-                uikit: 'UIkit',
+                uikit: 'UIkit'
             },
         },
     },
diff --git a/src/js/Uploader.js b/src/js/Uploader.js
deleted file mode 100644
index 5bdd082..0000000
--- a/src/js/Uploader.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { UikitUploader } from './core/UikitUploader';
-
-(function(global) {
-    document.addEventListener('DOMContentLoaded', function() {
-        let UIkitLocal;
-
-        if (!global.UIkit) {
-            UIkitLocal = require('uikit').default;
-        } else {
-            UIkitLocal = global.UIkit;
-        }
-
-        const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {};
-
-        if (!endpoint) {
-            if (process.env.DEBUG) console.error('Endpoint is not defined, exiting initialization.');
-            return;
-        }
-
-        if (!targetClass) {
-            if (process.env.DEBUG) console.error('The target class is not defined, exiting initialization.');
-            return;
-        }
-
-        const uploadElements = document.querySelectorAll('.' + targetClass);
-        const config = {};
-
-        uploadElements.forEach(element => {
-            const id = element.getAttribute('id');
-            const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null;
-
-            if (!uploadEndpoint) {
-                if (process.env.DEBUG) console.error(`Upload Endpoint for ${id} is not defined, exiting initialization for this field.`);
-                return; // Skip this field if no upload endpoint is found
-            }
-
-            const progressBarId = element.dataset.progressbarId;
-            const typeId = element.dataset.typeId;
-            // optional
-            const displayEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint_display : null;
-            const displayId = element.dataset.displayId || null;
-            const successId = element.dataset.successId || null;
-            const errorId = element.dataset.errorId || null;
-            const allowedFormatId = element.dataset.allowedFormatId || null;
-            const fileTypeId = element.dataset.fileTypeId || null;
-
-            config[id] = {
-                bar: progressBarId,
-                typeId: typeId,
-                endpoint: uploadEndpoint,
-                successId: successId,
-                errorId: errorId,
-                allowedFormatId: allowedFormatId,
-                fileTypeId: fileTypeId,
-                displayId: displayId,
-                displayEndpoint: displayEndpoint
-            };
-        });
-
-        if (Object.keys(config).length > 0) {
-            new UikitUploader(config, endpoint, UIkitLocal);
-        }
-    });
-})(window);
diff --git a/src/js/core/delete-file.js b/src/js/core/delete-file.js
new file mode 100644
index 0000000..6c3a420
--- /dev/null
+++ b/src/js/core/delete-file.js
@@ -0,0 +1,154 @@
+/**
+ * Helper class for deleting files from the server.
+ *
+ * @class
+ * @classdesc This class provides methods for deleting files from the server.
+ */
+export class DeleteFile {
+    /**
+     * The endpoint to which files would be deleted.
+     * Stored as a private property and used internally within the class methods.
+     * This field must be a string representing a valid URL.
+     *
+     * @type {string}
+     * @private
+     */
+    #endpoint;
+
+    /**
+     * The UIKit variable is a reference to a UI framework for building web applications.
+     */
+    #uikit;
+
+    /**
+     * The error message that is displayed when the delete endpoint is not configured.
+     *
+     * @type {string}
+     */
+    static ERROR_ENDPOINT = 'Error: The delete endpoint is not configured.';
+
+    /**
+     * Creates an instance of the DeleteHelper class.
+     *
+     * @param {string} endpoint - The endpoint where the files will be uploaded.
+     * @param {any} uikit - Reference to UIKit.
+     */
+    constructor(endpoint, uikit) {
+        this.#endpoint = endpoint;
+        this.#uikit = uikit;
+    }
+
+    /**
+     * Deletes a file with the given fileGuid.
+     *
+     * @param {string} fileGuid - The unique identifier of the file to delete.
+     * @return {void}
+     */
+    delete(fileGuid) {
+        if (!fileGuid || fileGuid.length <= 30) {
+            return;
+        }
+
+        this.#uikit.modal.confirm('Are you sure you want to delete this file! It can not be undone!')
+            .then(() => this.#serverDelete(fileGuid));
+    }
+
+    /**
+     * Deletes a file from the server.
+     *
+     * @param {string} fileGuid - The unique identifier of the file to be deleted.
+     * @return {void}
+     */
+    #serverDelete(fileGuid) {
+        if (!this.#endpoint) {
+            if (process.env.DEBUG) console.error(DeleteFile.ERROR_ENDPOINT);
+            return;
+        }
+
+        this.#dispatchEvent('beforeFileDelete', {guid: fileGuid});
+
+        fetch(this.#buildUrl(fileGuid), {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then(response => response.json())
+            .then(this.#handleResponse.bind(this, fileGuid))
+            .catch(console.error);
+    }
+
+    /**
+     * Handles the response from the server after a file upload.
+     * Removes the file from the UI if the response is successful and shows a success notification.
+     * Shows an error notification if the response contains an error.
+     * @param {string} fileGuid - The unique identifier of the file that was uploaded.
+     * @param {object} data - The response data from the server.
+     * @return {void}
+     */
+    #handleResponse(fileGuid, data) {
+        if (data.success) {
+            this.#fileRemoveFromUI(fileGuid);
+            this.#showNotification(data.success, 'primary');
+            this.#dispatchEvent('afterFileDelete', {data: data, guid: fileGuid});
+        } else if (data.error) {
+            this.#dispatchEvent('onFileDeleteError', {data: data, guid: fileGuid});
+            this.#showNotification(data.error, 'danger');
+        }
+    }
+
+    /**
+     * Displays a notification with the given message and status.
+     *
+     * @param {string} message - The message to be displayed in the notification.
+     * @param {string} status - The status of the notification (e.g., 'success', 'error', 'warning').
+     * @return {void} - Does not return a value.
+     */
+    #showNotification(message, status) {
+        this.#uikit.notification({
+            message,
+            status,
+            pos: 'top-center',
+            timeout: 7000
+        });
+    }
+
+    /**
+     * Remove file from user interface by fileGuid.
+     *
+     * @param {string} fileGuid - The unique identifier of the file.
+     * @example
+     * removeFileFromUI('file123')
+     *
+     * @return {void} - No return value.
+     */
+    #fileRemoveFromUI(fileGuid) {
+        const listItem = document.getElementById(fileGuid);
+        if (listItem) {
+            this.#dispatchEvent('beforeFileRemoveFromUI', {element: listItem, guid: fileGuid});
+            listItem.remove();
+        }
+    }
+
+    /**
+     * Dispatches a custom event with optional detail data.
+     *
+     * @param {string} eventName - The name of the event to dispatch.
+     * @param {object} [detail={}] - The optional detail data to include with the event.
+     * @return {void}
+     */
+    #dispatchEvent(eventName, detail = {}) {
+        document.dispatchEvent(new CustomEvent(`vdm.uikit.delete.${eventName}`, {detail}));
+    }
+
+    /**
+     * Builds a URL by appending the GUID parameter.
+     *
+     * @param {string} guid - The GUID parameter to be appended to the URL.
+     * @return {string} - The constructed URL with the GUID parameter appended.
+     */
+    #buildUrl(guid) {
+        const separator = this.#endpoint.includes('?') ? '&' : '?';
+        return `${this.#endpoint}${separator}guid=${guid}`;
+    }
+}
\ No newline at end of file
diff --git a/src/js/core/UikitUploader.js b/src/js/core/upload-file.js
similarity index 71%
rename from src/js/core/UikitUploader.js
rename to src/js/core/upload-file.js
index fed916a..7eb03eb 100644
--- a/src/js/core/UikitUploader.js
+++ b/src/js/core/upload-file.js
@@ -1,28 +1,42 @@
-import {UploadHelper} from './UploadHelper.js';
-import {DisplayHelper} from './DisplayHelper.js';
+import {FileType} from '../util/file-type.js';
+import {Display} from '../util/display.js';
 
 /**
- * Helper class for uploading files.
+ * Class for uploading files.
  *
  * @class
  * @classdesc This class provides methods for uploading files to a server.
  */
-export class UikitUploader {
-    #uploadHelper;
-    #displayHelper;
-    #uikit;
-    #uploadInstances = {};
+export class UploadFile {
+    /**
+     * Utility class for uploading files.
+     *
+     * @class
+     */
+    #fileType;
 
     /**
-     * Creates an instance of the UikitUploader class.
+     * Helper class for displaying elements on the UI.
+     *
+     * @class
+     */
+    #display;
+
+    /**
+     * The UIKit variable is a reference to a UI framework for building web applications.
+     */
+    #uikit;
+
+    /**
+     * Creates an instance of the UploadFile class.
      *
      * @param {Object} config - Configuration details for uploader instances.
      * @param {string} endpoint - The endpoint where the files will be uploaded.
      * @param {any} uikit - Reference to UIKit.
      */
     constructor(config, endpoint, uikit) {
-        this.#uploadHelper = new UploadHelper(endpoint);
-        this.#displayHelper = new DisplayHelper();
+        this.#fileType = new FileType(endpoint);
+        this.#display = new Display();
         this.#uikit = uikit;
 
         this.#initializeFields(config);
@@ -63,13 +77,13 @@ export class UikitUploader {
                 try {
                     await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
                 } catch (error) {
-                    this.#notifyError(error.message);
+                    this.#showNotification(error.message, 'danger');
                 }
             }
         };
 
         typeField.addEventListener('change', () => initializeUpload(typeField.value));
-        initializeUpload(typeField.value).catch(error => this.#notifyError(error.message));
+        initializeUpload(typeField.value).catch(error => this.#showNotification(error.message, 'danger'));
     }
 
     /**
@@ -102,7 +116,7 @@ export class UikitUploader {
             });
 
             const call = `${id}${typeGuid}`;
-            await this.#uploadHelper.init(call, typeGuid, true);
+            await this.#fileType.init(call, typeGuid, true);
 
             const elements = this.#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId);
 
@@ -113,8 +127,8 @@ export class UikitUploader {
             this.#uikit.upload(`#${id}`, {
                 url: this.#buildUrl(uploadEndpoint, typeGuid),
                 multiple: true,
-                allow: this.#uploadHelper.get(call, 'allow', false),
-                name: this.#uploadHelper.get(call, 'name', 'files'),
+                allow: this.#fileType.get(call, 'allow', false),
+                name: this.#fileType.get(call, 'name', 'files'),
                 beforeSend: (env) => this.#handleBeforeSend(call, env),
                 beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}),
                 load: (e) => this.#dispatchEvent('load', {event: e}),
@@ -132,50 +146,57 @@ export class UikitUploader {
 
     /**
      * Returns the required HTML elements by their IDs.
+     * If an element ID is null or the element does not exist on the page,
+     * the corresponding value in the returned object will be null.
      *
-     * @param {string} progressBarId - The ID of the progress bar element.
-     * @param {string} successId - The ID of the success message element.
-     * @param {string} errorId - The ID of the error message element.
-     * @param {string} allowedFormatId - The ID of the allowed format span element.
-     * @param {string} fileTypeId - The ID of the file type span element.
-     * @param {string} displayId - The ID of the display area element.
-     * @returns {object} - An object containing the required HTML elements.
+     * @param {string|null} progressBarId - The ID of the progress bar element, or null.
+     * @param {string|null} successId - The ID of the success message element, or null.
+     * @param {string|null} errorId - The ID of the error message element, or null.
+     * @param {string|null} allowedFormatId - The ID of the allowed format span element, or null.
+     * @param {string|null} fileTypeId - The ID of the file type span element, or null.
+     * @param {string|null} displayId - The ID of the display area element, or null.
+     * @returns {object} - An object containing the required HTML elements or null if they do not exist.
      */
     #getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId) {
         return {
-            progressBar: document.getElementById(progressBarId),
-            successMessage: document.getElementById(successId),
-            errorMessage: document.getElementById(errorId),
-            allowedFormatSpan: document.getElementById(allowedFormatId),
-            fileTypeSpan: document.getElementById(fileTypeId),
-            displayArea: document.getElementById(displayId)
+            progressBar: progressBarId ? document.getElementById(progressBarId) : null,
+            successMessage: successId ? document.getElementById(successId) : null,
+            errorMessage: errorId ? document.getElementById(errorId) : null,
+            allowedFormatSpan: allowedFormatId ? document.getElementById(allowedFormatId) : null,
+            fileTypeSpan: fileTypeId ? document.getElementById(fileTypeId) : null,
+            displayArea: displayId ? document.getElementById(displayId) : null
         };
     }
 
     /**
      * Initializes the display area with data from the display endpoint.
      *
-     * @param {string} displayEndpoint - The endpoint to retrieve the display data from.
-     * @param {string} displayId - The id of the display area element in the DOM.
+     * @param {string|null} displayEndpoint - The endpoint to retrieve the display data from.
+     * @param {string|null} displayId - The id of the display area element in the DOM.
      * @param {object} params - Additional parameters to be passed to the display helper.
-     *
      * @return {void}
      */
     #setupDisplayArea(displayEndpoint, displayId, params = {}) {
-        const displayArea = document.getElementById(displayId);
+        const displayArea = displayId ? document.getElementById(displayId) : null;
         if (displayEndpoint && displayArea) {
-            this.#displayHelper.set(displayEndpoint, displayArea, params);
+            this.#display.set(displayEndpoint, displayArea, params);
         }
     }
 
     /**
-     * Notifies the user of an error using UIKit notifications.
+     * Displays a notification with the given message and status.
      *
-     * @param {string} message - The error message to display.
-     * @return {void}
+     * @param {string} message - The message to be displayed in the notification.
+     * @param {string} status - The status of the notification (e.g., 'success', 'error', 'warning').
+     * @return {void} - Does not return a value.
      */
-    #notifyError(message) {
-        this.#uikit.notification({message, status: 'danger', timeout: 7000});
+    #showNotification(message, status) {
+        this.#uikit.notification({
+            message,
+            status,
+            pos: 'top-center',
+            timeout: 7000
+        });
     }
 
     /**
@@ -225,8 +246,8 @@ export class UikitUploader {
     #prepareUploadUI(elements, call, successId, errorId) {
         if (elements.successMessage) elements.successMessage.setAttribute('hidden', 'hidden');
         if (elements.errorMessage) elements.errorMessage.setAttribute('hidden', 'hidden');
-        if (elements.allowedFormatSpan) elements.allowedFormatSpan.innerHTML = this.#uploadHelper.get(call, 'allow_span', '');
-        if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#uploadHelper.get(call, 'file_type_span', 'file');
+        if (elements.allowedFormatSpan) elements.allowedFormatSpan.innerHTML = this.#fileType.get(call, 'allow_span', '');
+        if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#fileType.get(call, 'file_type_span', 'file');
     }
 
     /**
@@ -238,7 +259,7 @@ export class UikitUploader {
      */
     #handleBeforeSend(call, environment) {
         this.#dispatchEvent('beforeSend', {environment});
-        environment.data.params = this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'param_fields'));
+        environment.data.params = this.#fileType.getParams(this.#fileType.get(call, 'param_fields'));
         this.#dispatchEvent('afterSendPreparation', {environment});
     }
 
@@ -262,13 +283,15 @@ export class UikitUploader {
      * Handles the upload completion.
      *
      * @param {XMLHttpRequest} xhr - The XMLHttpRequest object representing the upload request.
-     * @param {HTMLElement} successMessage - The success message element to display.
+     * @param {HTMLElement|null} successMessage - The success message element to display.
      */
     #handleComplete(xhr, successMessage) {
         this.#dispatchEvent('complete', {xhr});
         if (successMessage) {
             successMessage.removeAttribute('hidden');
             successMessage.textContent = 'Upload completed successfully.';
+        } else {
+            this.#showNotification('Upload completed successfully.', 'primary');
         }
     }
 
@@ -276,7 +299,7 @@ export class UikitUploader {
      * Handles the loadStart event.
      *
      * @param {Event} e - The loadStart event object.
-     * @param {HTMLElement} progressBar - The progress bar element. Optional.
+     * @param {HTMLElement|null} progressBar - The progress bar element. Optional.
      * @return {void}
      */
     #handleLoadStart(e, progressBar) {
@@ -292,7 +315,7 @@ export class UikitUploader {
      * Handles the progress event.
      *
      * @param {Event} e - The progress event.
-     * @param {Element} progressBar - The progress bar element.
+     * @param {Element|null} progressBar - The progress bar element.
      *
      * @return {void}
      */
@@ -308,7 +331,7 @@ export class UikitUploader {
      * Handles the loadEnd event.
      *
      * @param {Event} e - The loadEnd event object.
-     * @param {Element} progressBar - The progress bar element to update.
+     * @param {Element|null} progressBar - The progress bar element to update.
      *
      * @return {void}
      */
@@ -324,11 +347,11 @@ export class UikitUploader {
      * Handles the completion of all uploads.
      *
      * @param {XMLHttpRequest} xhr - The XMLHttpRequest object used for the uploads.
-     * @param {HTMLElement} progressBar - The progress bar element.
-     * @param {HTMLElement} successMessage - The success message element.
-     * @param {HTMLElement} errorMessage - The error message element.
-     * @param {string} displayEndpoint - The display endpoint.
-     * @param {string} displayId - The display ID.
+     * @param {HTMLElement|null} progressBar - The progress bar element.
+     * @param {HTMLElement|null} successMessage - The success message element.
+     * @param {HTMLElement|null} errorMessage - The error message element.
+     * @param {string|null} displayEndpoint - The display endpoint.
+     * @param {string|null} displayId - The display ID.
      * @param {Object} call - The call object.
      *
      * @return {void}
@@ -342,6 +365,6 @@ export class UikitUploader {
                 if (errorMessage) errorMessage.setAttribute('hidden', 'hidden');
             }, 5000);
         }
-        this.#setupDisplayArea(displayEndpoint, displayId, this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'display_fields')));
+        this.#setupDisplayArea(displayEndpoint, displayId, this.#fileType.getParams(this.#fileType.get(call, 'display_fields')));
     }
 }
diff --git a/src/js/core/DisplayHelper.js b/src/js/util/display.js
similarity index 81%
rename from src/js/core/DisplayHelper.js
rename to src/js/util/display.js
index b6b7f7d..3684d6c 100644
--- a/src/js/core/DisplayHelper.js
+++ b/src/js/util/display.js
@@ -12,7 +12,7 @@
  *
  * await helper.set(endpoint, area, params);
  */
-export class DisplayHelper {
+export class Display {
     constructor() {
     }
 
@@ -29,6 +29,9 @@ export class DisplayHelper {
      */
     set = async (displayEndpoint, displayArea, params) => {
         try {
+            // Trigger a custom event before hide files display the entity files
+            this.#dispatchEvent('beforeGetFilesDisplay', {endpoint: displayEndpoint, element: displayArea, params: params});
+
             // Build the URL with the query parameters
             const url = this.#buildUrl(displayEndpoint, params);
 
@@ -62,35 +65,23 @@ export class DisplayHelper {
             // If there's no response.data or it's empty, clear the display area
             if (!result.data || result.data.trim() === '') {
                 // Trigger a custom event before hide files display the entity files
-                const beforeHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.beforeHideFilesDisplay', {
-                    detail: {result, displayArea}
-                });
-                document.dispatchEvent(beforeHideFilesDisplay);
+                this.#dispatchEvent('beforeHideFilesDisplay', {result: result, element: displayArea});
 
                 displayArea.innerHTML = ''; // Empty the display area
                 displayArea.setAttribute('hidden', 'hidden');
 
                 // Trigger a custom event after hide files display the entity files
-                const afterHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.afterHideFilesDisplay', {
-                    detail: {result, displayArea}
-                });
-                document.dispatchEvent(afterHideFilesDisplay);
+                this.#dispatchEvent('afterHideFilesDisplay', {result: result, element: displayArea});
             } else {
                 // Trigger a custom event before displaying the entity files
-                const beforeFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.beforeFilesDisplay', {
-                    detail: {result, displayArea}
-                });
-                document.dispatchEvent(beforeFilesDisplayEvent);
+                this.#dispatchEvent('beforeFilesDisplay', {result: result, element: displayArea});
 
                 // Replace the display area content with the new HTML
                 displayArea.innerHTML = result.data;
                 displayArea.removeAttribute('hidden');
 
                 // Trigger a custom event after displaying the entity files
-                const afterFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.afterFilesDisplay', {
-                    detail: {result, displayArea}
-                });
-                document.dispatchEvent(afterFilesDisplayEvent);
+                this.#dispatchEvent('afterFilesDisplay', {result: result, element: displayArea});
             }
         } catch (error) {
             // If an error occurs, log it in debug mode
@@ -100,6 +91,17 @@ export class DisplayHelper {
         }
     };
 
+    /**
+     * Dispatches a custom event with optional detail data.
+     *
+     * @param {string} eventName - The name of the event to dispatch.
+     * @param {object} [detail={}] - The optional detail data to include with the event.
+     * @return {void}
+     */
+    #dispatchEvent(eventName, detail = {}) {
+        document.dispatchEvent(new CustomEvent(`vdm.uikit.display.${eventName}`, {detail}));
+    }
+
     /**
      * It's a private method that builds a complete URL from the endpoint and an object containing parameters.
      * It uses the URLSearchParams interface to turn the parameters object to a query string,
diff --git a/src/js/core/UploadHelper.js b/src/js/util/file-type.js
similarity index 91%
rename from src/js/core/UploadHelper.js
rename to src/js/util/file-type.js
index 94dba14..92e4bdb 100644
--- a/src/js/core/UploadHelper.js
+++ b/src/js/util/file-type.js
@@ -1,12 +1,12 @@
 /**
- * `UploadHelper` is a utility class that simplifies operations related to file uploading.
+ * `FileType` is a utility class that simplifies operations related to file uploading.
  * It handles the storage and retrieval of metadata associated with each upload and initializes
  * the upload process by setting up endpoint configuration. It also provides methods for
  * triggering the upload activities in an asynchronous manner.
  *
  * @class
  * @example
- * const helper = new UploadHelper('http://example.com/upload');
+ * const helper = new FileType('http://example.com/upload');
  * const uniqueId = 'file123';
  * const globalId = 'glob124';
  * const data = { user: 'John Doe', file: 'myfile.txt' };
@@ -14,7 +14,7 @@
  * helper.set(uniqueId, data);
  * await helper.init(uniqueId, globalId);
  */
-export class UploadHelper {
+export class FileType {
     /**
      * The endpoint to which files would be uploaded.
      * Stored as a private property and used internally within the class methods.
@@ -26,7 +26,7 @@ export class UploadHelper {
     #endpoint;
 
     /**
-     * It is a private object used to store the data associated with an instance of `UploadHelper`.
+     * It is a private object used to store the data associated with an instance of `FileType`.
      * Default is an empty object.
      * This data is used when performing uploads.
      *
@@ -36,9 +36,9 @@ export class UploadHelper {
     #data = {};
 
     /**
-     * Constructor for the UploadHelper class.
+     * Constructor for the FileType class.
      *
-     * @param {string} endpoint - The endpoint to be associated with the instance of the UploadHelper.
+     * @param {string} endpoint - The endpoint to be associated with the instance of the FileType.
      */
     constructor(endpoint) {
         // Initialize private field with passed endpoint argument
@@ -94,7 +94,7 @@ export class UploadHelper {
     };
 
     /**
-     * Asynchronously initializes the UploadHelper object.
+     * Asynchronously initializes the FileType object.
      *
      * @param {string} id - The unique identifier associated with the initialization.
      * @param {string} guid - The globally unique identifier used to build the URL for fetching.
@@ -110,7 +110,7 @@ export class UploadHelper {
         }
 
         try {
-            const url = this.#buildUrl(this.#endpoint, guid);
+            const url = this.#buildUrl(guid);
             const result = await this.#fetchData(url);
 
             if (process.env.DEBUG) console.log('Data fetched:', result);
@@ -178,16 +178,15 @@ export class UploadHelper {
     /**
      * Builds a URL appending a unique identifier as a parameter.
      *
-     * @param {string} endpoint - The base endpoint of the URL.
      * @param {string} guid - The globally unique identifier to append to the URL.
      * @returns {string} The constructed URL with the appended unique identifier.
      * @private
      */
-    #buildUrl = (endpoint, guid) => {
+    #buildUrl = (guid) => {
         // Determine the appropriate separator for the query parameter
-        const separator = endpoint.includes('?') ? '&' : '?';
+        const separator = this.#endpoint.includes('?') ? '&' : '?';
 
         // Return the constructed URL
-        return `${endpoint}${separator}guid=${guid}`;
+        return `${this.#endpoint}${separator}guid=${guid}`;
     };
 }
diff --git a/src/js/vdm.js b/src/js/vdm.js
new file mode 100644
index 0000000..e159555
--- /dev/null
+++ b/src/js/vdm.js
@@ -0,0 +1,104 @@
+import { UploadFile } from './core/upload-file';
+import { DeleteFile } from './core/delete-file';
+
+(function(global) {
+    document.addEventListener('DOMContentLoaded', function() {
+        let UIkitLocal;
+
+        if (!global.UIkit) {
+            UIkitLocal = require('uikit').default;
+        } else {
+            UIkitLocal = global.UIkit;
+        }
+
+        if (!global.VDM) {
+            if (process.env.DEBUG) console.error('VDM is not defined, exiting initialization.');
+            return;
+        }
+
+        const { endpoint_type, target_class, ...additionalConfig } = global.VDM.uikit.config || {};
+
+        if (!endpoint_type) {
+            if (process.env.DEBUG) console.error('File Type Endpoint is not defined, exiting initialization.');
+            return;
+        }
+
+        if (!target_class) {
+            if (process.env.DEBUG) console.error('The target class is not defined, exiting initialization.');
+            return;
+        }
+
+        const uploadElements = document.querySelectorAll('.' + target_class);
+        const config = {};
+
+        // Ensure the global.VDM.uikit.delete_file exists, or initialize it
+        if (!global.VDM.uikit.delete_file) {
+            global.VDM.uikit.delete_file = {};  // Initialize delete_file object if it doesn't exist
+        }
+
+        uploadElements.forEach(element => {
+            const id = element.getAttribute('id');
+            const uploadEndpoint = additionalConfig[id]?.endpoint_upload ?? null;
+
+            if (!uploadEndpoint) {
+                if (process.env.DEBUG) console.error(`Upload Endpoint for ${id} is not defined, exiting initialization for this field.`);
+                return; // Skip this field if no upload endpoint is found
+            }
+
+            const typeId = element.dataset.typeId;
+
+            // optional
+            const progressBarId = element.dataset.progressbarId ?? null;
+            const displayEndpoint = additionalConfig[id]?.endpoint_display ?? null;
+            const displayId = element.dataset.displayId || null;
+            const deleteEndpoint = additionalConfig[id]?.endpoint_delete ?? null;
+            const successId = element.dataset.successId || null;
+            const errorId = element.dataset.errorId || null;
+            const allowedFormatId = element.dataset.allowedFormatId || null;
+            const fileTypeId = element.dataset.fileTypeId || null;
+
+            config[id] = {
+                bar: progressBarId,
+                typeId: typeId,
+                endpoint: uploadEndpoint,
+                successId: successId,
+                errorId: errorId,
+                allowedFormatId: allowedFormatId,
+                fileTypeId: fileTypeId,
+                displayId: displayId,
+                displayEndpoint: displayEndpoint
+            };
+
+            // if delete endpoint found
+            if (deleteEndpoint)
+            {
+                global.VDM.uikit.delete_file[id] = new DeleteFile(deleteEndpoint, UIkitLocal);
+            }
+        });
+
+        if (Object.keys(config).length > 0) {
+            new UploadFile(config, endpoint_type, UIkitLocal);
+        }
+
+    });
+
+    /**
+     * Performs a delete operation on the specified file.
+     *
+     * @param {string} id - The identifier of the delete_file object.
+     * @param {string} guid - The file GUID to delete.
+     *
+     * @return {void} - No return value.
+     */
+    global.VDMDeleteFile = function(id, guid) {
+        // Check if the delete_file object exists and is an instance of DeleteFile
+        if (global.VDM.uikit.delete_file[id] && global.VDM.uikit.delete_file[id] instanceof DeleteFile) {
+            // Call the delete method on the DeleteFile instance
+            global.VDM.uikit.delete_file[id].delete(guid);
+        } else {
+            // Log an error or handle the case where the object is missing or invalid
+            if (process.env.DEBUG) console.error(`Error: delete_file with id ${id} is either not defined or not an instance of DeleteFile.`);
+        }
+    };
+
+})(window);
\ No newline at end of file