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

Add events, and other improvements

Browse Source
This commit is contained in:
Llewellyn van der Merwe 2024-09-12 07:10:27 +02:00
parent 1ebc666b35
commit 08484f8a9c
Signed by: Llewellyn
GPG Key ID: A9201372263741E7
8 changed files with 677 additions and 411 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -12,7 +12,7 @@ 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@2.0.5/dist/js/Uploader.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@latest/dist/js/Uploader.min.js"></script>
``` ```
2. **Markup Your Upload Area:** 2. **Markup Your Upload Area:**

545
dist/js/Uploader.js vendored
View File

@ -1,5 +1,5 @@
/** /**
* VDM Uikit Uploader v2.0.5 * VDM Uikit Uploader v2.1.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
@ -115,16 +115,15 @@
*/ */
init = async (id, guid, reset = false) => { init = async (id, guid, reset = false) => {
if (this.#data[id] && !reset) { if (this.#data[id] && !reset) {
console.log(`Field ${id} is already initialized, reusing existing data.`);
return; return;
} }
try { try {
const url = this.#buildUrl(this.#endpoint, guid); const url = this.#buildUrl(this.#endpoint, guid);
const { DEBUG } = process.env;
const result = await this.#fetchData(url); const result = await this.#fetchData(url);
DEBUG === 'true' && console.log('Data fetched:', result); if (true) console.log('Data fetched:', result);
if (result?.data && typeof result.data === 'object') { if (result?.data && typeof result.data === 'object') {
this.set(id, result.data); this.set(id, result.data);
@ -132,7 +131,7 @@
throw new Error(result.error || 'An error occurred during the file type request.'); throw new Error(result.error || 'An error occurred during the file type request.');
} }
} catch (error) { } catch (error) {
DEBUG === 'true' && console.error('Error during initialization:', error); console.error('Error during initialization:', error);
} }
}; };
@ -145,10 +144,11 @@
#fetchData = async url => { #fetchData = async url => {
const response = await fetch(url, { const response = await fetch(url, {
method: 'GET', method: 'GET',
headers: { 'Content-Type': 'application/json' }, headers: {'Content-Type': 'application/json'},
}); });
if (!response.ok) { if (!response.ok) {
console.error('Error fetching data:', response);
return; return;
} }
@ -217,7 +217,8 @@
* await helper.set(endpoint, area, params); * await helper.set(endpoint, area, params);
*/ */
class DisplayHelper { class DisplayHelper {
constructor() {} constructor() {
}
/** /**
* Asynchronously fetches HTML content from a specified endpoint and injects it into a specified DOM area. * Asynchronously fetches HTML content from a specified endpoint and injects it into a specified DOM area.
@ -245,24 +246,61 @@
if (!response.ok) { if (!response.ok) {
// If an error occurs, log it in debug mode // If an error occurs, log it in debug mode
if (true === 'true') ; if (true) {
console.error('Error fetching display data:', response);
}
return; return;
} }
const result = await response.json(); const result = await response.json();
// If there's no response.data or it's empty, clear the display area // Check if result contains an error
if (!result.data || result.data.trim() === '') { if (result.error) {
displayArea.innerHTML = ''; // Empty the display area // Log the error in debug mode and show a user-friendly message
} else { if (true) {
// Replace the display area content with the new HTML console.error('Error fetching display data:', result.error);
displayArea.innerHTML = result.data; }
return;
} }
} catch (error) { // 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);
// Optionally, you can clear the display area on error displayArea.innerHTML = ''; // Empty the display area
displayArea.innerHTML = ''; // Empty the display area on failure 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);
} else {
// Trigger a custom event before displaying the entity files
const beforeFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.beforeFilesDisplay', {
detail: {result, displayArea}
});
document.dispatchEvent(beforeFilesDisplayEvent);
// 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);
}
} catch (error) {
// If an error occurs, log it in debug mode
{
console.error('Error fetching display data:', error);
}
} }
}; };
@ -278,6 +316,11 @@
* @private * @private
*/ */
#buildUrl = (endpoint, params) => { #buildUrl = (endpoint, params) => {
// If no params or params is empty, return the endpoint as is
if (!params || Object.keys(params).length === 0) {
return endpoint;
}
// Convert the params object into URL query string using URLSearchParams // Convert the params object into URL query string using URLSearchParams
const separator = endpoint.includes('?') ? '&' : '?'; const separator = endpoint.includes('?') ? '&' : '?';
const urlParams = new URLSearchParams(params); const urlParams = new URLSearchParams(params);
@ -292,50 +335,34 @@
* @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 UikitUploader {
/**
* Helper class for uploading files.
*
* @class
* @classdesc This class provides methods for uploading files to a server.
*/
#uploadHelper; #uploadHelper;
/**
* Helper object for displaying messages and data in the user interface.
*
* @namespace displayHelper
*/
#displayHelper; #displayHelper;
/**
* @typedef {Object} UIKit
*
*/
#uikit; #uikit;
/**
* Object representing the upload instances.
*
* @typedef {Object} UploadInstances
* @property {Object} - The key-value pairs of upload instance IDs and their corresponding upload data.
*/
#uploadInstances = {}; #uploadInstances = {};
/** /**
* Creates an instance of the UikitUploader class. * Creates an instance of the UikitUploader class.
* *
* @param {Object} config - An object that contains configuration details. * @param {Object} config - Configuration details for uploader instances.
* @param {any} endpoint - Endpoint where the upload is being sent. * @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.#uploadHelper = new UploadHelper(endpoint);
this.#displayHelper = new DisplayHelper(); this.#displayHelper = new DisplayHelper();
this.#uikit = uikit; this.#uikit = uikit;
this.#initializeFields(config);
}
/**
* Initializes all upload fields based on the config.
*
* @param {Object} config - Configuration object mapping field IDs to their parameters.
*/
#initializeFields(config) {
Object.keys(config).forEach(id => { Object.keys(config).forEach(id => {
const entity = config[id]; this.#initField(id, config[id]);
this.#initField(id, entity);
}); });
} }
@ -343,199 +370,308 @@
* Initializes a field with given parameters and sets up its event listener. * Initializes a field with given parameters and sets up its event listener.
* *
* @param {string} id - The identifier for the field. * @param {string} id - The identifier for the field.
* @param {Object} entity - An object containing various field parameters. * @param {Object} entity - Configuration parameters for the field.
* entity must contain 'bar', 'typeId', 'endpoint', 'successId', 'errorId', 'allowedFormatId', 'fileTypeId', 'displayId', 'displayEndpoint' properties.
*/ */
#initField = (id, entity) => { #initField(id, entity) {
const { const {
bar, typeId, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint bar, typeId, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint
} = entity; } = entity;
this.#setupDisplayArea(displayEndpoint, displayId);
const typeField = document.getElementById(typeId); const typeField = document.getElementById(typeId);
if (!typeField) {
this.#logError(`Type field with ID ${typeId} not found`);
return;
}
const errorNotification = { const initializeUpload = async (guid) => {
message: 'error.message',
status: 'danger',
timeout: 7000
};
const initializeUpload = async guid => {
if (guid && guid.length > 1) { if (guid && guid.length > 1) {
try { try {
await this.#initUpload(id, guid, bar, endpoint, successId, await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
} catch (error) { } catch (error) {
errorNotification.message = error.message; this.#notifyError(error.message);
this.#uikit.notification(errorNotification);
} }
} }
}; };
if (!typeField) { typeField.addEventListener('change', () => initializeUpload(typeField.value));
return; initializeUpload(typeField.value).catch(error => this.#notifyError(error.message));
} }
typeField.addEventListener('change', async () => await initializeUpload(typeField.value));
initializeUpload(typeField.value).catch(error => {
errorNotification.message = error.message;
this.#uikit.notification(errorNotification);
});
};
/** /**
* Initializes the upload process in the specified field after setting up the corresponding html elements and their interactions. * Initializes the upload process and sets up the UI elements.
* *
* @param {string} id - The identifier for the field. * @param {string} id - The identifier for the field.
* @param {string} typeGuid - The typeGuid for the field. * @param {string} typeGuid - The type GUID for the field.
* @param {string} progressBarId - The id of the progress bar element. * @param {string} progressBarId - The ID of the progress bar element.
* @param {string} uploadEndpoint - The endpoint url to which file is being uploaded. * @param {string} uploadEndpoint - The endpoint URL for the upload.
* @param {string|null} successId - The id of the success message element. * @param {string|null} successId - The ID of the success message element.
* @param {string|null} errorId - The id of the error message element. * @param {string|null} errorId - The ID of the error message element.
* @param {string|null} allowedFormatId - The id of the allowed format element. * @param {string|null} allowedFormatId - The ID of the allowed format element.
* @param {string|null} fileTypeId - The id of the file type element. * @param {string|null} fileTypeId - The ID of the file type element.
* @param {string|null} displayId - The id of the display element. * @param {string|null} displayId - The ID of the display element.
* @param {string|null} displayEndpoint - The endpoint url from where the file is being displayed. * @param {string|null} displayEndpoint - The endpoint URL for displaying the uploaded file.
*/ */
#initUpload = async (id, typeGuid, progressBarId, uploadEndpoint, successId, async #initUpload(id, typeGuid, progressBarId, uploadEndpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint) {
errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint) => {
try { try {
const call = id + typeGuid; this.#dispatchEvent('beforeInit', {
id,
typeGuid,
progressBarId,
uploadEndpoint,
successId,
errorId,
allowedFormatId,
fileTypeId,
displayId,
displayEndpoint
});
await this.#uploadHelper.init(call, typeGuid); const call = `${id}${typeGuid}`;
await this.#uploadHelper.init(call, typeGuid, true);
const bar = document.getElementById(progressBarId); const elements = this.#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId);
const successMessage = document.getElementById(successId);
const errorMessage = document.getElementById(errorId);
const displayArea = document.getElementById(displayId);
const allowedFormatSpan = document.getElementById(allowedFormatId);
const fileTypeSpan = document.getElementById(fileTypeId);
if (this.#uploadInstances[id]) { this.#dispatchEvent('afterElementsInit', {...elements});
this.#uploadInstances[id].$destroy(true);
}
if (successMessage) { this.#uploadInstances[id]?.$destroy(true);
successMessage.setAttribute('hidden', 'hidden'); this.#prepareUploadUI(elements, call, successId, errorId);
}
if (errorMessage) {
errorMessage.setAttribute('hidden', 'hidden');
}
if (allowedFormatSpan) {
allowedFormatSpan.textContent = this.#uploadHelper.get(call, 'allow_span', '');
}
if (fileTypeSpan) {
allowedFormatSpan.textContent = this.#uploadHelper.get(call, 'file_type_span', 'file');
}
if (displayEndpoint && displayArea) {
this.#displayHelper.set(
displayEndpoint,
displayArea,
this.#uploadHelper.getParams(
this.#uploadHelper.get(call, 'display_fields')
)
);
}
this.#uploadInstances[id] = this.#uikit.upload(`#${id}`, { this.#uploadInstances[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.#uploadHelper.get(call, 'allow', false),
name: () => this.#uploadHelper.get(call, 'name') || 'files', name: this.#uploadHelper.get(call, 'name', 'files'),
beforeSend: (env) => this.#handleBeforeSend(call, env),
beforeSend: (environment) => { beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}),
if (true === 'true') ; load: (e) => this.#dispatchEvent('load', {event: e}),
environment.data.params = this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'param_fields')); error: (error) => this.#handleUploadError(error, elements.errorMessage),
}, complete: (xhr) => this.#handleComplete(xhr, elements.successMessage),
loadStart: (e) => this.#handleLoadStart(e, elements.progressBar),
beforeAll: () => { progress: (e) => this.#handleProgress(e, elements.progressBar),
if (true === 'true') ; loadEnd: (e) => this.#handleLoadEnd(e, elements.progressBar),
}, completeAll: (xhr) => this.#handleCompleteAll(xhr, elements.progressBar, elements.successMessage, elements.errorMessage, displayEndpoint, displayId, call)
load: () => {
if (true === 'true') ;
},
error: (error) => {
if (true === 'true') ;
if (errorMessage) {
errorMessage.removeAttribute('hidden');
errorMessage.textContent = 'Upload failed.';
}
},
complete: () => {
if (true === 'true') ;
if (successMessage) {
successMessage.removeAttribute('hidden');
successMessage.textContent = 'Upload completed successfully.';
}
},
loadStart: (e) => {
if (true === 'true') ;
if (bar) {
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
}
},
progress: (e) => {
if (true === 'true') ;
if (bar) {
bar.max = e.total;
bar.value = e.loaded;
}
},
loadEnd: (e) => {
if (true === 'true') ;
if (bar) {
bar.max = e.total;
bar.value = e.loaded;
}
},
completeAll: () => {
if (true === 'true') ;
if (bar) {
setTimeout(() => {
bar.setAttribute('hidden', 'hidden');
if (errorMessage) {
successMessage.setAttribute('hidden', 'hidden');
}
if (errorMessage) {
errorMessage.setAttribute('hidden', 'hidden');
}
}, 1000);
}
if (displayEndpoint && displayArea) {
this.#displayHelper.set(
displayEndpoint,
displayArea,
this.#uploadHelper.getParams(
this.#uploadHelper.get(call, 'display_fields')
)
);
}
}
}); });
} catch (error) { } catch (error) {
throw error; throw error;
} }
}; }
/** /**
* Builds a URL by appending a GUID parameter to the endpoint. * Returns the required HTML elements by their IDs.
* *
* @param {string} endpoint - The base URL endpoint * @param {string} progressBarId - The ID of the progress bar element.
* @param {string} guid - The GUID parameter value * @param {string} successId - The ID of the success message element.
* @returns {string} The built URL with the appended GUID parameter * @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.
*/ */
#buildUrl = (endpoint, guid) => { #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)
};
}
/**
* 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 {object} params - Additional parameters to be passed to the display helper.
*
* @return {void}
*/
#setupDisplayArea(displayEndpoint, displayId, params = {}) {
const displayArea = document.getElementById(displayId);
if (displayEndpoint && displayArea) {
this.#displayHelper.set(displayEndpoint, displayArea, params);
}
}
/**
* Notifies the user of an error using UIKit notifications.
*
* @param {string} message - The error message to display.
* @return {void}
*/
#notifyError(message) {
this.#uikit.notification({message, status: 'danger', timeout: 7000});
}
/**
* Logs an error to the console.
*
* @param {string} message - The error message to be logged.
*
* @return {undefined}
*/
#logError(message) {
{
console.error(message);
}
}
/**
* 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.uploader.${eventName}`, {detail}));
}
/**
* Builds a URL by appending the GUID parameter.
*
* @param {string} endpoint - The base URL endpoint.
* @param {string} guid - The GUID parameter to be appended to the URL.
* @return {string} - The constructed URL with the GUID parameter appended.
*/
#buildUrl(endpoint, guid) {
const separator = endpoint.includes('?') ? '&' : '?'; const separator = endpoint.includes('?') ? '&' : '?';
return `${endpoint}${separator}guid=${guid}`; return `${endpoint}${separator}guid=${guid}`;
}; }
/**
* Prepares the UI elements before starting the upload.
*
* @param {object} elements - The UI elements to be modified.
* @param {string} call - The call identifier.
* @param {string} successId - The id of the success message element.
* @param {string} errorId - The id of the error message element.
*/
#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');
}
/**
* Handles beforeSend logic for uploads.
*
* @param {object} call - The call object.
* @param {object} environment - The environment object.
* @return {void}
*/
#handleBeforeSend(call, environment) {
this.#dispatchEvent('beforeSend', {environment});
environment.data.params = this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'param_fields'));
this.#dispatchEvent('afterSendPreparation', {environment});
}
/**
* Handles the error scenario during upload.
*
* @param {Error} error - The error object that occurred during upload.
* @param {HTMLElement} errorMessage - The element used to display the error message.
*
* @return {void}
*/
#handleUploadError(error, errorMessage) {
this.#dispatchEvent('error', {error});
if (errorMessage) {
errorMessage.removeAttribute('hidden');
errorMessage.textContent = 'Upload failed.';
}
}
/**
* Handles the upload completion.
*
* @param {XMLHttpRequest} xhr - The XMLHttpRequest object representing the upload request.
* @param {HTMLElement} successMessage - The success message element to display.
*/
#handleComplete(xhr, successMessage) {
this.#dispatchEvent('complete', {xhr});
if (successMessage) {
successMessage.removeAttribute('hidden');
successMessage.textContent = 'Upload completed successfully.';
}
}
/**
* Handles the loadStart event.
*
* @param {Event} e - The loadStart event object.
* @param {HTMLElement} progressBar - The progress bar element. Optional.
* @return {void}
*/
#handleLoadStart(e, progressBar) {
this.#dispatchEvent('loadStart', {event: e});
if (progressBar) {
progressBar.removeAttribute('hidden');
progressBar.max = e.total;
progressBar.value = e.loaded;
}
}
/**
* Handles the progress event.
*
* @param {Event} e - The progress event.
* @param {Element} progressBar - The progress bar element.
*
* @return {void}
*/
#handleProgress(e, progressBar) {
this.#dispatchEvent('progress', {event: e});
if (progressBar) {
progressBar.max = e.total;
progressBar.value = e.loaded;
}
}
/**
* Handles the loadEnd event.
*
* @param {Event} e - The loadEnd event object.
* @param {Element} progressBar - The progress bar element to update.
*
* @return {void}
*/
#handleLoadEnd(e, progressBar) {
this.#dispatchEvent('loadEnd', {event: e});
if (progressBar) {
progressBar.max = e.total;
progressBar.value = e.loaded;
}
}
/**
* 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 {Object} call - The call object.
*
* @return {void}
*/
#handleCompleteAll(xhr, progressBar, successMessage, errorMessage, displayEndpoint, displayId, call) {
this.#dispatchEvent('completeAll', {xhr});
if (progressBar) {
setTimeout(() => {
progressBar.setAttribute('hidden', 'hidden');
if (successMessage) successMessage.setAttribute('hidden', 'hidden');
if (errorMessage) errorMessage.setAttribute('hidden', 'hidden');
}, 5000);
}
this.#setupDisplayArea(displayEndpoint, displayId, this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'display_fields')));
}
} }
(function(global) { (function(global) {
@ -551,10 +687,12 @@
const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {}; const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {};
if (!endpoint) { if (!endpoint) {
console.error('Endpoint is not defined, exiting initialization.');
return; return;
} }
if (!targetClass) { if (!targetClass) {
console.error('The target class is not defined, exiting initialization.');
return; return;
} }
@ -566,13 +704,14 @@
const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null; const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null;
if (!uploadEndpoint) { 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 return; // Skip this field if no upload endpoint is found
} }
const progressBarId = element.dataset.progressbarId; 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_diplay : null; const displayEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint_display : null;
const displayId = element.dataset.displayId || null; const displayId = element.dataset.displayId || 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;

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

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -2,7 +2,7 @@
"name": "vdm.uikit.uploader", "name": "vdm.uikit.uploader",
"title": "Uploader", "title": "Uploader",
"description": "Uploader is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website.", "description": "Uploader is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website.",
"version": "2.0.5", "version": "2.1.0",
"main": "dist/js/Uploader.min.js", "main": "dist/js/Uploader.min.js",
"scripts": { "scripts": {
"build": "rollup -c" "build": "rollup -c"

8
src/js/Uploader.js
View File

@ -13,12 +13,12 @@ import { UikitUploader } from './core/UikitUploader';
const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {}; const { endpoint, targetClass, ...additionalConfig } = global.vdmUploaderConfig || {};
if (!endpoint) { if (!endpoint) {
if (process.env.DEBUG === 'true') console.error('Endpoint is not defined, exiting initialization.'); if (process.env.DEBUG) console.error('Endpoint is not defined, exiting initialization.');
return; return;
} }
if (!targetClass) { if (!targetClass) {
if (process.env.DEBUG === 'true') console.error('The target class is not defined, exiting initialization.'); if (process.env.DEBUG) console.error('The target class is not defined, exiting initialization.');
return; return;
} }
@ -30,14 +30,14 @@ import { UikitUploader } from './core/UikitUploader';
const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null; const uploadEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint : null;
if (!uploadEndpoint) { if (!uploadEndpoint) {
if (process.env.DEBUG === 'true') console.error(`Upload Endpoint for ${id} is not defined, exiting initialization for this field.`); 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 return; // Skip this field if no upload endpoint is found
} }
const progressBarId = element.dataset.progressbarId; 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_diplay : null; const displayEndpoint = global.vdmUploaderConfig[id] ? global.vdmUploaderConfig[id].endpoint_display : null;
const displayId = element.dataset.displayId || null; const displayId = element.dataset.displayId || 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;

51
src/js/core/DisplayHelper.js
View File

@ -13,7 +13,8 @@
* await helper.set(endpoint, area, params); * await helper.set(endpoint, area, params);
*/ */
export class DisplayHelper { export class DisplayHelper {
constructor() {} constructor() {
}
/** /**
* Asynchronously fetches HTML content from a specified endpoint and injects it into a specified DOM area. * Asynchronously fetches HTML content from a specified endpoint and injects it into a specified DOM area.
@ -41,7 +42,7 @@ export class DisplayHelper {
if (!response.ok) { if (!response.ok) {
// If an error occurs, log it in debug mode // If an error occurs, log it in debug mode
if (process.env.DEBUG === 'true') { if (process.env.DEBUG) {
console.error('Error fetching display data:', response); console.error('Error fetching display data:', response);
} }
return; return;
@ -49,22 +50,53 @@ export class DisplayHelper {
const result = await response.json(); const result = await response.json();
// Check if result contains an error
if (result.error) {
// Log the error in debug mode and show a user-friendly message
if (process.env.DEBUG) {
console.error('Error fetching display data:', result.error);
}
return;
}
// 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
const beforeHideFilesDisplay = new CustomEvent('vdm.uikit.uploader.beforeHideFilesDisplay', {
detail: {result, displayArea}
});
document.dispatchEvent(beforeHideFilesDisplay);
displayArea.innerHTML = ''; // Empty the display area 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);
} else { } else {
// Trigger a custom event before displaying the entity files
const beforeFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.beforeFilesDisplay', {
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');
// Trigger a custom event after displaying the entity files
const afterFilesDisplayEvent = new CustomEvent('vdm.uikit.uploader.afterFilesDisplay', {
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
if (process.env.DEBUG === 'true') { if (process.env.DEBUG) {
console.error('Error fetching display data:', error); console.error('Error fetching display data:', error);
} }
// Optionally, you can clear the display area on error
displayArea.innerHTML = ''; // Empty the display area on failure
} }
}; };
@ -80,6 +112,11 @@ export class DisplayHelper {
* @private * @private
*/ */
#buildUrl = (endpoint, params) => { #buildUrl = (endpoint, params) => {
// If no params or params is empty, return the endpoint as is
if (!params || Object.keys(params).length === 0) {
return endpoint;
}
// Convert the params object into URL query string using URLSearchParams // Convert the params object into URL query string using URLSearchParams
const separator = endpoint.includes('?') ? '&' : '?'; const separator = endpoint.includes('?') ? '&' : '?';
const urlParams = new URLSearchParams(params); const urlParams = new URLSearchParams(params);

464
src/js/core/UikitUploader.js
View File

@ -8,50 +8,34 @@ import {DisplayHelper} from './DisplayHelper.js';
* @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 UikitUploader {
/**
* Helper class for uploading files.
*
* @class
* @classdesc This class provides methods for uploading files to a server.
*/
#uploadHelper; #uploadHelper;
/**
* Helper object for displaying messages and data in the user interface.
*
* @namespace displayHelper
*/
#displayHelper; #displayHelper;
/**
* @typedef {Object} UIKit
*
*/
#uikit; #uikit;
/**
* Object representing the upload instances.
*
* @typedef {Object} UploadInstances
* @property {Object} - The key-value pairs of upload instance IDs and their corresponding upload data.
*/
#uploadInstances = {}; #uploadInstances = {};
/** /**
* Creates an instance of the UikitUploader class. * Creates an instance of the UikitUploader class.
* *
* @param {Object} config - An object that contains configuration details. * @param {Object} config - Configuration details for uploader instances.
* @param {any} endpoint - Endpoint where the upload is being sent. * @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.#uploadHelper = new UploadHelper(endpoint);
this.#displayHelper = new DisplayHelper(); this.#displayHelper = new DisplayHelper();
this.#uikit = uikit; this.#uikit = uikit;
this.#initializeFields(config);
}
/**
* Initializes all upload fields based on the config.
*
* @param {Object} config - Configuration object mapping field IDs to their parameters.
*/
#initializeFields(config) {
Object.keys(config).forEach(id => { Object.keys(config).forEach(id => {
const entity = config[id]; this.#initField(id, config[id]);
this.#initField(id, entity);
}); });
} }
@ -59,198 +43,306 @@ export class UikitUploader {
* Initializes a field with given parameters and sets up its event listener. * Initializes a field with given parameters and sets up its event listener.
* *
* @param {string} id - The identifier for the field. * @param {string} id - The identifier for the field.
* @param {Object} entity - An object containing various field parameters. * @param {Object} entity - Configuration parameters for the field.
* entity must contain 'bar', 'typeId', 'endpoint', 'successId', 'errorId', 'allowedFormatId', 'fileTypeId', 'displayId', 'displayEndpoint' properties.
*/ */
#initField = (id, entity) => { #initField(id, entity) {
const { const {
bar, typeId, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint bar, typeId, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint
} = entity; } = entity;
this.#setupDisplayArea(displayEndpoint, displayId);
const typeField = document.getElementById(typeId); const typeField = document.getElementById(typeId);
if (!typeField) {
this.#logError(`Type field with ID ${typeId} not found`);
return;
}
const errorNotification = { const initializeUpload = async (guid) => {
message: 'error.message',
status: 'danger',
timeout: 7000
};
const initializeUpload = async guid => {
if (guid && guid.length > 1) { if (guid && guid.length > 1) {
try { try {
await this.#initUpload(id, guid, bar, endpoint, successId, await this.#initUpload(id, guid, bar, endpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint);
} catch (error) { } catch (error) {
errorNotification.message = error.message; this.#notifyError(error.message);
this.#uikit.notification(errorNotification);
} }
} }
}; };
if (!typeField) { typeField.addEventListener('change', () => initializeUpload(typeField.value));
if (process.env.DEBUG === 'true') console.error(`Type field with ID ${typeId} not found`); initializeUpload(typeField.value).catch(error => this.#notifyError(error.message));
return; }
}
typeField.addEventListener('change', async () => await initializeUpload(typeField.value));
initializeUpload(typeField.value).catch(error => {
errorNotification.message = error.message;
this.#uikit.notification(errorNotification);
});
};
/** /**
* Initializes the upload process in the specified field after setting up the corresponding html elements and their interactions. * Initializes the upload process and sets up the UI elements.
* *
* @param {string} id - The identifier for the field. * @param {string} id - The identifier for the field.
* @param {string} typeGuid - The typeGuid for the field. * @param {string} typeGuid - The type GUID for the field.
* @param {string} progressBarId - The id of the progress bar element. * @param {string} progressBarId - The ID of the progress bar element.
* @param {string} uploadEndpoint - The endpoint url to which file is being uploaded. * @param {string} uploadEndpoint - The endpoint URL for the upload.
* @param {string|null} successId - The id of the success message element. * @param {string|null} successId - The ID of the success message element.
* @param {string|null} errorId - The id of the error message element. * @param {string|null} errorId - The ID of the error message element.
* @param {string|null} allowedFormatId - The id of the allowed format element. * @param {string|null} allowedFormatId - The ID of the allowed format element.
* @param {string|null} fileTypeId - The id of the file type element. * @param {string|null} fileTypeId - The ID of the file type element.
* @param {string|null} displayId - The id of the display element. * @param {string|null} displayId - The ID of the display element.
* @param {string|null} displayEndpoint - The endpoint url from where the file is being displayed. * @param {string|null} displayEndpoint - The endpoint URL for displaying the uploaded file.
*/ */
#initUpload = async (id, typeGuid, progressBarId, uploadEndpoint, successId, async #initUpload(id, typeGuid, progressBarId, uploadEndpoint, successId, errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint) {
errorId, allowedFormatId, fileTypeId, displayId, displayEndpoint) => {
try { try {
const call = id + typeGuid; this.#dispatchEvent('beforeInit', {
id,
typeGuid,
progressBarId,
uploadEndpoint,
successId,
errorId,
allowedFormatId,
fileTypeId,
displayId,
displayEndpoint
});
await this.#uploadHelper.init(call, typeGuid); const call = `${id}${typeGuid}`;
await this.#uploadHelper.init(call, typeGuid, true);
const bar = document.getElementById(progressBarId); const elements = this.#getUploadElements(progressBarId, successId, errorId, allowedFormatId, fileTypeId, displayId);
const successMessage = document.getElementById(successId);
const errorMessage = document.getElementById(errorId);
const displayArea = document.getElementById(displayId);
const allowedFormatSpan = document.getElementById(allowedFormatId);
const fileTypeSpan = document.getElementById(fileTypeId);
if (this.#uploadInstances[id]) { this.#dispatchEvent('afterElementsInit', {...elements});
this.#uploadInstances[id].$destroy(true);
}
if (successMessage) { this.#uploadInstances[id]?.$destroy(true);
successMessage.setAttribute('hidden', 'hidden'); this.#prepareUploadUI(elements, call, successId, errorId);
}
if (errorMessage) {
errorMessage.setAttribute('hidden', 'hidden');
}
if (allowedFormatSpan) {
allowedFormatSpan.textContent = this.#uploadHelper.get(call, 'allow_span', '');
}
if (fileTypeSpan) {
allowedFormatSpan.textContent = this.#uploadHelper.get(call, 'file_type_span', 'file');
}
if (displayEndpoint && displayArea) {
this.#displayHelper.set(
displayEndpoint,
displayArea,
this.#uploadHelper.getParams(
this.#uploadHelper.get(call, 'display_fields')
)
);
}
this.#uploadInstances[id] = this.#uikit.upload(`#${id}`, { this.#uploadInstances[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.#uploadHelper.get(call, 'allow', false),
name: () => this.#uploadHelper.get(call, 'name') || 'files', name: this.#uploadHelper.get(call, 'name', 'files'),
beforeSend: (env) => this.#handleBeforeSend(call, env),
beforeSend: (environment) => { beforeAll: (files) => this.#dispatchEvent('beforeAll', {files}),
if (process.env.DEBUG === 'true') console.log('beforeSend', environment); load: (e) => this.#dispatchEvent('load', {event: e}),
environment.data.params = this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'param_fields')); error: (error) => this.#handleUploadError(error, elements.errorMessage),
}, complete: (xhr) => this.#handleComplete(xhr, elements.successMessage),
loadStart: (e) => this.#handleLoadStart(e, elements.progressBar),
beforeAll: () => { progress: (e) => this.#handleProgress(e, elements.progressBar),
if (process.env.DEBUG === 'true') console.log('beforeAll'); loadEnd: (e) => this.#handleLoadEnd(e, elements.progressBar),
}, completeAll: (xhr) => this.#handleCompleteAll(xhr, elements.progressBar, elements.successMessage, elements.errorMessage, displayEndpoint, displayId, call)
load: () => {
if (process.env.DEBUG === 'true') console.log('load');
},
error: (error) => {
if (process.env.DEBUG === 'true') console.log('error', error);
if (errorMessage) {
errorMessage.removeAttribute('hidden');
errorMessage.textContent = 'Upload failed.';
}
},
complete: () => {
if (process.env.DEBUG === 'true') console.log('complete');
if (successMessage) {
successMessage.removeAttribute('hidden');
successMessage.textContent = 'Upload completed successfully.';
}
},
loadStart: (e) => {
if (process.env.DEBUG === 'true') console.log('loadStart', e);
if (bar) {
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
}
},
progress: (e) => {
if (process.env.DEBUG === 'true') console.log('progress', e);
if (bar) {
bar.max = e.total;
bar.value = e.loaded;
}
},
loadEnd: (e) => {
if (process.env.DEBUG === 'true') console.log('loadEnd', e);
if (bar) {
bar.max = e.total;
bar.value = e.loaded;
}
},
completeAll: () => {
if (process.env.DEBUG === 'true') console.log('completeAll');
if (bar) {
setTimeout(() => {
bar.setAttribute('hidden', 'hidden');
if (errorMessage) {
successMessage.setAttribute('hidden', 'hidden');
}
if (errorMessage) {
errorMessage.setAttribute('hidden', 'hidden');
}
}, 1000);
}
if (displayEndpoint && displayArea) {
this.#displayHelper.set(
displayEndpoint,
displayArea,
this.#uploadHelper.getParams(
this.#uploadHelper.get(call, 'display_fields')
)
);
}
}
}); });
} catch (error) { } catch (error) {
throw error; throw error;
} }
}; }
/** /**
* Builds a URL by appending a GUID parameter to the endpoint. * Returns the required HTML elements by their IDs.
* *
* @param {string} endpoint - The base URL endpoint * @param {string} progressBarId - The ID of the progress bar element.
* @param {string} guid - The GUID parameter value * @param {string} successId - The ID of the success message element.
* @returns {string} The built URL with the appended GUID parameter * @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.
*/ */
#buildUrl = (endpoint, guid) => { #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)
};
}
/**
* 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 {object} params - Additional parameters to be passed to the display helper.
*
* @return {void}
*/
#setupDisplayArea(displayEndpoint, displayId, params = {}) {
const displayArea = document.getElementById(displayId);
if (displayEndpoint && displayArea) {
this.#displayHelper.set(displayEndpoint, displayArea, params);
}
}
/**
* Notifies the user of an error using UIKit notifications.
*
* @param {string} message - The error message to display.
* @return {void}
*/
#notifyError(message) {
this.#uikit.notification({message, status: 'danger', timeout: 7000});
}
/**
* Logs an error to the console.
*
* @param {string} message - The error message to be logged.
*
* @return {undefined}
*/
#logError(message) {
if (process.env.DEBUG) {
console.error(message);
}
}
/**
* 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.uploader.${eventName}`, {detail}));
}
/**
* Builds a URL by appending the GUID parameter.
*
* @param {string} endpoint - The base URL endpoint.
* @param {string} guid - The GUID parameter to be appended to the URL.
* @return {string} - The constructed URL with the GUID parameter appended.
*/
#buildUrl(endpoint, guid) {
const separator = endpoint.includes('?') ? '&' : '?'; const separator = endpoint.includes('?') ? '&' : '?';
return `${endpoint}${separator}guid=${guid}`; return `${endpoint}${separator}guid=${guid}`;
}; }
/**
* Prepares the UI elements before starting the upload.
*
* @param {object} elements - The UI elements to be modified.
* @param {string} call - The call identifier.
* @param {string} successId - The id of the success message element.
* @param {string} errorId - The id of the error message element.
*/
#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');
}
/**
* Handles beforeSend logic for uploads.
*
* @param {object} call - The call object.
* @param {object} environment - The environment object.
* @return {void}
*/
#handleBeforeSend(call, environment) {
this.#dispatchEvent('beforeSend', {environment});
environment.data.params = this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'param_fields'));
this.#dispatchEvent('afterSendPreparation', {environment});
}
/**
* Handles the error scenario during upload.
*
* @param {Error} error - The error object that occurred during upload.
* @param {HTMLElement} errorMessage - The element used to display the error message.
*
* @return {void}
*/
#handleUploadError(error, errorMessage) {
this.#dispatchEvent('error', {error});
if (errorMessage) {
errorMessage.removeAttribute('hidden');
errorMessage.textContent = 'Upload failed.';
}
}
/**
* Handles the upload completion.
*
* @param {XMLHttpRequest} xhr - The XMLHttpRequest object representing the upload request.
* @param {HTMLElement} successMessage - The success message element to display.
*/
#handleComplete(xhr, successMessage) {
this.#dispatchEvent('complete', {xhr});
if (successMessage) {
successMessage.removeAttribute('hidden');
successMessage.textContent = 'Upload completed successfully.';
}
}
/**
* Handles the loadStart event.
*
* @param {Event} e - The loadStart event object.
* @param {HTMLElement} progressBar - The progress bar element. Optional.
* @return {void}
*/
#handleLoadStart(e, progressBar) {
this.#dispatchEvent('loadStart', {event: e});
if (progressBar) {
progressBar.removeAttribute('hidden');
progressBar.max = e.total;
progressBar.value = e.loaded;
}
}
/**
* Handles the progress event.
*
* @param {Event} e - The progress event.
* @param {Element} progressBar - The progress bar element.
*
* @return {void}
*/
#handleProgress(e, progressBar) {
this.#dispatchEvent('progress', {event: e});
if (progressBar) {
progressBar.max = e.total;
progressBar.value = e.loaded;
}
}
/**
* Handles the loadEnd event.
*
* @param {Event} e - The loadEnd event object.
* @param {Element} progressBar - The progress bar element to update.
*
* @return {void}
*/
#handleLoadEnd(e, progressBar) {
this.#dispatchEvent('loadEnd', {event: e});
if (progressBar) {
progressBar.max = e.total;
progressBar.value = e.loaded;
}
}
/**
* 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 {Object} call - The call object.
*
* @return {void}
*/
#handleCompleteAll(xhr, progressBar, successMessage, errorMessage, displayEndpoint, displayId, call) {
this.#dispatchEvent('completeAll', {xhr});
if (progressBar) {
setTimeout(() => {
progressBar.setAttribute('hidden', 'hidden');
if (successMessage) successMessage.setAttribute('hidden', 'hidden');
if (errorMessage) errorMessage.setAttribute('hidden', 'hidden');
}, 5000);
}
this.#setupDisplayArea(displayEndpoint, displayId, this.#uploadHelper.getParams(this.#uploadHelper.get(call, 'display_fields')));
}
} }

12
src/js/core/UploadHelper.js
View File

@ -105,17 +105,15 @@ export class UploadHelper {
*/ */
init = async (id, guid, reset = false) => { init = async (id, guid, reset = false) => {
if (this.#data[id] && !reset) { if (this.#data[id] && !reset) {
process.env.DEBUG === 'true' && console.log(`Field ${id} is already initialized, reusing existing data.`); process.env.DEBUG && console.log(`Field ${id} is already initialized, reusing existing data.`);
return; return;
} }
try { try {
const url = this.#buildUrl(this.#endpoint, guid); const url = this.#buildUrl(this.#endpoint, guid);
const { DEBUG } = process.env;
const result = await this.#fetchData(url); const result = await this.#fetchData(url);
DEBUG === 'true' && console.log('Data fetched:', result); if (process.env.DEBUG) console.log('Data fetched:', result);
if (result?.data && typeof result.data === 'object') { if (result?.data && typeof result.data === 'object') {
this.set(id, result.data); this.set(id, result.data);
@ -123,7 +121,7 @@ export class UploadHelper {
throw new Error(result.error || 'An error occurred during the file type request.'); throw new Error(result.error || 'An error occurred during the file type request.');
} }
} catch (error) { } catch (error) {
DEBUG === 'true' && console.error('Error during initialization:', error); if (process.env.DEBUG) console.error('Error during initialization:', error);
} }
}; };
@ -136,11 +134,11 @@ export class UploadHelper {
#fetchData = async url => { #fetchData = async url => {
const response = await fetch(url, { const response = await fetch(url, {
method: 'GET', method: 'GET',
headers: { 'Content-Type': 'application/json' }, headers: {'Content-Type': 'application/json'},
}); });
if (!response.ok) { if (!response.ok) {
process.env.DEBUG === 'true' && console.error('Error fetching data:', response); process.env.DEBUG && console.error('Error fetching data:', response);
return; return;
} }