joomla/uikit
6
0
Fork 0
Code Issues Pull Requests Activity

refactor: Rename and enhance UikitUploader, refactor URL building, and update package

Browse Source 
- Renamed 'UikitUploader' to 'UploadFile' for improved clarity and updated related imports.
- Refactored methods to handle null element cases and enhanced notification system, improving code readability and functionality.
- Renamed 'UploadHelper' to 'FileType' to better reflect its purpose.
- Simplified URL building by utilizing class properties directly and reducing parameters.
- Updated package details, bumped version to 3.0.0, and modified the main entry point.
- Renamed 'Uploader' to 'vdm-uikit' across the project documentation for consistency.
- Enhanced rollup config by updating references from Uploader to VDMUikit, including file names, banner text, and global objects.
- Added support for delete endpoint in configuration and updated script source URLs to use the unified 'vdm.min.js'.
- Renamed 'Uploader.js' to 'vdm.js', updated import statements to reflect new modules 'UploadFile' and 'DeleteFile'.
- Implemented initialization and error handling for 'delete_file' in the VDM namespace.
- Removed obsolete 'Uploader.js' and 'Uploader.min.js' files from distribution.
This commit is contained in:
Llewellyn van der Merwe 2024-09-14 17:47:32 +02:00
parent 6efa978dae
commit 78271fea45
Signed by: Llewellyn
GPG Key ID: A9201372263741E7
12 changed files with 701 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -1,8 +1,8 @@
# VDM Uikit Uploader Integration Guide # VDM Uikit File Integration Guide
## Overview ## 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 ## How to Add Uploader to Your Website
@ -12,12 +12,12 @@ Uploader is an intuitive and lightweight JavaScript solution for embedding uploa
```html ```html
<!-- Include the Uploader script from jsDelivr CDN --> <!-- 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:** 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 ```html
<select id="type-field-id" class="uk-select" aria-label="Select"> <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> <option value="guid-value-2">Option 02</option>
</select> </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-type-id="type-field-id"
data-progressbar-id="progressbar-id" data-progressbar-id="progressbar-id"
data-display-id="display-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:** 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:** 4. **Customization:**
You must set the various field configurations this way (before loading the class file): You must set the various field configurations this way (before loading the class file):
```js ```js
<script> <script>
window.vdmUploaderConfig = { window.vdm.uikit.config = {
endpoint: 'https://your-type-endpoint.com', endpoint_type: 'https://your-type-endpoint.com',
targetClass: 'vdm-uikit-uploader', target_class: 'vdm-uikit',
upload_id: { upload_id: {
endpoint: 'https://your-upload-endpoint.com', endpoint_upload: 'https://your-upload-endpoint.com',
endpoint_diplay: 'https://your-display-endpoint.com' endpoint_diplay: 'https://your-display-endpoint.com',
endpoint_delete: 'https://your-delete-endpoint.com'
} }
}; };
</script> </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 ### Preventing UIkit Collisions

2
dist/js/Uploader.min.js vendored
View File

File diff suppressed because one or more lines are too long

398
dist/js/Uploader.js → dist/js/vdm.js vendored
View File

@ -1,5 +1,5 @@
/** /**
* VDM Uikit Uploader v2.1.2 * VDM Uikit v3.0.0
* https://git.vdm.dev/joomla/uikit * https://git.vdm.dev/joomla/uikit
* (c) 2020 - 2024 Llewellyn van der Merwe * (c) 2020 - 2024 Llewellyn van der Merwe
* MIT License * MIT License
@ -9,14 +9,14 @@
'use strict'; '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 * 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 * the upload process by setting up endpoint configuration. It also provides methods for
* triggering the upload activities in an asynchronous manner. * triggering the upload activities in an asynchronous manner.
* *
* @class * @class
* @example * @example
* const helper = new UploadHelper('http://example.com/upload'); * const helper = new FileType('http://example.com/upload');
* const uniqueId = 'file123'; * const uniqueId = 'file123';
* const globalId = 'glob124'; * const globalId = 'glob124';
* const data = { user: 'John Doe', file: 'myfile.txt' }; * const data = { user: 'John Doe', file: 'myfile.txt' };
@ -24,7 +24,7 @@
* helper.set(uniqueId, data); * helper.set(uniqueId, data);
* await helper.init(uniqueId, globalId); * await helper.init(uniqueId, globalId);
*/ */
class UploadHelper { class FileType {
/** /**
* The endpoint to which files would be uploaded. * The endpoint to which files would be uploaded.
* Stored as a private property and used internally within the class methods. * Stored as a private property and used internally within the class methods.
@ -36,7 +36,7 @@
#endpoint; #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. * Default is an empty object.
* This data is used when performing uploads. * This data is used when performing uploads.
* *
@ -46,9 +46,9 @@
#data = {}; #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) { constructor(endpoint) {
// Initialize private field with passed endpoint argument // 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} id - The unique identifier associated with the initialization.
* @param {string} guid - The globally unique identifier used to build the URL for fetching. * @param {string} guid - The globally unique identifier used to build the URL for fetching.
@ -120,7 +120,7 @@
} }
try { try {
const url = this.#buildUrl(this.#endpoint, guid); const url = this.#buildUrl(guid);
const result = await this.#fetchData(url); const result = await this.#fetchData(url);
if (true) console.log('Data fetched:', result); if (true) console.log('Data fetched:', result);
@ -188,17 +188,16 @@
/** /**
* Builds a URL appending a unique identifier as a parameter. * 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. * @param {string} guid - The globally unique identifier to append to the URL.
* @returns {string} The constructed URL with the appended unique identifier. * @returns {string} The constructed URL with the appended unique identifier.
* @private * @private
*/ */
#buildUrl = (endpoint, guid) => { #buildUrl = (guid) => {
// Determine the appropriate separator for the query parameter // Determine the appropriate separator for the query parameter
const separator = endpoint.includes('?') ? '&' : '?'; const separator = this.#endpoint.includes('?') ? '&' : '?';
// Return the constructed URL // 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); * await helper.set(endpoint, area, params);
*/ */
class DisplayHelper { class Display {
constructor() { constructor() {
} }
@ -233,6 +232,9 @@
*/ */
set = async (displayEndpoint, displayArea, params) => { set = async (displayEndpoint, displayArea, params) => {
try { 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 // Build the URL with the query parameters
const url = this.#buildUrl(displayEndpoint, params); 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 there's no response.data or it's empty, clear the display area
if (!result.data || result.data.trim() === '') { if (!result.data || result.data.trim() === '') {
// Trigger a custom event before hide files display the entity files // Trigger a custom event before hide files display the entity files
const beforeHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.beforeHideFilesDisplay', { this.#dispatchEvent('beforeHideFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(beforeHideFilesDisplay);
displayArea.innerHTML = ''; // Empty the display area displayArea.innerHTML = ''; // Empty the display area
displayArea.setAttribute('hidden', 'hidden'); displayArea.setAttribute('hidden', 'hidden');
// Trigger a custom event after hide files display the entity files // Trigger a custom event after hide files display the entity files
const afterHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.afterHideFilesDisplay', { this.#dispatchEvent('afterHideFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(afterHideFilesDisplay);
} else { } else {
// Trigger a custom event before displaying the entity files // Trigger a custom event before displaying the entity files
const beforeFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.beforeFilesDisplay', { this.#dispatchEvent('beforeFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(beforeFilesDisplayEvent);
// Replace the display area content with the new HTML // Replace the display area content with the new HTML
displayArea.innerHTML = result.data; displayArea.innerHTML = result.data;
displayArea.removeAttribute('hidden'); displayArea.removeAttribute('hidden');
// Trigger a custom event after displaying the entity files // Trigger a custom event after displaying the entity files
const afterFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.afterFilesDisplay', { this.#dispatchEvent('afterFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(afterFilesDisplayEvent);
} }
} catch (error) { } catch (error) {
// If an error occurs, log it in debug mode // 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'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, * 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 * @class
* @classdesc This class provides methods for uploading files to a server. * @classdesc This class provides methods for uploading files to a server.
*/ */
class UikitUploader { class UploadFile {
#uploadHelper; /**
#displayHelper; * Utility class for uploading files.
#uikit; *
#uploadInstances = {}; * @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 {Object} config - Configuration details for uploader instances.
* @param {string} endpoint - The endpoint where the files will be uploaded. * @param {string} endpoint - The endpoint where the files will be uploaded.
* @param {any} uikit - Reference to UIKit. * @param {any} uikit - Reference to UIKit.
*/ */
constructor(config, endpoint, uikit) { constructor(config, endpoint, uikit) {
this.#uploadHelper = new UploadHelper(endpoint); this.#fileType = new FileType(endpoint);
this.#displayHelper = new DisplayHelper(); this.#display = new Display();
this.#uikit = uikit; this.#uikit = uikit;
this.#initializeFields(config); this.#initializeFields(config);
@ -390,13 +405,13 @@
try { try {
await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint); await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
} catch (error) { } catch (error) {
this.#notifyError(error.message); this.#showNotification(error.message, 'danger');
} }
} }
}; };
typeField.addEventListener('change', () => initializeUpload(typeField.value)); 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}`; 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); const elements = this.#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId);
@ -440,8 +455,8 @@
this.#uikit.upload(`#${id}`, { this.#uikit.upload(`#${id}`, {
url: this.#buildUrl(uploadEndpoint, typeGuid), url: this.#buildUrl(uploadEndpoint, typeGuid),
multiple: true, multiple: true,
allow: this.#uploadHelper.get(call, 'allow', false), allow: this.#fileType.get(call, 'allow', false),
name: this.#uploadHelper.get(call, 'name', 'files'), name: this.#fileType.get(call, 'name', 'files'),
beforeSend: (env) => this.#handleBeforeSend(call, env), beforeSend: (env) => this.#handleBeforeSend(call, env),
beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}), beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}),
load: (e) => this.#dispatchEvent('load', {event: e}), load: (e) => this.#dispatchEvent('load', {event: e}),
@ -459,50 +474,57 @@
/** /**
* Returns the required HTML elements by their IDs. * 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|null} progressBarId - The ID of the progress bar element, or null.
* @param {string} successId - The ID of the success message element. * @param {string|null} successId - The ID of the success message element, or null.
* @param {string} errorId - The ID of the error message element. * @param {string|null} errorId - The ID of the error message element, or null.
* @param {string} allowedFormatId - The ID of the allowed format span element. * @param {string|null} allowedFormatId - The ID of the allowed format span element, or null.
* @param {string} fileTypeId - The ID of the file type span element. * @param {string|null} fileTypeId - The ID of the file type span element, or null.
* @param {string} displayId - The ID of the display area element. * @param {string|null} displayId - The ID of the display area element, or null.
* @returns {object} - An object containing the required HTML elements. * @returns {object} - An object containing the required HTML elements or null if they do not exist.
*/ */
#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId) { #getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId) {
return { return {
progressBar: document.getElementById(progressBarId), progressBar: progressBarId ? document.getElementById(progressBarId) : null,
successMessage: document.getElementById(successId), successMessage: successId ? document.getElementById(successId) : null,
errorMessage: document.getElementById(errorId), errorMessage: errorId ? document.getElementById(errorId) : null,
allowedFormatSpan: document.getElementById(allowedFormatId), allowedFormatSpan: allowedFormatId ? document.getElementById(allowedFormatId) : null,
fileTypeSpan: document.getElementById(fileTypeId), fileTypeSpan: fileTypeId ? document.getElementById(fileTypeId) : null,
displayArea: document.getElementById(displayId) displayArea: displayId ? document.getElementById(displayId) : null
}; };
} }
/** /**
* Initializes the display area with data from the display endpoint. * Initializes the display area with data from the display endpoint.
* *
* @param {string} displayEndpoint - The endpoint to retrieve the display data from. * @param {string|null} 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} displayId - The id of the display area element in the DOM.
* @param {object} params - Additional parameters to be passed to the display helper. * @param {object} params - Additional parameters to be passed to the display helper.
*
* @return {void} * @return {void}
*/ */
#setupDisplayArea(displayEndpoint, displayId, params = {}) { #setupDisplayArea(displayEndpoint, displayId, params = {}) {
const displayArea = document.getElementById(displayId); const displayArea = displayId ? document.getElementById(displayId) : null;
if (displayEndpoint && displayArea) { 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. * @param {string} message - The message to be displayed in the notification.
* @return {void} * @param {string} status - The status of the notification (e.g., 'success', 'error', 'warning').
* @return {void} - Does not return a value.
*/ */
#notifyError(message) { #showNotification(message, status) {
this.#uikit.notification({message, status: 'danger', timeout: 7000}); this.#uikit.notification({
message,
status,
pos: 'top-center',
timeout: 7000
});
} }
/** /**
@ -552,8 +574,8 @@
#prepareUploadUI(elements, call, successId, errorId) { #prepareUploadUI(elements, call, successId, errorId) {
if (elements.successMessage) elements.successMessage.setAttribute('hidden', 'hidden'); if (elements.successMessage) elements.successMessage.setAttribute('hidden', 'hidden');
if (elements.errorMessage) elements.errorMessage.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.allowedFormatSpan) elements.allowedFormatSpan.innerHTML = this.#fileType.get(call, 'allow_span', '');
if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#uploadHelper.get(call, 'file_type_span', 'file'); if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#fileType.get(call, 'file_type_span', 'file');
} }
/** /**
@ -565,7 +587,7 @@
*/ */
#handleBeforeSend(call, environment) { #handleBeforeSend(call, environment) {
this.#dispatchEvent('beforeSend', {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}); this.#dispatchEvent('afterSendPreparation', {environment});
} }
@ -589,13 +611,15 @@
* Handles the upload completion. * Handles the upload completion.
* *
* @param {XMLHttpRequest} xhr - The XMLHttpRequest object representing the upload request. * @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) { #handleComplete(xhr, successMessage) {
this.#dispatchEvent('complete', {xhr}); this.#dispatchEvent('complete', {xhr});
if (successMessage) { if (successMessage) {
successMessage.removeAttribute('hidden'); successMessage.removeAttribute('hidden');
successMessage.textContent = 'Upload completed successfully.'; successMessage.textContent = 'Upload completed successfully.';
} else {
this.#showNotification('Upload completed successfully.', 'primary');
} }
} }
@ -603,7 +627,7 @@
* Handles the loadStart event. * Handles the loadStart event.
* *
* @param {Event} e - The loadStart event object. * @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} * @return {void}
*/ */
#handleLoadStart(e, progressBar) { #handleLoadStart(e, progressBar) {
@ -619,7 +643,7 @@
* Handles the progress event. * Handles the progress event.
* *
* @param {Event} e - 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} * @return {void}
*/ */
@ -635,7 +659,7 @@
* Handles the loadEnd event. * Handles the loadEnd event.
* *
* @param {Event} e - The loadEnd event object. * @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} * @return {void}
*/ */
@ -651,11 +675,11 @@
* Handles the completion of all uploads. * Handles the completion of all uploads.
* *
* @param {XMLHttpRequest} xhr - The XMLHttpRequest object used for the uploads. * @param {XMLHttpRequest} xhr - The XMLHttpRequest object used for the uploads.
* @param {HTMLElement} progressBar - The progress bar element. * @param {HTMLElement|null} progressBar - The progress bar element.
* @param {HTMLElement} successMessage - The success message element. * @param {HTMLElement|null} successMessage - The success message element.
* @param {HTMLElement} errorMessage - The error message element. * @param {HTMLElement|null} errorMessage - The error message element.
* @param {string} displayEndpoint - The display endpoint. * @param {string|null} displayEndpoint - The display endpoint.
* @param {string} displayId - The display ID. * @param {string|null} displayId - The display ID.
* @param {Object} call - The call object. * @param {Object} call - The call object.
* *
* @return {void} * @return {void}
@ -669,7 +693,162 @@
if (errorMessage) errorMessage.setAttribute('hidden', 'hidden'); if (errorMessage) errorMessage.setAttribute('hidden', 'hidden');
}, 5000); }, 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; UIkitLocal = global.UIkit;
} }
const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {}; if (!global.VDM) {
console.error('VDM is not defined, exiting initialization.');
if (!endpoint) {
console.error('Endpoint is not defined, exiting initialization.');
return; 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.'); console.error('The target class is not defined, exiting initialization.');
return; return;
} }
const uploadElements = document.querySelectorAll('.' + targetClass); const uploadElements = document.querySelectorAll('.' + target_class);
const config = {}; 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 => { uploadElements.forEach(element => {
const id = element.getAttribute('id'); const id = element.getAttribute('id');
const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null; const uploadEndpoint = additionalConfig[id]?.endpoint_upload ?? null;
if (!uploadEndpoint) { if (!uploadEndpoint) {
console.error(`Upload Endpoint for ${id} is not defined, exiting initialization for this field.`); console.error(`Upload Endpoint for ${id} is not defined, exiting initialization for this field.`);
return; // Skip this field if no upload endpoint is found return; // Skip this field if no upload endpoint is found
} }
const progressBarId = element.dataset.progressbarId;
const typeId = element.dataset.typeId; const typeId = element.dataset.typeId;
// optional // 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 displayId = element.dataset.displayId || null;
const deleteEndpoint = additionalConfig[id]?.endpoint_delete ?? null;
const successId = element.dataset.successId || null; const successId = element.dataset.successId || null;
const errorId = element.dataset.errorId || null; const errorId = element.dataset.errorId || null;
const allowedFormatId = element.dataset.allowedFormatId || null; const allowedFormatId = element.dataset.allowedFormatId || null;
@ -728,12 +919,39 @@
displayId: displayId, displayId: displayId,
displayEndpoint: displayEndpoint displayEndpoint: displayEndpoint
}; };
// if delete endpoint found
if (deleteEndpoint)
{
global.VDM.uikit.delete_file[id] = new DeleteFile(deleteEndpoint, UIkitLocal);
}
}); });
if (Object.keys(config).length > 0) { 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); })(window);
})(); })();

2
dist/js/vdm.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
package.json
View File

@ -1,9 +1,9 @@
{ {
"name": "vdm.uikit.uploader", "name": "vdm.uikit",
"title": "Uploader", "title": "VDM Uikit",
"description": "Uploader is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website.", "description": "VDM-Uikit is an intuitive and lightweight JavaScript (extension) to Uikit for embedding upload/delete functionality of server files into your website.",
"version": "2.1.2", "version": "3.0.0",
"main": "dist/js/Uploader.min.js", "main": "dist/js/vdm.min.js",
"scripts": { "scripts": {
"build": "rollup -c" "build": "rollup -c"
}, },

20
rollup.config.js
View File

@ -6,12 +6,12 @@ import license from 'rollup-plugin-license';
import replace from '@rollup/plugin-replace'; import replace from '@rollup/plugin-replace';
const licenseLine = { 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 = { const licenseHeader = {
banner: `/** banner: `/**
* VDM Uikit Uploader v${require('./package.json').version} * VDM Uikit v${require('./package.json').version}
* https://git.vdm.dev/joomla/uikit * https://git.vdm.dev/joomla/uikit
* (c) 2020 - ${new Date().getFullYear()} Llewellyn van der Merwe * (c) 2020 - ${new Date().getFullYear()} Llewellyn van der Merwe
* MIT License * MIT License
@ -20,7 +20,7 @@ const licenseHeader = {
export default [ export default [
{ {
input: 'src/js/Uploader.js', input: 'src/js/vdm.js',
plugins: [ plugins: [
license(licenseHeader), license(licenseHeader),
replace({ replace({
@ -31,17 +31,17 @@ export default [
commonjs() commonjs()
], ],
output: { output: {
file: 'dist/js/Uploader.js', file: 'dist/js/vdm.js',
format: 'iife', format: 'iife',
name: 'Uploader', name: 'VDMUikit',
globals: { globals: {
uikit: 'UIkit', uikit: 'UIkit'
} }
}, },
external: ['uikit'], // UIkit is treated as external external: ['uikit'], // UIkit is treated as external
}, },
{ {
input: 'src/js/Uploader.js', input: 'src/js/vdm.js',
plugins: [ plugins: [
resolve(), // Resolves local and node modules resolve(), // Resolves local and node modules
commonjs(), commonjs(),
@ -58,11 +58,11 @@ export default [
], ],
external: ['uikit'], // UIkit is treated as external external: ['uikit'], // UIkit is treated as external
output: { output: {
file: 'dist/js/Uploader.min.js', file: 'dist/js/vdm.min.js',
format: 'iife', format: 'iife',
name: 'Uploader', name: 'VDMUikit',
globals: { globals: {
uikit: 'UIkit', uikit: 'UIkit'
}, },
}, },
}, },

64
src/js/Uploader.js
View File

@ -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);

154
src/js/core/delete-file.js Normal file
View File

@ -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}`;
}
}

127
src/js/core/UikitUploader.js → src/js/core/upload-file.js
View File

@ -1,28 +1,42 @@
import {UploadHelper} from './UploadHelper.js'; import {FileType} from '../util/file-type.js';
import {DisplayHelper} from './DisplayHelper.js'; import {Display} from '../util/display.js';
/** /**
* Helper class for uploading files. * Class for uploading files.
* *
* @class * @class
* @classdesc This class provides methods for uploading files to a server. * @classdesc This class provides methods for uploading files to a server.
*/ */
export class UikitUploader { export class UploadFile {
#uploadHelper; /**
#displayHelper; * Utility class for uploading files.
#uikit; *
#uploadInstances = {}; * @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 {Object} config - Configuration details for uploader instances.
* @param {string} endpoint - The endpoint where the files will be uploaded. * @param {string} endpoint - The endpoint where the files will be uploaded.
* @param {any} uikit - Reference to UIKit. * @param {any} uikit - Reference to UIKit.
*/ */
constructor(config, endpoint, uikit) { constructor(config, endpoint, uikit) {
this.#uploadHelper = new UploadHelper(endpoint); this.#fileType = new FileType(endpoint);
this.#displayHelper = new DisplayHelper(); this.#display = new Display();
this.#uikit = uikit; this.#uikit = uikit;
this.#initializeFields(config); this.#initializeFields(config);
@ -63,13 +77,13 @@ export class UikitUploader {
try { try {
await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint); await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
} catch (error) { } catch (error) {
this.#notifyError(error.message); this.#showNotification(error.message, 'danger');
} }
} }
}; };
typeField.addEventListener('change', () => initializeUpload(typeField.value)); 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}`; 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); const elements = this.#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId);
@ -113,8 +127,8 @@ export class UikitUploader {
this.#uikit.upload(`#${id}`, { this.#uikit.upload(`#${id}`, {
url: this.#buildUrl(uploadEndpoint, typeGuid), url: this.#buildUrl(uploadEndpoint, typeGuid),
multiple: true, multiple: true,
allow: this.#uploadHelper.get(call, 'allow', false), allow: this.#fileType.get(call, 'allow', false),
name: this.#uploadHelper.get(call, 'name', 'files'), name: this.#fileType.get(call, 'name', 'files'),
beforeSend: (env) => this.#handleBeforeSend(call, env), beforeSend: (env) => this.#handleBeforeSend(call, env),
beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}), beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}),
load: (e) => this.#dispatchEvent('load', {event: e}), load: (e) => this.#dispatchEvent('load', {event: e}),
@ -132,50 +146,57 @@ export class UikitUploader {
/** /**
* Returns the required HTML elements by their IDs. * 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|null} progressBarId - The ID of the progress bar element, or null.
* @param {string} successId - The ID of the success message element. * @param {string|null} successId - The ID of the success message element, or null.
* @param {string} errorId - The ID of the error message element. * @param {string|null} errorId - The ID of the error message element, or null.
* @param {string} allowedFormatId - The ID of the allowed format span element. * @param {string|null} allowedFormatId - The ID of the allowed format span element, or null.
* @param {string} fileTypeId - The ID of the file type span element. * @param {string|null} fileTypeId - The ID of the file type span element, or null.
* @param {string} displayId - The ID of the display area element. * @param {string|null} displayId - The ID of the display area element, or null.
* @returns {object} - An object containing the required HTML elements. * @returns {object} - An object containing the required HTML elements or null if they do not exist.
*/ */
#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId) { #getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId) {
return { return {
progressBar: document.getElementById(progressBarId), progressBar: progressBarId ? document.getElementById(progressBarId) : null,
successMessage: document.getElementById(successId), successMessage: successId ? document.getElementById(successId) : null,
errorMessage: document.getElementById(errorId), errorMessage: errorId ? document.getElementById(errorId) : null,
allowedFormatSpan: document.getElementById(allowedFormatId), allowedFormatSpan: allowedFormatId ? document.getElementById(allowedFormatId) : null,
fileTypeSpan: document.getElementById(fileTypeId), fileTypeSpan: fileTypeId ? document.getElementById(fileTypeId) : null,
displayArea: document.getElementById(displayId) displayArea: displayId ? document.getElementById(displayId) : null
}; };
} }
/** /**
* Initializes the display area with data from the display endpoint. * Initializes the display area with data from the display endpoint.
* *
* @param {string} displayEndpoint - The endpoint to retrieve the display data from. * @param {string|null} 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} displayId - The id of the display area element in the DOM.
* @param {object} params - Additional parameters to be passed to the display helper. * @param {object} params - Additional parameters to be passed to the display helper.
*
* @return {void} * @return {void}
*/ */
#setupDisplayArea(displayEndpoint, displayId, params = {}) { #setupDisplayArea(displayEndpoint, displayId, params = {}) {
const displayArea = document.getElementById(displayId); const displayArea = displayId ? document.getElementById(displayId) : null;
if (displayEndpoint && displayArea) { 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. * @param {string} message - The message to be displayed in the notification.
* @return {void} * @param {string} status - The status of the notification (e.g., 'success', 'error', 'warning').
* @return {void} - Does not return a value.
*/ */
#notifyError(message) { #showNotification(message, status) {
this.#uikit.notification({message, status: 'danger', timeout: 7000}); this.#uikit.notification({
message,
status,
pos: 'top-center',
timeout: 7000
});
} }
/** /**
@ -225,8 +246,8 @@ export class UikitUploader {
#prepareUploadUI(elements, call, successId, errorId) { #prepareUploadUI(elements, call, successId, errorId) {
if (elements.successMessage) elements.successMessage.setAttribute('hidden', 'hidden'); if (elements.successMessage) elements.successMessage.setAttribute('hidden', 'hidden');
if (elements.errorMessage) elements.errorMessage.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.allowedFormatSpan) elements.allowedFormatSpan.innerHTML = this.#fileType.get(call, 'allow_span', '');
if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#uploadHelper.get(call, 'file_type_span', 'file'); if (elements.fileTypeSpan) elements.fileTypeSpan.innerHTML = this.#fileType.get(call, 'file_type_span', 'file');
} }
/** /**
@ -238,7 +259,7 @@ export class UikitUploader {
*/ */
#handleBeforeSend(call, environment) { #handleBeforeSend(call, environment) {
this.#dispatchEvent('beforeSend', {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}); this.#dispatchEvent('afterSendPreparation', {environment});
} }
@ -262,13 +283,15 @@ export class UikitUploader {
* Handles the upload completion. * Handles the upload completion.
* *
* @param {XMLHttpRequest} xhr - The XMLHttpRequest object representing the upload request. * @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) { #handleComplete(xhr, successMessage) {
this.#dispatchEvent('complete', {xhr}); this.#dispatchEvent('complete', {xhr});
if (successMessage) { if (successMessage) {
successMessage.removeAttribute('hidden'); successMessage.removeAttribute('hidden');
successMessage.textContent = 'Upload completed successfully.'; successMessage.textContent = 'Upload completed successfully.';
} else {
this.#showNotification('Upload completed successfully.', 'primary');
} }
} }
@ -276,7 +299,7 @@ export class UikitUploader {
* Handles the loadStart event. * Handles the loadStart event.
* *
* @param {Event} e - The loadStart event object. * @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} * @return {void}
*/ */
#handleLoadStart(e, progressBar) { #handleLoadStart(e, progressBar) {
@ -292,7 +315,7 @@ export class UikitUploader {
* Handles the progress event. * Handles the progress event.
* *
* @param {Event} e - 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} * @return {void}
*/ */
@ -308,7 +331,7 @@ export class UikitUploader {
* Handles the loadEnd event. * Handles the loadEnd event.
* *
* @param {Event} e - The loadEnd event object. * @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} * @return {void}
*/ */
@ -324,11 +347,11 @@ export class UikitUploader {
* Handles the completion of all uploads. * Handles the completion of all uploads.
* *
* @param {XMLHttpRequest} xhr - The XMLHttpRequest object used for the uploads. * @param {XMLHttpRequest} xhr - The XMLHttpRequest object used for the uploads.
* @param {HTMLElement} progressBar - The progress bar element. * @param {HTMLElement|null} progressBar - The progress bar element.
* @param {HTMLElement} successMessage - The success message element. * @param {HTMLElement|null} successMessage - The success message element.
* @param {HTMLElement} errorMessage - The error message element. * @param {HTMLElement|null} errorMessage - The error message element.
* @param {string} displayEndpoint - The display endpoint. * @param {string|null} displayEndpoint - The display endpoint.
* @param {string} displayId - The display ID. * @param {string|null} displayId - The display ID.
* @param {Object} call - The call object. * @param {Object} call - The call object.
* *
* @return {void} * @return {void}
@ -342,6 +365,6 @@ export class UikitUploader {
if (errorMessage) errorMessage.setAttribute('hidden', 'hidden'); if (errorMessage) errorMessage.setAttribute('hidden', 'hidden');
}, 5000); }, 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')));
} }
} }

36
src/js/core/DisplayHelper.js → src/js/util/display.js
View File

@ -12,7 +12,7 @@
* *
* await helper.set(endpoint, area, params); * await helper.set(endpoint, area, params);
*/ */
export class DisplayHelper { export class Display {
constructor() { constructor() {
} }
@ -29,6 +29,9 @@ export class DisplayHelper {
*/ */
set = async (displayEndpoint, displayArea, params) => { set = async (displayEndpoint, displayArea, params) => {
try { 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 // Build the URL with the query parameters
const url = this.#buildUrl(displayEndpoint, params); 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 there's no response.data or it's empty, clear the display area
if (!result.data || result.data.trim() === '') { if (!result.data || result.data.trim() === '') {
// Trigger a custom event before hide files display the entity files // Trigger a custom event before hide files display the entity files
const beforeHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.beforeHideFilesDisplay', { this.#dispatchEvent('beforeHideFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(beforeHideFilesDisplay);
displayArea.innerHTML = ''; // Empty the display area displayArea.innerHTML = ''; // Empty the display area
displayArea.setAttribute('hidden', 'hidden'); displayArea.setAttribute('hidden', 'hidden');
// Trigger a custom event after hide files display the entity files // Trigger a custom event after hide files display the entity files
const afterHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.afterHideFilesDisplay', { this.#dispatchEvent('afterHideFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(afterHideFilesDisplay);
} else { } else {
// Trigger a custom event before displaying the entity files // Trigger a custom event before displaying the entity files
const beforeFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.beforeFilesDisplay', { this.#dispatchEvent('beforeFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(beforeFilesDisplayEvent);
// Replace the display area content with the new HTML // Replace the display area content with the new HTML
displayArea.innerHTML = result.data; displayArea.innerHTML = result.data;
displayArea.removeAttribute('hidden'); displayArea.removeAttribute('hidden');
// Trigger a custom event after displaying the entity files // Trigger a custom event after displaying the entity files
const afterFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.afterFilesDisplay', { this.#dispatchEvent('afterFilesDisplay', {result: result, element: displayArea});
detail: {result, displayArea}
});
document.dispatchEvent(afterFilesDisplayEvent);
} }
} catch (error) { } catch (error) {
// If an error occurs, log it in debug mode // 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'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, * It uses the URLSearchParams interface to turn the parameters object to a query string,

23
src/js/core/UploadHelper.js → src/js/util/file-type.js
View File

@ -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 * 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 * the upload process by setting up endpoint configuration. It also provides methods for
* triggering the upload activities in an asynchronous manner. * triggering the upload activities in an asynchronous manner.
* *
* @class * @class
* @example * @example
* const helper = new UploadHelper('http://example.com/upload'); * const helper = new FileType('http://example.com/upload');
* const uniqueId = 'file123'; * const uniqueId = 'file123';
* const globalId = 'glob124'; * const globalId = 'glob124';
* const data = { user: 'John Doe', file: 'myfile.txt' }; * const data = { user: 'John Doe', file: 'myfile.txt' };
@ -14,7 +14,7 @@
* helper.set(uniqueId, data); * helper.set(uniqueId, data);
* await helper.init(uniqueId, globalId); * await helper.init(uniqueId, globalId);
*/ */
export class UploadHelper { export class FileType {
/** /**
* The endpoint to which files would be uploaded. * The endpoint to which files would be uploaded.
* Stored as a private property and used internally within the class methods. * Stored as a private property and used internally within the class methods.
@ -26,7 +26,7 @@ export class UploadHelper {
#endpoint; #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. * Default is an empty object.
* This data is used when performing uploads. * This data is used when performing uploads.
* *
@ -36,9 +36,9 @@ export class UploadHelper {
#data = {}; #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) { constructor(endpoint) {
// Initialize private field with passed endpoint argument // 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} id - The unique identifier associated with the initialization.
* @param {string} guid - The globally unique identifier used to build the URL for fetching. * @param {string} guid - The globally unique identifier used to build the URL for fetching.
@ -110,7 +110,7 @@ export class UploadHelper {
} }
try { try {
const url = this.#buildUrl(this.#endpoint, guid); const url = this.#buildUrl(guid);
const result = await this.#fetchData(url); const result = await this.#fetchData(url);
if (process.env.DEBUG) console.log('Data fetched:', result); 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. * 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. * @param {string} guid - The globally unique identifier to append to the URL.
* @returns {string} The constructed URL with the appended unique identifier. * @returns {string} The constructed URL with the appended unique identifier.
* @private * @private
*/ */
#buildUrl = (endpoint, guid) => { #buildUrl = (guid) => {
// Determine the appropriate separator for the query parameter // Determine the appropriate separator for the query parameter
const separator = endpoint.includes('?') ? '&' : '?'; const separator = this.#endpoint.includes('?') ? '&' : '?';
// Return the constructed URL // Return the constructed URL
return `${endpoint}${separator}guid=${guid}`; return `${this.#endpoint}${separator}guid=${guid}`;
}; };
} }

104
src/js/vdm.js Normal file
View File

@ -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);