From 89e53cd3c9c79a180e352ea2df668dc64bf80529 Mon Sep 17 00:00:00 2001 From: Abayomi Amusa Date: Sun, 11 Feb 2024 04:20:10 +0100 Subject: [PATCH] v1.0.0 upgrade --- CHANGELOG.md | 18 + Gruntfile.js | 6 +- README.md | 29 +- __test__/custup.test-d.ts | 2 +- core/custupCore.d.ts | 457 +++++++---- core/custupCore.d.ts.map | 2 +- core/custupCore.js | 825 ++++++++++++++------ package-lock.json | 4 +- package.json | 6 +- plugins/custupmediasource.d.ts | 15 +- plugins/custupmediasource.d.ts.map | 2 +- plugins/custupmediasource.js | 46 +- plugins/externalsources.d.ts | 26 +- plugins/externalsources.d.ts.map | 2 +- plugins/externalsources.js | 87 ++- src/all.min.css | 2 +- src/custup.d.ts | 1153 ++++++++++++++++++++++++++-- src/custup.d.ts.map | 2 +- src/custup.js | 444 ++++++++++- src/custup.min.js | 6 +- src/elegant.min.css | 1 + styles/elegant.css | 424 ++++++++++ types/types.ts | 8 + utils/icons.d.ts | 6 + utils/icons.js | 57 +- 25 files changed, 3048 insertions(+), 582 deletions(-) create mode 100644 src/elegant.min.css create mode 100644 styles/elegant.css diff --git a/CHANGELOG.md b/CHANGELOG.md index f2b497a..2e27f7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,23 @@ # Changelog +## 1.0.0 + +- Added chunk upload +- Fix: file persistent storage method, files are now stored as ObjectURL on https and base64 on http +- New: Added auto upload for files added to the UI when files are still uploading +- New: Added option display_file_sources: if set to false the file sources will not be listed on the default UI. +- New: New event: 'file_source.closed' event that gets triggered when file source popup is closed. +- New: New method: display_message +- New: New method: get_file_sources +- New: Added two options to file_upload option: chunk_size and should_chunk. +- New: Added messages option for configuring messages with timeout option. +- New: Added event 'default_ui.shown' and 'default_ui.closed'. +- New: Added clear_persisted_files method. +- New: Added close_file_source_popup method. +- New: Added new option show_upload_progress_bar. +- New: Added upload_all_finished event. +- New: Added select_file_from_device method. + ## 0.2.0 - New: Added custup options typescript types diff --git a/Gruntfile.js b/Gruntfile.js index 48ec713..998ba65 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -28,7 +28,11 @@ module.exports = function(grunt) { ext: '.min.css' }, { - 'src/all.min.css': ['styles/bare.css', 'styles/custup.css', 'styles/detached.css', 'styles/profilePicture.css', 'styles/resumeUploaderUI.css'] + 'src/all.min.css': [ + 'styles/bare.css', 'styles/custup.css', + 'styles/detached.css', 'styles/profilePicture.css', + 'styles/resumeUploaderUI.css', 'styles/elegant.css' + ] } ] } diff --git a/README.md b/README.md index 727e479..4184859 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ -![CustUp Init](https://github.com/paulosabayomi/CustUp/blob/master/_assets/custup-default.png) +![CustUp Default UI type](https://github.com/paulosabayomi/CustUp/blob/master/_assets/custup-default.png) CustUp is a highly customizable library with zero dependency, and can be easily adapted to a wide range of applications. @@ -18,9 +18,10 @@ CustUp which is the short for Customizable Uploader was made to be >95% customiz ### Things you might want to know about CustUp -- Easily change the UI design or create your own UI just by overriding or adding to the CSS classes of the Elements -- With the instance attachment feature, you can create multiple CustUp instances and upload all files at once together with form fields and/or additional data -- You can get all the selected files and upload them manually +- Choose the UI type that fits your project. +- Easily change the UI design or create your own UI just by overriding or adding to the CSS classes of the Elements. +- With the instance attachment feature, you can create multiple CustUp instances and upload all files at once together with form fields and/or additional data. +- You can get all the selected files and upload them manually. - You don't need to worry about installing HTTP client to manage your upload requests because axios was bundled into CustUp which you can easily configure. ## Documentation Homepage @@ -268,8 +269,10 @@ const instance4 = new CustUp({ instance4.upload(); ``` -`single_upload` when set to true and used with `instance_attach` it is useful if all files should be uploaded at once, if `false` then upload event will be triggered for each of the files in all of the attached instances - +`single_upload` when set to true and used with `instance_attach` it is useful if all files should be uploaded at once, if `false` then upload event will be triggered for each of the files in all of the attached instances. + +See more guides on the [documentation page](https://custup.pryxy.com/docs/category/guides). + ## Options | Option | type | default | Required | Description | @@ -303,7 +306,7 @@ persist_files | `boolean` | `false` | Not required | To persist files in the bro persist_type | `soft` or `hard` | `soft` | Not required | To set the `persist_files` storage method, if `soft` CustUp will use `sessionStorage` to temporarily store files and if `hard` CustUp will use `localStorage` to store files. alert_timeout_time | `number` | `300` milliseconds | Not required | The timeout for CustUp alerts -There are many more other options, read the documentation for more options +There are many more other options, read the [documentation for more options](https://custup.pryxy.com/docs/category/options) ## All Options @@ -470,6 +473,8 @@ options = { } ``` +See all available options [here](https://custup.pryxy.com/docs/category/options) + ## Events CustUp has events that can be subscribed to @@ -535,6 +540,8 @@ And many more events, read the documentation for more events */ ``` +Check out more events [here](https://custup.pryxy.com/docs/events) + ## Methods There are several methods that can be used to customize the library to your taste, example, to dynamically call the `upload` method @@ -560,7 +567,7 @@ retry_upload | To trigger upload retry for all files that were not uploaded due | clear_files | To clear all the added files from the memory, browser storage and UI | `None` | | get_total_file_count | Returns all total number of added files, it will only return total number of selected files if `count_default_files` is set to false | `None` | -And many more, read more about CustUp methods in the documentation +And many more, read more about [CustUp methods in the documentation](https://custup.pryxy.com/docs/methods) ## Inspiration @@ -568,10 +575,10 @@ When I was working on a freelance project that has a custom file upload UI desig ## Upcoming Features -- [ ] Upload resumable -- [ ] Chunk upload -- [ ] React js version - [x] Typescript version/support +- [x] React js version +- [x] Chunk upload +- [ ] Upload resumable - [ ] Onedrive implementation ## Contributing diff --git a/__test__/custup.test-d.ts b/__test__/custup.test-d.ts index d88f7ec..83050d1 100644 --- a/__test__/custup.test-d.ts +++ b/__test__/custup.test-d.ts @@ -4,4 +4,4 @@ import CustUp from '../src/custup' const instance1 = new CustUp({}) expectType(instance1); -expectType(instance1.initializeUI()); \ No newline at end of file +expectType(instance1.initializeUI()); \ No newline at end of file diff --git a/core/custupCore.d.ts b/core/custupCore.d.ts index 85fe0ae..2d17f13 100644 --- a/core/custupCore.d.ts +++ b/core/custupCore.d.ts @@ -43,10 +43,14 @@ export default class CustUpCore { * headers: {}; * configs: {}; * }; + * chunk_size: number; + * should_chunk: boolean; * }; * allowed_sources: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + * display_file_sources: boolean; * upload_automatically?: boolean; * show_upload_error_overlay?: boolean; + * show_upload_progress_bar?: boolean; * file_source_config: { * video_recording: { * video_only: boolean; @@ -119,6 +123,9 @@ export default class CustUpCore { * persist_files: boolean; * persist_type: 'soft' | 'hard'; * alert_timeout_time: number; + * messages: { + * timeout: number; + * }; * }} * * @param autoInitialize - Whether to automatically initialize the library @@ -195,7 +202,7 @@ export default class CustUpCore { * @param alert_timeout_time - the timeout for Custup alerts default is 300ms * */ - constructor({ autoInitialize, disable_scrollbar, persist_default_ui, use_default_file_display_ui, _custupDefaultUploadSentence, show_preview_file_btn, show_file_remove_btn, show_file_details_container, file_preview_animation_types, default_styles_override, persist_styles_override_across_instances, css_font_link, css_font_name, external_source_style_override, media_capture_source_style_override, allowed_file_types, targetRootElement, maxNumberOfFiles, minNumberOfFiles, minimumAllowedFileSize, maximumAllowedFileSize, ui_type, position_container, allowMultipleUpload, file_upload, upload_automatically, show_upload_error_overlay, file_source_icons, allowed_sources, display_ui_tools, show_ui_tools_on_mobile_devices, disable_drag_n_drop, disable_select_files_from_device, allowed_tools, default_icons_override, file_source_config, default_files, count_default_files, instance_attach, single_upload, persist_files, persist_type, alert_timeout_time }: { + constructor({ autoInitialize, disable_scrollbar, persist_default_ui, use_default_file_display_ui, _custupDefaultUploadSentence, show_preview_file_btn, show_file_remove_btn, show_file_details_container, file_preview_animation_types, default_styles_override, persist_styles_override_across_instances, css_font_link, css_font_name, external_source_style_override, media_capture_source_style_override, allowed_file_types, targetRootElement, maxNumberOfFiles, minNumberOfFiles, minimumAllowedFileSize, maximumAllowedFileSize, ui_type, position_container, allowMultipleUpload, file_upload, upload_automatically, show_upload_error_overlay, show_upload_progress_bar, file_source_icons, allowed_sources, display_file_sources, display_ui_tools, show_ui_tools_on_mobile_devices, disable_drag_n_drop, disable_select_files_from_device, allowed_tools, default_icons_override, file_source_config, default_files, count_default_files, instance_attach, single_upload, persist_files, persist_type, alert_timeout_time, messages }: { _custupDefaultUploadSentence?: string | undefined; disable_scrollbar?: boolean | undefined; persist_default_ui?: boolean | undefined; @@ -256,10 +263,6 @@ export default class CustUpCore { defaultUIUploadSentenceContainer: string; defaultUIUploadIconsContainer: string; UITool: string; - /** - * An array that holds successfully uploaded files - * @protected @property {File[]} successfullyUploadedFiles - */ fileDisplayUI: string; fileUIOuterContainer: string; fileDetailsContainer: string; @@ -267,10 +270,7 @@ export default class CustUpCore { custup_fileSize: string; fileBottomDetails: string; fileUIBottomToolsContainer: string; - file_wrapper_el: string; /** - * Custup UI styles - * @protected @property {FormData} ui_styles - */ + file_wrapper_el: string; fileUI: string; remove_file_btn: string; file_upload_overlay_ui: string; @@ -280,6 +280,9 @@ export default class CustUpCore { file_upload_progress_inner: string; retry_upload_overlay_ui: string; retry_upload_button: string; + /** + * @private @property {Object} file_progress + */ message_container: string; filePreviewer: string; filePreviewerInnerContainer: string; @@ -288,6 +291,7 @@ export default class CustUpCore { default_icons_override?: { add_file: string; add_file_2: string; + add_file_filled: string; delete_filled: string; delete: string; edit: string; @@ -329,9 +333,6 @@ export default class CustUpCore { check: string; dot: string; stop: string; - /** - * @protected handleCustomScroll - */ refresh: string; audio: string; screen_recording: string; @@ -344,6 +345,11 @@ export default class CustUpCore { openai_logo: string; red_circle_cancel: string; upload_circle: string; + loading_partial: string; + desktop_device: string; + mobile_device: string; + search_icon: string; + bars: string; } | undefined; allowed_file_types: (keyof { '123': string; @@ -363,7 +369,7 @@ export default class CustUpCore { acu: string; /** * Array that holds default loaded files - * @public @property {File[]} defaultFiles + * @protected @property {File[]} defaultFiles */ acutc: string; adp: string; @@ -372,18 +378,10 @@ export default class CustUpCore { afp: string; ahead: string; ai: string; - /** - * Array that holds that could not be sent because of an error - * @protected @property {File[]} filesNotSent - */ aif: string; aifc: string; aiff: string; air: string; - /** - * An array that holds successfully uploaded files - * @protected @property {File[]} successfullyUploadedFiles - */ ait: string; ami: string; apk: string; @@ -391,10 +389,7 @@ export default class CustUpCore { application: string; apr: string; arc: string; - asc: string; /** - * Custup FormData for uploading files - * @private @property {FormData} file_upload_form_data - */ + asc: string; asf: string; asm: string; aso: string; @@ -405,17 +400,10 @@ export default class CustUpCore { atomsvc: string; atx: string; au: string; - avi: string; /** - * Custup Axios instance for file upload - * @private @property {axios} __axios_instance - */ + avi: string; aw: string; azf: string; azs: string; - /** - * Events - * @private @property {any} eventMethods - */ azw: string; bat: string; bcpio: string; @@ -429,10 +417,7 @@ export default class CustUpCore { bmi: string; bmp: string; book: string; - box: string; /** - * Events - * @private @property {any} eventMethods - */ + box: string; boz: string; bpk: string; btif: string; @@ -455,7 +440,10 @@ export default class CustUpCore { cba: string; cbr: string; cbt: string; - cbz: string; + cbz: string; /** + * Events + * @private @property {any} eventMethods + */ cc: string; cct: string; ccxml: string; @@ -515,10 +503,7 @@ export default class CustUpCore { cxx: string; dae: string; daf: string; - dart: string; /** Custup Options - * @protected @param {{}} options - * - */ + dart: string; dataless: string; davmount: string; dbk: string; @@ -544,7 +529,9 @@ export default class CustUpCore { dmp: string; dms: string; dna: string; - doc: string; + doc: string; /** + * @private @property {number} lastToolOffsetBottom + */ docm: string; docx: string; dot: string; @@ -1155,11 +1142,7 @@ export default class CustUpCore { tar: string; tcap: string; tcl: string; - teacher: string; /** - * @private getRandChars - * @param {string} identifyer - * @returns {string} - */ + teacher: string; tei: string; teicorpus: string; tex: string; @@ -1252,6 +1235,9 @@ export default class CustUpCore { vxml: string; w3d: string; wad: string; + /** + * @protected loadFont + */ wav: string; wax: string; wbmp: string; @@ -1274,9 +1260,6 @@ export default class CustUpCore { wml: string; wmlc: string; wmls: string; - /** - * @protected @method read_files_from_storage - reads and loads files from browser Storage - */ wmlsc: string; wmv: string; wmx: string; @@ -1311,7 +1294,9 @@ export default class CustUpCore { xdp: string; xdssc: string; xdw: string; - xenc: string; + xenc: string; /** + * @protected @method load_default_files - Loads default files + */ xer: string; xfdf: string; xfdl: string; @@ -1394,10 +1379,14 @@ export default class CustUpCore { headers: {}; configs: {}; }; + chunk_size: number; + should_chunk: boolean; }; allowed_sources: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + display_file_sources: boolean; upload_automatically?: boolean | undefined; show_upload_error_overlay?: boolean | undefined; + show_upload_progress_bar?: boolean | undefined; file_source_config: { video_recording: { video_only: boolean; @@ -1470,6 +1459,9 @@ export default class CustUpCore { persist_files: boolean; persist_type: 'soft' | 'hard'; alert_timeout_time: number; + messages: { + timeout: number; + }; }); /** * Custup library name - !!! Please do not change !!! @@ -1478,14 +1470,14 @@ export default class CustUpCore { private libraryName; /** * Array that holds default loaded files - * @public @property {File[]} defaultFiles + * @protected @property {File[]} defaultFiles */ - public defaultFiles: any[]; + protected defaultFiles: any[]; /** * Array that holds all selected files - * @public @property {File[]} selectedFiles + * @protected @property {File[]} selectedFiles */ - public selectedFiles: any[]; + protected selectedFiles: any[]; /** * Array that holds that could not be sent because of an error * @protected @property {File[]} filesNotSent @@ -1496,6 +1488,11 @@ export default class CustUpCore { * @protected @property {File[]} successfullyUploadedFiles */ protected successfullyUploadedFiles: any[]; + /** + * An array that holds successfully uploaded files + * @protected @property {File[]} currentlyUploadingFiles + */ + protected currentlyUploadingFiles: any[]; /** * UI messages items offset counter * @private @property {number} last_message_el_offset_bottom @@ -1525,10 +1522,6 @@ export default class CustUpCore { defaultUIUploadSentenceContainer: string; defaultUIUploadIconsContainer: string; UITool: string; - /** - * An array that holds successfully uploaded files - * @protected @property {File[]} successfullyUploadedFiles - */ fileDisplayUI: string; fileUIOuterContainer: string; fileDetailsContainer: string; @@ -1536,10 +1529,7 @@ export default class CustUpCore { custup_fileSize: string; fileBottomDetails: string; fileUIBottomToolsContainer: string; - file_wrapper_el: string; /** - * Custup UI styles - * @protected @property {FormData} ui_styles - */ + file_wrapper_el: string; fileUI: string; remove_file_btn: string; file_upload_overlay_ui: string; @@ -1549,6 +1539,9 @@ export default class CustUpCore { file_upload_progress_inner: string; retry_upload_overlay_ui: string; retry_upload_button: string; + /** + * @private @property {Object} file_progress + */ message_container: string; filePreviewer: string; filePreviewerInnerContainer: string; @@ -1560,6 +1553,7 @@ export default class CustUpCore { protected ui_icons: { add_file: string; add_file_2: string; + add_file_filled: string; delete_filled: string; delete: string; edit: string; @@ -1601,9 +1595,6 @@ export default class CustUpCore { check: string; dot: string; stop: string; - /** - * @protected handleCustomScroll - */ refresh: string; audio: string; screen_recording: string; @@ -1616,12 +1607,37 @@ export default class CustUpCore { openai_logo: string; red_circle_cancel: string; upload_circle: string; + loading_partial: string; + desktop_device: string; + mobile_device: string; + search_icon: string; + bars: string; }; /** * Custup Axios instance for file upload * @private @property {axios} __axios_instance */ private __axios_instance; + /** + * @private @property {Object} file_chunks + */ + private file_chunks; + /** + * @private @property {Object} file_progress + */ + private file_progress; + /** + * @private @property {any} _custup_media_source_instance + */ + private _custup_media_source_instance; + /** + * @private @property {any} _custup_external_source_instance + */ + private _custup_external_source_instance; + /** + * @private @property {any} _is_secured_context + */ + private _is_secured_context; /** * Events * @private @property {any} eventMethods @@ -1648,37 +1664,41 @@ export default class CustUpCore { addFilesUITool: undefined; uploadFilesToServerTool: undefined; close_popup_btn: undefined; - file_preview_animation_arr: any[]; - previewerAnimations: { - slideInLeft: { - left: string; - }[]; - slideInBottom: { - bottom: string; - }[]; - slideInRight: { - right: string; - }[]; - slideInTop: { - top: string; - }[]; - zoomIn: { - transform: string; - }[]; - fadeIn: { - opacity: number; - }[]; - }; + /** + * @private @property {Array} file_preview_animation_arr + */ + private file_preview_animation_arr; + /** + * @private @property {Object} previewerAnimations + */ + private previewerAnimations; toolDragger: undefined; - currentToolElOffsetLeft: number; - currentToolElOffsetBottom: number; - lastToolOffsetBottom: number; - lastToolOffsetLeft: number; - fileDisplayUIElCurrentScrollHeight: number; - scrollBarEl: undefined; + /** + * @private @property {number} currentToolElOffsetLeft + */ + private currentToolElOffsetLeft; + /** + * @private @property {number} currentToolElOffsetBottom + */ + private currentToolElOffsetBottom; + /** + * @private @property {number} lastToolOffsetBottom + */ + private lastToolOffsetBottom; + /** + * @private @property {number} lastToolOffsetLeft + */ + private lastToolOffsetLeft; + /** + * @private @property {number} fileDisplayUIElCurrentScrollHeight + */ + private fileDisplayUIElCurrentScrollHeight; + /** + * @public @property {number} scrollBarEl + */ + public scrollBarEl: undefined; /** Custup Options * @protected @param {{}} options - * */ protected options: { autoInitialize: boolean; @@ -1714,6 +1734,7 @@ export default class CustUpCore { openai_dalle_source: string; }; allowed_sources: never[]; + display_file_sources: boolean; file_source_config: { video_recording: { video_only: boolean; @@ -1795,9 +1816,12 @@ export default class CustUpCore { headers: {}; configs: {}; }; + chunk_size: number; + should_chunk: boolean; }; upload_automatically: boolean; show_upload_error_overlay: boolean; + show_upload_progress_bar: boolean; default_files: never[]; count_default_files: boolean; instance_attach: never[]; @@ -1805,6 +1829,9 @@ export default class CustUpCore { persist_files: boolean; persist_type: string; alert_timeout_time: number; + messages: { + timeout: number; + }; }; /** * @private getRandChars @@ -1816,9 +1843,19 @@ export default class CustUpCore { * @protected loadFont */ protected loadFont(): void; - map_override_styles_to_default_styles(o_style: any): void; - map_override_icons_to_default_icons(): void; - load_default_files(): void; + /** + * @protected @method map_override_styles_to_default_styles - maps the provided styles to the default styles + * @param {Object} o_style - The style to map to the default styles + */ + protected map_override_styles_to_default_styles(o_style: Object): void; + /** + * @protected @method map_override_icons_to_default_icons - Maps the provided icons to the current icons + */ + protected map_override_icons_to_default_icons(): void; + /** + * @protected @method load_default_files - Loads default files + */ + protected load_default_files(): void; /** * @protected @method update_file_storage - updates the added files to the browser Storage */ @@ -1839,7 +1876,7 @@ export default class CustUpCore { /** * @public initializeUI */ - public initializeUI(): false | undefined; + public initializeUI(): this | undefined; /** * @protected showDefaultUI * @param {boolean} after_container_init - a boolean to specify if the calcel icon should be added to the @@ -1850,19 +1887,22 @@ export default class CustUpCore { * @protected removeDefaultUI */ protected removeDefaultUI(): void; - set_file_preview_animations(): void; /** - * @public @method handleRecordVideo + * @protected @method set_file_preview_animations + */ + protected set_file_preview_animations(): void; + /** + * @protected @method handleRecordVideo * @param {'video' | 'image' | 'audio' | 'screen'} type */ - public handleMediaSource(type: 'video' | 'image' | 'audio' | 'screen'): void; + protected handleMediaSource(type: 'video' | 'image' | 'audio' | 'screen'): void; /** - * @public @method handleOpenaiDALLESource + * @protected @method handleOpenaiDALLESource * @param {'url' | 'onedrive' | 'google_drive' | 'clipboard' | 'box' | 'dalle' | 'dropbox'} type - source type */ - public handleExternalSource(type: 'url' | 'onedrive' | 'google_drive' | 'clipboard' | 'box' | 'dalle' | 'dropbox'): void; + protected handleExternalSource(type: 'url' | 'onedrive' | 'google_drive' | 'clipboard' | 'box' | 'dalle' | 'dropbox'): void; /** - * @protected makeFileDisplayUI + * @protected @method makeFileDisplayUI */ protected makeFileDisplayUI(): void; /** @@ -1872,13 +1912,13 @@ export default class CustUpCore { protected set_scroll_pointer_event(el: HTMLElement, targetEl?: undefined, targetScrollBarEl?: undefined): void; layerMoved: any; /** - * @protected make_ui_tools + * @protected @method make_ui_tools */ protected make_ui_tools(): void; /** - * @protected handleAddNewFileButton + * @protected @method handleAddNewFileButton */ - protected handleAddNewFileButton(): void; + protected handleAddNewFileButton(): (() => void) | undefined; /** * @protected @method attempt_clear_mobile_tools - This methods clears the ui tools if on mobile devices, if no tools were displayed it does nothing */ @@ -1893,58 +1933,83 @@ export default class CustUpCore { * @param {boolean} file_removed */ protected setNumberOfFiles(file_removed?: boolean): void; - createScrollBar(targetEl?: undefined): HTMLDivElement; - updateScrollbarHeight(targetEl?: undefined): void; /** - * @protected handleCustomScroll + * @protected @method createScrollBar + * @param {HTMLElement | undefined} targetEl - The scrollbar parent container + * @returns {HTMLElement} + */ + protected createScrollBar(targetEl?: HTMLElement | undefined): HTMLElement; + /** + * @protected @method updateScrollbarHeight + * @param {HTMLElement} targetEl - The scrollbar parent container + */ + protected updateScrollbarHeight(targetEl?: HTMLElement): void; + /** + * @protected @method handleCustomScroll + * @param {Event} e - Mouse wheel event or touch event for touch devices + * @param {HTMLElement | undefined} targetEl - The scrolling container parent container + * @param {HTMLElement | undefined} targetScrollBarEl - The main scroll bar element */ - protected handleCustomScroll(e: any, targetEl?: undefined, targetScrollBarEl?: undefined): void; + protected handleCustomScroll(e: Event, targetEl?: HTMLElement | undefined, targetScrollBarEl?: HTMLElement | undefined): void; /** - * @protected handleInnerElementContainerMouseDown + * removed because tool dragging has been removed for touch devices, + * the upload tool on bigger screens has been changed to a static tool which is displayed inside the header on mobile devices + * @deprecated @protected @method handleInnerElementContainerPointerDown */ - protected handleInnerElementContainerMouseDown(e: any): void; + protected handleInnerElementContainerPointerDown(e: any): void; /** - * @protected handleInnerElementContainerMouseUp + * @protected @method handleInnerElementContainerMouseUp */ protected handleInnerElementContainerMouseUp(e: any): void; /** - * @protected handleToolDraggerMouseMove + * @protected @method handleToolDraggerMouseMove */ protected handleToolDraggerMouseMove(e: any): void; /** - * @protected addFileToUI + * @protected @method addFileToUI * @param {File} file * @param {boolean} isUploadable + * @param {number | null} index + */ + protected addFileToUI(file: File, isUploadable?: boolean, index?: number | null): void; + /** + * @public @method is_file_previewable + * @param {File} file - The file to check whether CustUp can preview it + * @returns {boolean} */ - protected addFileToUI(file: File, isUploadable?: boolean): void; - file_display_width_setter(el: any): void; + public is_file_previewable(file: File): boolean; /** - * @protected makeFileDisplayElement + * @protected @method file_display_width_setter + * @param {HTMLElement} el - The file display width setter only for default UI type + */ + protected file_display_width_setter(el: HTMLElement): void; + /** + * @protected @method makeFileDisplayElement * @param {File} file - file data of the file to display * @param {HTMLDivElement} fileContainer * @param {ArrayBuffer} fileBase64 - optional to be provided only for image files */ protected makeFileDisplayElement(file: File, fileContainer: HTMLDivElement, fileBase64: ArrayBuffer): void; /** - * @protected makeFilePreviewer + * @protected @method makeFilePreviewer * @param {File} file - File object of the element to be previewed */ protected makeFilePreviewer(file: File): void; /** - * @protected getFileIcon + * @protected @method getFileIcon * @param {string} file_type - the full file type of the file to return its icons * @returns {SVGElement} */ protected getFileIcon(file_type: string): SVGElement; /** - * @protected handleRemoveFile + * @protected @method handleRemoveFile * @param {File} fileData * @param {Function} callback_fn */ protected handleRemoveFile(fileData: File, callback_fn?: Function): void; /** * Removes unwanted characters from file name - * @protected cleanFileName + * @protected @method cleanFileName * @param {string} file_name - the file name to remove unwanted characters from * @returns {string} */ @@ -1955,27 +2020,30 @@ export default class CustUpCore { */ protected get_unique_uuid(): string; /** - * @protected clipFileNameIfShouldClip + * @protected @method clipFileNameIfShouldClip * @param {string} file_name * @returns {string} */ protected clipFileNameIfShouldClip(file_name: string): string; /** - /// Postponed - * @protected changeFileElementPosition + * /// Postponed + * @protected @method changeFileElementPosition + * @param {Event} e */ - protected changeFileElementPosition(e: any): void; + protected changeFileElementPosition(e: Event): void; /** - * @protected handleFileUIDragOver + * @protected @method handleFileUIDragOver + * @param {Event} e */ - protected handleFileUIDragOver(e: any): void; + protected handleFileUIDragOver(e: Event): void; /** - * @protected handleFileUIDragOver + * @protected @method handleFileUIDragOver + * @param {Event} e */ - protected handleFileUIDropped(e: any): void; + protected handleFileUIDropped(e: Event): void; /** * - * @private set_class_name + * @private @method set_class_name * * @param style_key_name string the name of the style * @param element_to_style HTMLElement @@ -1984,51 +2052,52 @@ export default class CustUpCore { */ private set_class_name; /** - * @private get_element_class_name + * @private @method get_element_class_name * @param {string} style_key_name * @returns {string} */ private get_element_class_name; /** - * @protected select_file_from_device - * @param {MouseEvent} e + * @protected @method _select_file_from_device + * @param {MouseEvent | TouchEvent} e */ - protected select_file_from_device(e: MouseEvent): void; + protected _select_file_from_device(e: MouseEvent | TouchEvent): void; /** - * @protected handle_drag_over - * @param {Event} e + * @protected @method handle_drag_over + * @param {DragEvent} e */ - protected handle_drag_over(e: Event): void; + protected handle_drag_over(e: DragEvent): void; /** - * @protected handle_drag_leave - * @param {EventListener} e + * @protected @method handle_drag_leave + * @param {DragEvent} e */ - protected handle_drag_leave(e: EventListener): void; + protected handle_drag_leave(e: DragEvent): void; /** - * @protected show_message + * @protected @method show_message * @param {string} msg * @param {"error" | "success" | "info"} type + * @param {boolean} async - for async messages that doesn't hide until the request is done + * @param {number} timeout - timeout for hiding the message */ - protected show_message(msg: string, type: "error" | "success" | "info"): void; + protected show_message(msg: string, type: "error" | "success" | "info", async?: boolean, timeout?: number): (() => void) | undefined; /** - * @protected message_element_exit_call + * @protected @method message_element_exit_call * This method is executed when a message element is exiting * @param {HTMLElement} message_container - * @param {boolean} no_wait - specifies if the exit call should be ran inside a setTimeout or not */ - protected message_element_exit_call(message_container: HTMLElement, no_wait?: boolean): void; + protected message_element_exit_call(message_container: HTMLElement): void; /** - * @protected handle_file_drop + * @protected @method handle_file_drop * @param {Event} e */ protected handle_file_drop(e: Event): void; /** - * @property isfileAreadyAdded + * @property @method isfileAreadyAdded * @param {File} file */ isfileAreadyAdded(file: File): boolean; /** - * @protected parseFileSize + * @protected @method parseFileSize * @param {number} size */ protected parseFileSize: (size: number) => string; @@ -2038,59 +2107,71 @@ export default class CustUpCore { */ private isFileTypeInAcceptedTypes; /** - * @protected handle_selected_files + * @protected @method handle_selected_files * @param {Array} files + * @param {Function | null} before_add_callback_fn + * @param {boolean} isUploadable + * @param {number | null} index */ - protected handle_selected_files(files: Array, before_add_callback_fn?: null, isUploadable?: boolean): void; + protected handle_selected_files(files: Array, before_add_callback_fn?: Function | null, isUploadable?: boolean, index?: number | null): void; /** - * @protected createFileUploadOverlay + * @protected @method createFileUploadOverlay * @param {string} file_id - id of the file to add file upload overlay to * @returns {HTMLDivElement} */ protected createFileUploadOverlay(file_id: string): HTMLDivElement; /** - * @protected createRetryUploadOverlay + * @protected @method createRetryUploadOverlay * @param {File} file * @param {string} file_id - id of the file element to append the retry upload overlay to */ protected createRetryUploadOverlay(file: File, file_id: string): void; - isUploadConditionsSatisfied(): boolean; /** - * @protected handleUploadFile + * @protected @method isUploadConditionsSatisfied + * @returns {boolean} + */ + protected isUploadConditionsSatisfied(): boolean; + /** + * @protected @method handleUploadFile * @param {File} file - the file to be uploaded */ protected handleUploadFile(file?: File): void; - handleUploadAllFiles(): Promise; /** - * @protected fileUploadHandler + * @private @method handleUploadAllFiles + * @returns {Promise} + */ + private handleUploadAllFiles; + /** + * @protected @method fileUploadHandler * @param {File} file - the file to be uploaded */ protected fileUploadHandler(file?: File): void; /** - * @protected handleRetryFileUpload + * @protected @method handleRetryFileUpload * @param {File} file - Blob of the file to retry * @param {HTMLDivElement} retry_upload_overlay_ui - html element of the retry upload overlay */ protected handleRetryFileUpload(file: File, retry_upload_overlay_ui: HTMLDivElement): void; /** - * @protected configure_axios + * @protected @method configure_axios */ protected configure_axios(): void; /** - * @private handleUploadFileToEndpoint + * @private @method handleUploadFileToEndpoint * @param {File} file - file to upload to the server * @param {HTMLDivElement} upload_element - html element containing elements to display upload data and status + * @param {boolean} chunking */ private handleUploadFileToEndpoint; /** - * @private removeFileUploadOverlay + * @private @method removeFileUploadOverlay * @param {HTMLDivElement} upload_element - html element of the overlay element * @param {HTMLDivElement} fileContainer - html element of the of the file container * @param {boolean} isSuccessful - boolean to specify if the request was successful or not */ private removeFileUploadOverlay; /** - * @protected handleUploadProgressEvent + * @protected @method handleUploadProgressEvent * @param {ProgressEvent} event - upload progress event * @param {HTMLDivElement} upload_element - HTML element to display the file upload status */ @@ -2124,11 +2205,15 @@ export default class CustUpCore { * 'upload.progress' | * 'upload.success' | * 'upload.error' | - * 'upload.retry' + * 'upload.retry' | + * 'upload.all_finished' | + * 'file_source.closed' | + * 'default_ui.shown' | + * 'default_ui.closed' * } event - event name - * @param {*} callbackFn - the callback function + * @param {Function} callbackFn - the callback function */ - on(event: 'file.beforeAdded' | 'library.init' | 'file.afterAdded' | 'file.beforePassedChecks' | 'file.removed' | 'file.defaultFileRemoved' | 'file.all_removed' | 'video.recordingStarted' | 'video.recording' | 'video.recordStop' | 'video.recordSaved' | 'video.recordCancel' | 'image.captured' | 'audio.recordingStarted' | 'audio.recording' | 'audio.recordStop' | 'audio.recordSaved' | 'audio.recordCancel' | 'screen.recordingStarted' | 'screen.recording' | 'screen.recordStop' | 'screen.recordSaved' | 'screen.recordCancel' | 'upload.beforeStart' | 'upload.progress' | 'upload.success' | 'upload.error' | 'upload.retry', callbackFn: any): void; + on(event: 'file.beforeAdded' | 'library.init' | 'file.afterAdded' | 'file.beforePassedChecks' | 'file.removed' | 'file.defaultFileRemoved' | 'file.all_removed' | 'video.recordingStarted' | 'video.recording' | 'video.recordStop' | 'video.recordSaved' | 'video.recordCancel' | 'image.captured' | 'audio.recordingStarted' | 'audio.recording' | 'audio.recordStop' | 'audio.recordSaved' | 'audio.recordCancel' | 'screen.recordingStarted' | 'screen.recording' | 'screen.recordStop' | 'screen.recordSaved' | 'screen.recordCancel' | 'upload.beforeStart' | 'upload.progress' | 'upload.success' | 'upload.error' | 'upload.retry' | 'upload.all_finished' | 'file_source.closed' | 'default_ui.shown' | 'default_ui.closed', callbackFn: Function): void; /** * @method upload - the method to upload file to the endpoint * @param {string | undefined} file_id - the id of the file to upload in the case of a single file, all the files will be uploaded serially if not provided @@ -2152,6 +2237,10 @@ export default class CustUpCore { * @method get_selected_files - return all the selected files */ get_selected_files(): any[]; + /** + * @method get_default_files - return all the default files + */ + get_default_files(): any[]; /** * @method get_all_files - return all the selected files */ @@ -2198,8 +2287,11 @@ export default class CustUpCore { remove_file(file_id: string, callback_fn: Function): void; /** * @method add_file - add a file to the UI + * @param {File} file + * @param {boolean} [skip_file_check=false] + * @param {number | null} [index=null] */ - add_file(file: any, skip_file_check?: boolean): void; + add_file(file: File, skip_file_check?: boolean | undefined, index?: number | null | undefined): void; /** * @method record_video - launch the video recording UI */ @@ -2232,6 +2324,35 @@ export default class CustUpCore { * @method launch_dalle_source - launch the OpenAI Dall.E file source UI */ launch_dalle_source(): void; + /** + * @method clear_persisted_files + */ + clear_persisted_files(): void; + /** + * @method select_file_from_device + */ + select_file_from_device(): void; + /** + * @method close_file_source_popup + */ + close_file_source_popup(): void; + /** + * @method get_file_sources - Returns all the allowed file sources icons wrapped in HTML element + * @param {HTMLElement | null} iconsContainer - An HTML element to automatically append the icons to + * @param {Function | null} allElOnClick - A callback function to be attached to the onClick event of every icons + * @param {Object | {}} additionalElOnClickEv - An object containing the function to be attached to the onClick event of the specified icons + * @returns {Array} + */ + get_file_sources(iconsContainer?: HTMLElement | null, allElOnClick?: Function | null, additionalElOnClickEv?: Object | {}): Array; + /** + * @public @method display_message - display pop up message + * @param {string} msg - The message to be displayed + * @param {"error" | "success" | "info"} type - The message type + * @param {boolean} async - for async messages that doesn't hide until the request is done + * @param {number} timeout - timeout for hiding the message + * @returns {Function | void} + */ + public display_message(msg: string, type: "error" | "success" | "info", async?: boolean, timeout?: number): Function | void; } import { external_sources_ui_styles } from "../utils/_styles.js"; import { media_capture_ui_styles } from "../utils/_styles.js"; diff --git a/core/custupCore.d.ts.map b/core/custupCore.d.ts.map index 7ade856..319b6d9 100644 --- a/core/custupCore.d.ts.map +++ b/core/custupCore.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"custupCore.d.ts","sourceRoot":"","sources":["custupCore.js"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"custupCore.d.ts","sourceRoot":"","sources":["custupCore.js"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/core/custupCore.js b/core/custupCore.js index b7fe103..db5b13b 100644 --- a/core/custupCore.js +++ b/core/custupCore.js @@ -16,13 +16,13 @@ export default class CustUpCore { /** * Array that holds default loaded files - * @public @property {File[]} defaultFiles + * @protected @property {File[]} defaultFiles */ defaultFiles = []; /** * Array that holds all selected files - * @public @property {File[]} selectedFiles + * @protected @property {File[]} selectedFiles */ selectedFiles = []; @@ -37,6 +37,12 @@ export default class CustUpCore { * @protected @property {File[]} successfullyUploadedFiles */ successfullyUploadedFiles = []; + + /** + * An array that holds successfully uploaded files + * @protected @property {File[]} currentlyUploadingFiles + */ + currentlyUploadingFiles = []; /** * UI messages items offset counter @@ -68,6 +74,32 @@ export default class CustUpCore { */ __axios_instance = undefined; + /** + * @private @property {Object} file_chunks + */ + file_chunks = {} + + /** + * @private @property {Object} file_progress + */ + file_progress = {} + + /** + * @private @property {any} _custup_media_source_instance + */ + _custup_media_source_instance = undefined + + + /** + * @private @property {any} _custup_external_source_instance + */ + _custup_external_source_instance = undefined + + /** + * @private @property {any} _is_secured_context + */ + _is_secured_context = window.location.protocol === 'https:' + /** * Events * @private @property {any} eventMethods @@ -85,6 +117,10 @@ export default class CustUpCore { upload_success: undefined, upload_error: undefined, upload_retry: undefined, + upload_all_finished: undefined, + file_source_closed: undefined, + default_ui_shown: undefined, + default_ui_closed: undefined, }; /** @@ -130,8 +166,15 @@ export default class CustUpCore { addFilesUITool = undefined; // tool that opens the default UI to add more files uploadFilesToServerTool = undefined; // the tool that calls the method that uploads all selected file to the server close_popup_btn = undefined; // Custup close popup btn + + /** + * @private @property {Array} file_preview_animation_arr + */ file_preview_animation_arr = []; // Custup close popup btn + /** + * @private @property {Object} previewerAnimations + */ // file preview animations previewerAnimations = { slideInLeft: [ @@ -163,21 +206,42 @@ export default class CustUpCore { // tool dragger toolDragger = undefined; // the tool for dragging the UI tool on the UI + + /** + * @private @property {number} currentToolElOffsetLeft + */ currentToolElOffsetLeft = 0; + + /** + * @private @property {number} currentToolElOffsetBottom + */ currentToolElOffsetBottom = 0; + + /** + * @private @property {number} lastToolOffsetBottom + */ lastToolOffsetBottom = 0; + + /** + * @private @property {number} lastToolOffsetLeft + */ lastToolOffsetLeft = 0; // Custom Scrolling + /** + * @private @property {number} fileDisplayUIElCurrentScrollHeight + */ fileDisplayUIElCurrentScrollHeight = 0; // scolling position tracker + + /** + * @public @property {number} scrollBarEl + */ scrollBarEl = undefined; // custom scroll bar /** Custup Options * @protected @param {{}} options - * */ - options = { // Core Options autoInitialize: true, @@ -226,6 +290,7 @@ export default class CustUpCore { }, allowed_sources: [], + display_file_sources: true, // Upload source config file_source_config: { @@ -317,10 +382,13 @@ export default class CustUpCore { axios_settings: { headers: {}, configs: {} - } + }, + chunk_size: 1024 * 1024, + should_chunk: false }, upload_automatically: false, // whether to upload file to the server automatically show_upload_error_overlay: true, + show_upload_progress_bar: true, // Default files File | Blob | link | base64 default_files: [], @@ -334,7 +402,11 @@ export default class CustUpCore { persist_type: 'soft', // notification - alert_timeout_time: 300 + alert_timeout_time: 300, + + messages: { + timeout: 4000 + } } @@ -383,10 +455,14 @@ export default class CustUpCore { * headers: {}; * configs: {}; * }; + * chunk_size: number; + * should_chunk: boolean; * }; * allowed_sources: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + * display_file_sources: boolean; * upload_automatically?: boolean; * show_upload_error_overlay?: boolean; + * show_upload_progress_bar?: boolean; * file_source_config: { * video_recording: { * video_only: boolean; @@ -459,6 +535,9 @@ export default class CustUpCore { * persist_files: boolean; * persist_type: 'soft' | 'hard'; * alert_timeout_time: number; + * messages: { + * timeout: number; + * }; * }} * * @param autoInitialize - Whether to automatically initialize the library @@ -563,8 +642,10 @@ export default class CustUpCore { file_upload, upload_automatically, show_upload_error_overlay, + show_upload_progress_bar, file_source_icons, allowed_sources, + display_file_sources, display_ui_tools, show_ui_tools_on_mobile_devices, disable_drag_n_drop, @@ -583,7 +664,8 @@ export default class CustUpCore { persist_files, persist_type, - alert_timeout_time + alert_timeout_time, + messages }) { if (targetRootElement == undefined) { @@ -609,6 +691,7 @@ export default class CustUpCore { upload_automatically !== undefined && (this.options.upload_automatically = upload_automatically); show_upload_error_overlay !== undefined && (this.options.show_upload_error_overlay = show_upload_error_overlay); + show_upload_progress_bar !== undefined && (this.options.show_upload_progress_bar = show_upload_progress_bar); _custupDefaultUploadSentence !== undefined && (this.options._custupDefaultUploadSentence = _custupDefaultUploadSentence); @@ -650,6 +733,7 @@ export default class CustUpCore { use_default_file_display_ui !== undefined && (this.options.use_default_file_display_ui = use_default_file_display_ui); allowed_sources !== undefined && (this.options.allowed_sources = allowed_sources); + display_file_sources !== undefined && (this.options.display_file_sources = display_file_sources); allowed_tools !== undefined && (this.options.allowed_tools = allowed_tools); file_preview_animation_types !== undefined && (this.options.file_preview_animation_types = file_preview_animation_types); @@ -677,6 +761,8 @@ export default class CustUpCore { this.options.file_upload_settings.files_field_name = file_upload?.files_field_name; this.options.file_upload_settings.endpoint_url = file_upload?.endpoint_url; this.options.file_upload_settings.additional_data = file_upload?.additional_data; + file_upload?.chunk_size !== undefined && (this.options.file_upload_settings.chunk_size = file_upload?.chunk_size); + file_upload?.should_chunk !== undefined && (this.options.file_upload_settings.should_chunk = file_upload?.should_chunk); this.options.file_upload_settings.form_field = (typeof file_upload?.form_field == "string" && file_upload?.form_field != '') ? document.querySelector(file_upload?.form_field) : file_upload?.form_field; this.options.file_upload_settings.form_field = this.options.file_upload_settings.form_field == '' ? undefined : this.options.file_upload_settings.form_field; @@ -690,6 +776,15 @@ export default class CustUpCore { } } } + + if (messages !== undefined && Object.keys(messages).length > 0) { + for (const key in messages) { + if (Object.hasOwnProperty.call(messages, key)) { + const value = messages[key]; + this.options.messages[key] = value + } + } + } // this.map_override_styles_to_default_styles() - removed in the favour of the main child class this.map_override_icons_to_default_icons() @@ -735,6 +830,10 @@ export default class CustUpCore { document.head.append(font_link) } + /** + * @protected @method map_override_styles_to_default_styles - maps the provided styles to the default styles + * @param {Object} o_style - The style to map to the default styles + */ map_override_styles_to_default_styles (o_style) { if (this.options.persist_styles_override_across_instances == true) { this.ui_styles = ui_styles // override cloning to the object itself @@ -753,6 +852,9 @@ export default class CustUpCore { } + /** + * @protected @method map_override_icons_to_default_icons - Maps the provided icons to the current icons + */ map_override_icons_to_default_icons () { for (const key in this.options.default_icons_override) { if (Object.hasOwnProperty.call(this.options.default_icons_override, key)) { @@ -762,6 +864,9 @@ export default class CustUpCore { } } + /** + * @protected @method load_default_files - Loads default files + */ load_default_files () { const URLFilesArr = [] this.options.default_files.map(file_obj => { @@ -790,25 +895,30 @@ export default class CustUpCore { */ async update_file_storage () { const _regexp = /[^\w\d]/g - const session_name = this.options.targetRootElement.replace(_regexp, '') - const storage_type = this.options.persist_type == 'soft' ? sessionStorage : localStorage - const sess_files = [] + const session_name = this.options.targetRootElement.replace(_regexp, ''); + const storage_type = this.options.persist_type == 'soft' ? window.sessionStorage : window.localStorage; + const sess_files = []; let counter = 0; - this.selectedFiles.reverse() - this.selectedFiles.map(file => { - const reader = new FileReader(); - - reader.onload = (event) => { - const b64 = event.target.result; - sess_files.push({file: b64, name: file.name, id: file.id}) - counter += 1 - if (counter == this.selectedFiles.length) { - storage_type.setItem(session_name, JSON.stringify(sess_files)) - } - }; + const selected_files_clone = [...this.selectedFiles]; + if (this._is_secured_context) { + const objURLs = selected_files_clone.map(file => ({file: URL.createObjectURL(file), name: file.name, id: file.id})) + storage_type.setItem(session_name, JSON.stringify(objURLs)); + }else{ + selected_files_clone.map(file => { + const reader = new FileReader(); + + reader.onload = (event) => { + const b64 = event.target.result; + sess_files.push({file: b64, name: file.name, id: file.id}) + counter += 1 + if (counter == selected_files_clone.length) { + storage_type.setItem(session_name, JSON.stringify(sess_files)) + } + }; - reader.readAsDataURL(file); - }) + reader.readAsDataURL(file); + }) + } } @@ -842,8 +952,8 @@ export default class CustUpCore { const session_name = this.options.targetRootElement.replace(_regexp, ''); const storage_type = this.options.persist_type == 'soft' ? sessionStorage : localStorage const sess_files_out = JSON.parse(storage_type.getItem(session_name) || '[]'); - const filter_files = sess_files_out.filter(file => file.id != file_id) - this.update_file_storage(filter_files) + const filter_files = sess_files_out.filter(file => file.id != file_id); + this.options.persist_files && this.update_file_storage(filter_files); } /** @@ -859,7 +969,6 @@ export default class CustUpCore { /** * @public initializeUI */ - initializeUI () { const targetEl = document.querySelector(this.options.targetRootElement); if (targetEl == null) { @@ -940,6 +1049,7 @@ export default class CustUpCore { */ showDefaultUI (after_container_init = false) { + if (this._custupDefaultUIEl != undefined) return; this._custupDefaultUIEl = document.createElement('div') this._custupDefaultUIInnerContentEl = document.createElement('div') const defaultUIUploadSentenceContainer = document.createElement('div') @@ -953,79 +1063,9 @@ export default class CustUpCore { iconsContainer.append(cancelIcon) } - const file_sources_arr = { - record_video: () => { - const recordVideoIcon = document.createElement('div') - recordVideoIcon.innerHTML = this.options.file_source_icons.video_camera - recordVideoIcon.title = `Record Video` - recordVideoIcon.onclick = (e) => {e.stopPropagation(); this.handleMediaSource('video')} - iconsContainer.append(recordVideoIcon) - }, - capture_image: () => { - const captureImageIcon = document.createElement('div') - captureImageIcon.innerHTML = this.options.file_source_icons.capture_image - captureImageIcon.title = `Capture Image` - captureImageIcon.onclick = (e) => {e.stopPropagation(); this.handleMediaSource('image')} - iconsContainer.append(captureImageIcon) - }, - record_audio: () => { - const recordAudioIcon = document.createElement('div') - recordAudioIcon.innerHTML = this.options.file_source_icons.record_audio - recordAudioIcon.title = `Record Audio` - recordAudioIcon.onclick = (e) => {e.stopPropagation(); this.handleMediaSource('audio')} - iconsContainer.append(recordAudioIcon) - }, - record_screen: () => { - const recordScreenIcon = document.createElement('div') - recordScreenIcon.innerHTML = this.options.file_source_icons.record_screen - recordScreenIcon.title = `Record Screen` - recordScreenIcon.onclick = (e) => {e.stopPropagation(); this.handleMediaSource('screen')} - iconsContainer.append(recordScreenIcon) - }, - link_source: () => { - const linkSourceIcon = document.createElement('div') - linkSourceIcon.innerHTML = this.options.file_source_icons.url_source - linkSourceIcon.title = `Link` - linkSourceIcon.onclick = (e) => {e.stopPropagation(); this.handleExternalSource("url")} - iconsContainer.append(linkSourceIcon) - }, - google_drive_source: () => { - const googleDriveSourceIcon = document.createElement('div') - googleDriveSourceIcon.innerHTML = this.options.file_source_icons.google_drive_source - googleDriveSourceIcon.title = `Google Drive` - googleDriveSourceIcon.onclick = (e) => {e.stopPropagation(); this.handleExternalSource('google_drive')} - iconsContainer.append(googleDriveSourceIcon) - }, - dropbox_source: () => { - const dropboxSourceIcon = document.createElement('div') - dropboxSourceIcon.innerHTML = this.options.file_source_icons.dropbox_source - dropboxSourceIcon.title = `Dropbox` - dropboxSourceIcon.onclick = (e) => {e.stopPropagation(); this.handleExternalSource('dropbox')} - iconsContainer.append(dropboxSourceIcon) - }, - box_source: () => { - const boxSourceIcon = document.createElement('div') - boxSourceIcon.innerHTML = this.options.file_source_icons.box_source - boxSourceIcon.title = `Box` - boxSourceIcon.onclick = (e) => {e.stopPropagation(); this.handleExternalSource('box')} - iconsContainer.append(boxSourceIcon) - }, - openai_dalle_source: () => { - const openAIDALLESourceIcon = document.createElement('div') - openAIDALLESourceIcon.innerHTML = this.options.file_source_icons.openai_dalle_source - openAIDALLESourceIcon.title = `DALL.E-2` - openAIDALLESourceIcon.onclick = (e) => {e.stopPropagation(); this.handleExternalSource('dalle')} - iconsContainer.append(openAIDALLESourceIcon) - } - } + + this.options.display_file_sources && this.get_file_sources(iconsContainer); - if (this.options.allowed_sources !== null && this.options.allowed_sources.length == 0) { - Object.keys(file_sources_arr).forEach(key => file_sources_arr[key]()) - }else{ - if (this.options.allowed_sources !== null && Array.isArray(this.options.allowed_sources)) { - this.options.allowed_sources.map(source => file_sources_arr[source]()) - } - } // Onedrive external source --- suspended // const oneDriveSourceIcon = document.createElement('div') @@ -1044,21 +1084,25 @@ export default class CustUpCore { this.set_class_name('defaultUIUploadSentenceContainer', defaultUIUploadSentenceContainer); this.set_class_name('defaultUIUploadIconsContainer', iconsContainer); this._custupInnerEl.append(this._custupDefaultUIEl); - !this.options.disable_select_files_from_device && (this._custupDefaultUIEl.onclick = (e) => this.select_file_from_device(e)); + !this.options.disable_select_files_from_device && (this._custupDefaultUIEl.onclick = (e) => this._select_file_from_device(e)); + this.eventMethods.default_ui_shown && this.eventMethods.default_ui_shown(); } /** * @protected removeDefaultUI */ - removeDefaultUI () { if (this._custupDefaultUIEl != undefined && !this.options.persist_default_ui) { - this._custupDefaultUIEl.remove() - this._custupDefaultUIEl = undefined + this._custupDefaultUIEl.remove(); + this._custupDefaultUIEl = undefined; + this.eventMethods.default_ui_closed && this.eventMethods.default_ui_closed(); } } + /** + * @protected @method set_file_preview_animations + */ set_file_preview_animations () { if (this.options.file_preview_animation_types !== null && this.options.file_preview_animation_types.length == 0) { Object.keys(this.previewerAnimations).forEach(key => this.file_preview_animation_arr.push(this.previewerAnimations[key])); @@ -1070,7 +1114,7 @@ export default class CustUpCore { } /** - * @public @method handleRecordVideo + * @protected @method handleRecordVideo * @param {'video' | 'image' | 'audio' | 'screen'} type */ handleMediaSource (type) { @@ -1084,18 +1128,27 @@ export default class CustUpCore { const media_callback = (file) => { _class.handle_selected_files([file]) } - new CustUpMediaSource({ + + const handleClose = () => { + _class.eventMethods.file_source_closed && this.eventMethods.file_source_closed(); + } + + this._custup_external_source_instance?.destroyContainerUI(true); + this._custup_media_source_instance?.closeMediaPopup(true); // destroy CustUpMediaSource instance if already exists + + this._custup_media_source_instance = new CustUpMediaSource({ inner_container: this._custupInnerEl, media_type: type, callbackFn: media_callback, + onclose: handleClose, config: config[type], eventMethods: this.deviceFileSourceEventMethods, ui_styles: this.options.media_capture_source_style_override - }) + }); } /** - * @public @method handleOpenaiDALLESource + * @protected @method handleOpenaiDALLESource * @param {'url' | 'onedrive' | 'google_drive' | 'clipboard' | 'box' | 'dalle' | 'dropbox'} type - source type */ handleExternalSource (type) { @@ -1110,8 +1163,8 @@ export default class CustUpCore { const media_callback = (file) => { _class.handle_selected_files([file]) } - const show_message_ui = (msg, type) => { - _class.show_message(msg, type) + const show_message_ui = (msg, type, async) => { + return _class.show_message(msg, type, async) } const customScroll = (e, targetEl) => { const targetElScrollBarEl = targetEl.parentElement.querySelector(`div[class*='scroll_bar']`) @@ -1122,7 +1175,8 @@ export default class CustUpCore { } const handleOnClose = () => { _class._custupInnerEl.onwheel = (e) => _class.handleCustomScroll(e) - _class.set_scroll_pointer_event(this._custupInnerEl) + _class.set_scroll_pointer_event(this._custupInnerEl); + _class.eventMethods.file_source_closed && this.eventMethods.file_source_closed(); } const handleSetPointerEV = (el, targetEl) => { const targetElScrollBarEl = targetEl.parentElement.querySelector(`div[class*='scroll_bar']`) @@ -1134,8 +1188,10 @@ export default class CustUpCore { const sType = {} sType[type] = config[type] + + this._custup_media_source_instance?.closeMediaPopup(true) - new ExternalSource({ + this._custup_external_source_instance = new ExternalSource({ inner_container: this._custupInnerEl, source_type: type, callbackFn: media_callback, @@ -1152,18 +1208,19 @@ export default class CustUpCore { /** - * @protected makeFileDisplayUI + * @protected @method makeFileDisplayUI */ - makeFileDisplayUI () { if (this.fileDisplayUIEl !== undefined || !this.options.use_default_file_display_ui) return + // if (this.fileDisplayUIEl !== undefined) return this.fileDisplayUIEl = document.createElement('div') this.set_class_name("fileDisplayUI", this.fileDisplayUIEl); this.make_ui_tools(); !this.options.disable_scrollbar && this.createScrollBar(); this._custupInnerContainerWrapperEl.append(this.fileDisplayUIEl); this._custupInnerEl.onwheel = (e) => this.handleCustomScroll(e); - this._custupInnerEl.onpointerdown = (e) => this.handleInnerElementContainerMouseDown(e); + // removed because tool dragging is no more available on touch devices, the tool on + // this._custupInnerEl.onpointerdown = (e) => this.handleInnerElementContainerPointerDown(e); this.set_scroll_pointer_event(this._custupInnerEl); } @@ -1171,7 +1228,6 @@ export default class CustUpCore { * @protected @method set_scroll_pointer_event * @param {HTMLElement} el */ - set_scroll_pointer_event (el, targetEl=undefined, targetScrollBarEl=undefined) { el.ontouchstart = (e) => { e.stopPropagation(); @@ -1188,7 +1244,7 @@ export default class CustUpCore { } /** - * @protected make_ui_tools + * @protected @method make_ui_tools */ make_ui_tools () { this.UIToolEl = document.createElement('div') @@ -1252,7 +1308,7 @@ export default class CustUpCore { } /** - * @protected handleAddNewFileButton + * @protected @method handleAddNewFileButton */ handleAddNewFileButton () { if (this.options.maxNumberOfFiles != undefined && this._get_total_file_count() == this.options.maxNumberOfFiles) return this.show_message("Maximum number of allowed files reached", 'info') @@ -1300,6 +1356,11 @@ export default class CustUpCore { } } + /** + * @protected @method createScrollBar + * @param {HTMLElement | undefined} targetEl - The scrollbar parent container + * @returns {HTMLElement} + */ createScrollBar (targetEl=undefined) { const custupCustomScrollBar = document.createElement("div") this.set_class_name("scrollBarEl", custupCustomScrollBar) @@ -1313,6 +1374,10 @@ export default class CustUpCore { return custupCustomScrollBar; } + /** + * @protected @method updateScrollbarHeight + * @param {HTMLElement} targetEl - The scrollbar parent container + */ updateScrollbarHeight (targetEl=undefined) { setTimeout(() => { const targetScrollbarEl = targetEl ? targetEl.parentElement.querySelector(`.${this.get_element_class_name("scrollBarEl")}`) : this.scrollBarEl @@ -1323,9 +1388,11 @@ export default class CustUpCore { } /** - * @protected handleCustomScroll + * @protected @method handleCustomScroll + * @param {Event} e - Mouse wheel event or touch event for touch devices + * @param {HTMLElement | undefined} targetEl - The scrolling container parent container + * @param {HTMLElement | undefined} targetScrollBarEl - The main scroll bar element */ - handleCustomScroll (e, targetEl=undefined, targetScrollBarEl=undefined) { e.preventDefault(); e.stopPropagation(); @@ -1352,9 +1419,11 @@ export default class CustUpCore { } /** - * @protected handleInnerElementContainerMouseDown + * removed because tool dragging has been removed for touch devices, + * the upload tool on bigger screens has been changed to a static tool which is displayed inside the header on mobile devices + * @deprecated @protected @method handleInnerElementContainerPointerDown */ - handleInnerElementContainerMouseDown (e) { + handleInnerElementContainerPointerDown (e) { e.preventDefault(); e.stopPropagation(); this.lastToolOffsetBottom = e.clientY @@ -1372,7 +1441,7 @@ export default class CustUpCore { } /** - * @protected handleInnerElementContainerMouseUp + * @protected @method handleInnerElementContainerMouseUp */ handleInnerElementContainerMouseUp (e) { this._custupInnerEl.onmousemove = null @@ -1380,7 +1449,7 @@ export default class CustUpCore { } /** - * @protected handleToolDraggerMouseMove + * @protected @method handleToolDraggerMouseMove */ handleToolDraggerMouseMove (e) { e.preventDefault(); @@ -1409,11 +1478,12 @@ export default class CustUpCore { } /** - * @protected addFileToUI + * @protected @method addFileToUI * @param {File} file * @param {boolean} isUploadable + * @param {number | null} index */ - addFileToUI (file, isUploadable=true) { + addFileToUI (file, isUploadable=true, index=null) { const _class = this file.id = _class.get_unique_uuid() if (_class.fileDisplayUIEl == undefined) { @@ -1433,7 +1503,7 @@ export default class CustUpCore { } })(); - isUploadable && this.selectedFiles.push(file); + isUploadable && (index !== null ? this.selectedFiles.splice(index, 0, file) : this.selectedFiles.push(file)); file.isDefaultFile && this.defaultFiles.push(file); const fileUIContainer = document.createElement('div') @@ -1484,8 +1554,7 @@ export default class CustUpCore { // fileUIBottomToolsContainer.append(fileBottomIconEdit) --- suspended fileBottomDetails.append(fileSize) - const file_main_type = file.type.split('/')[0].toLowerCase() - if (file_main_type == 'image' || file_main_type == 'video' || file_main_type == 'audio') { + if (this.is_file_previewable(file)) { fileBottomIconView.onclick = (e) => this.makeFilePreviewer(file) fileBottomDetails.append(fileUIBottomToolsContainer) } @@ -1494,7 +1563,7 @@ export default class CustUpCore { fileDetailsContainer.append(fileBottomDetails) fileUI.style.userSelect = "none"; - fileUI.draggable = false; + fileUIContainer.draggable = true; fileUIContainer.append(fileUI); this.options.show_file_details_container && fileUIContainer.append(fileDetailsContainer); @@ -1512,10 +1581,23 @@ export default class CustUpCore { (!this.options.disable_scrollbar && this.options.use_default_file_display_ui) && this.updateScrollbarHeight(); - (this.options.upload_automatically && isUploadable) && _class.handleUploadFile(file); + ((this.options.upload_automatically && isUploadable) || this.currentlyUploadingFiles.length > 0) && _class.handleUploadFile(file); this.options.persist_files && this.update_file_storage(); } + /** + * @public @method is_file_previewable + * @param {File} file - The file to check whether CustUp can preview it + * @returns {boolean} + */ + is_file_previewable (file) { + return ['image', 'video', 'audio'].includes(file.type.split('/')[0].toLowerCase()); + } + + /** + * @protected @method file_display_width_setter + * @param {HTMLElement} el - The file display width setter only for default UI type + */ file_display_width_setter (el) { const custupElWidth = this._custupEl.clientWidth; if (custupElWidth >= 1400) { @@ -1537,7 +1619,7 @@ export default class CustUpCore { } /** - * @protected makeFileDisplayElement + * @protected @method makeFileDisplayElement * @param {File} file - file data of the file to display * @param {HTMLDivElement} fileContainer * @param {ArrayBuffer} fileBase64 - optional to be provided only for image files @@ -1562,7 +1644,7 @@ export default class CustUpCore { } /** - * @protected makeFilePreviewer + * @protected @method makeFilePreviewer * @param {File} file - File object of the element to be previewed */ makeFilePreviewer (file) { @@ -1622,7 +1704,7 @@ export default class CustUpCore { } /** - * @protected getFileIcon + * @protected @method getFileIcon * @param {string} file_type - the full file type of the file to return its icons * @returns {SVGElement} */ @@ -1680,7 +1762,7 @@ export default class CustUpCore { } /** - * @protected handleRemoveFile + * @protected @method handleRemoveFile * @param {File} fileData * @param {Function} callback_fn */ @@ -1713,7 +1795,7 @@ export default class CustUpCore { /** * Removes unwanted characters from file name - * @protected cleanFileName + * @protected @method cleanFileName * @param {string} file_name - the file name to remove unwanted characters from * @returns {string} */ @@ -1731,7 +1813,7 @@ export default class CustUpCore { } /** - * @protected clipFileNameIfShouldClip + * @protected @method clipFileNameIfShouldClip * @param {string} file_name * @returns {string} */ @@ -1745,8 +1827,9 @@ export default class CustUpCore { /** - /// Postponed - * @protected changeFileElementPosition + * /// Postponed + * @protected @method changeFileElementPosition + * @param {Event} e */ changeFileElementPosition (e) { // e.preventDefault() @@ -1756,7 +1839,8 @@ export default class CustUpCore { } /** - * @protected handleFileUIDragOver + * @protected @method handleFileUIDragOver + * @param {Event} e */ handleFileUIDragOver (e) { e.preventDefault() @@ -1765,7 +1849,8 @@ export default class CustUpCore { } /** - * @protected handleFileUIDragOver + * @protected @method handleFileUIDragOver + * @param {Event} e */ handleFileUIDropped (e) { e.preventDefault() @@ -1774,7 +1859,7 @@ export default class CustUpCore { /** * - * @private set_class_name + * @private @method set_class_name * * @param style_key_name string the name of the style * @param element_to_style HTMLElement @@ -1787,7 +1872,7 @@ export default class CustUpCore { } /** - * @private get_element_class_name + * @private @method get_element_class_name * @param {string} style_key_name * @returns {string} */ @@ -1796,13 +1881,12 @@ export default class CustUpCore { } /** - * @protected select_file_from_device - * @param {MouseEvent} e + * @protected @method _select_file_from_device + * @param {MouseEvent | TouchEvent} e */ - select_file_from_device (e) { + _select_file_from_device (e) { const _class = this; - // if (e != undefined && targetEl != this._custupDefaultUIInnerContentEl ) return const fileEl = document.createElement('input') fileEl.type = "file" fileEl.multiple = this.options.allowMultipleUpload @@ -1825,8 +1909,8 @@ export default class CustUpCore { } /** - * @protected handle_drag_over - * @param {Event} e + * @protected @method handle_drag_over + * @param {DragEvent} e */ handle_drag_over (e) { e.preventDefault() @@ -1838,8 +1922,8 @@ export default class CustUpCore { } /** - * @protected handle_drag_leave - * @param {EventListener} e + * @protected @method handle_drag_leave + * @param {DragEvent} e */ handle_drag_leave (e) { e.preventDefault() @@ -1850,11 +1934,13 @@ export default class CustUpCore { } /** - * @protected show_message + * @protected @method show_message * @param {string} msg * @param {"error" | "success" | "info"} type + * @param {boolean} async - for async messages that doesn't hide until the request is done + * @param {number} timeout - timeout for hiding the message */ - show_message (msg, type) { + show_message (msg, type, async = false, timeout = this.options.messages.timeout) { const _class = this const message_container = document.createElement("div") _class.set_class_name("message_container", message_container) @@ -1870,12 +1956,19 @@ export default class CustUpCore { }else{ currentElOffsetBottom += _class.last_message_el_offset_bottom + 5 } - if (type == "error") { - message_icon.innerHTML = this.ui_icons.warning - }else if (type == "success") { - message_icon.innerHTML = this.ui_icons.success - }else if (type == "info") { - message_icon.innerHTML = this.ui_icons.info + if (async) { + message_icon.innerHTML = this.ui_icons.loading_partial; + message_icon.animate( + [{transform: 'rotate(360deg)'}], + {duration: 500, iterations: Infinity}) + }else{ + if (type == "error") { + message_icon.innerHTML = this.ui_icons.warning + }else if (type == "success") { + message_icon.innerHTML = this.ui_icons.success + }else if (type == "info") { + message_icon.innerHTML = this.ui_icons.info + } } message_content.innerHTML = msg message_container.append(message_icon) @@ -1889,48 +1982,42 @@ export default class CustUpCore { _class._custupInnerEl.append(message_container) _class.last_message_el_offset_bottom = currentElOffsetBottom - message_container.onclick = (e) => _class.message_element_exit_call(e.currentTarget) + message_container.onclick = (e) => async ? null : _class.message_element_exit_call(e.currentTarget) - _class.message_element_exit_call(message_container, false) + if (async) { + return () => _class.message_element_exit_call(message_container); + } + + setTimeout(() => { + _class.message_element_exit_call(message_container, false) + }, timeout); } /** - * @protected message_element_exit_call + * @protected @method message_element_exit_call * This method is executed when a message element is exiting * @param {HTMLElement} message_container - * @param {boolean} no_wait - specifies if the exit call should be ran inside a setTimeout or not */ - message_element_exit_call (message_container, no_wait = true) { - const _class = this - const _run = () => { - message_container.classList.add("peakout-anim") - setTimeout(() => { - const message_container_height = message_container.offsetHeight - message_container.remove() - if (_class._custupInnerEl.querySelectorAll('._custup_message_container').length == 0) { - _class.last_message_el_offset_bottom = 0 - } - _class._custupInnerEl.querySelectorAll('._custup_message_container') - .forEach(messageEl => { - const distance_to_be_displaced_downward = (_class._custupInnerEl.clientHeight - (messageEl.offsetTop + messageEl.clientHeight)) - message_container_height - messageEl.style.bottom = distance_to_be_displaced_downward + 'px' - }) - _class.last_message_el_offset_bottom = _class.last_message_el_offset_bottom == 0 ? 0 : (_class.last_message_el_offset_bottom - message_container_height) - }, _class.options.alert_timeout_time); - } - - if (no_wait) { - _run() - }else{ - setTimeout(() => { - _run() - }, 4000); - } + message_element_exit_call (message_container) { + message_container.classList.add("peakout-anim") + setTimeout(() => { + const message_container_height = message_container.offsetHeight + message_container.remove() + if (this._custupInnerEl.querySelectorAll('._custup_message_container').length == 0) { + this.last_message_el_offset_bottom = 0 + } + this._custupInnerEl.querySelectorAll('._custup_message_container') + .forEach(messageEl => { + const distance_to_be_displaced_downward = (this._custupInnerEl.clientHeight - (messageEl.offsetTop + messageEl.clientHeight)) - message_container_height + messageEl.style.bottom = distance_to_be_displaced_downward + 'px' + }) + this.last_message_el_offset_bottom = this.last_message_el_offset_bottom == 0 ? 0 : (this.last_message_el_offset_bottom - message_container_height) + }, this.options.alert_timeout_time); } /** - * @protected handle_file_drop + * @protected @method handle_file_drop * @param {Event} e */ handle_file_drop (e) { @@ -1944,7 +2031,7 @@ export default class CustUpCore { } /** - * @property isfileAreadyAdded + * @property @method isfileAreadyAdded * @param {File} file */ isfileAreadyAdded (file) { @@ -1953,7 +2040,7 @@ export default class CustUpCore { } /** - * @protected parseFileSize + * @protected @method parseFileSize * @param {number} size */ parseFileSize = (size) => { @@ -1970,10 +2057,13 @@ export default class CustUpCore { } /** - * @protected handle_selected_files + * @protected @method handle_selected_files * @param {Array} files + * @param {Function | null} before_add_callback_fn + * @param {boolean} isUploadable + * @param {number | null} index */ - handle_selected_files (files, before_add_callback_fn=null, isUploadable=true) { + handle_selected_files (files, before_add_callback_fn=null, isUploadable=true, index=null) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (this.isfileAreadyAdded(file)) { @@ -2000,7 +2090,7 @@ export default class CustUpCore { continue; } before_add_callback_fn && before_add_callback_fn() - this.addFileToUI(file, isUploadable) + this.addFileToUI(file, isUploadable, index) } } @@ -2009,7 +2099,7 @@ export default class CustUpCore { /////////////////////////////////////////////////////////////////////////////////////////////////// /** - * @protected createFileUploadOverlay + * @protected @method createFileUploadOverlay * @param {string} file_id - id of the file to add file upload overlay to * @returns {HTMLDivElement} */ @@ -2033,11 +2123,11 @@ export default class CustUpCore { this.set_class_name('file_upload_progress', file_upload_progress) this.set_class_name('file_upload_progress_inner', file_upload_progress_inner) - file_upload_progress.append(file_upload_progress_inner) - upload_progress_container.append(file_upload_progress) - upload_progress_container.append(file_upload_progress_text_left) - file_upload_overlay_inner_container.append(upload_progress_container) - file_upload_overlay_ui.append(file_upload_overlay_inner_container) + file_upload_progress.append(file_upload_progress_inner); + upload_progress_container.append(file_upload_progress); + upload_progress_container.append(file_upload_progress_text_left); + this.options.show_upload_progress_bar && file_upload_overlay_inner_container.append(upload_progress_container); + file_upload_overlay_ui.append(file_upload_overlay_inner_container); upload_file_element.append(file_upload_overlay_ui) file_upload_overlay_ui.animate([{opacity: 0}, {opacity: 1}], {duration: 500}) @@ -2046,7 +2136,7 @@ export default class CustUpCore { } /** - * @protected createRetryUploadOverlay + * @protected @method createRetryUploadOverlay * @param {File} file * @param {string} file_id - id of the file element to append the retry upload overlay to */ @@ -2068,6 +2158,10 @@ export default class CustUpCore { upload_file_element.append(retry_upload_overlay_ui) } + /** + * @protected @method isUploadConditionsSatisfied + * @returns {boolean} + */ isUploadConditionsSatisfied () { if (this.options.maxNumberOfFiles != undefined && this._get_total_file_count() > this.options.maxNumberOfFiles) { this.show_message('Number of file to be uploaded should not be greater than ' + this.options.maxNumberOfFiles, 'error') @@ -2080,7 +2174,7 @@ export default class CustUpCore { } /** - * @protected handleUploadFile + * @protected @method handleUploadFile * @param {File} file - the file to be uploaded */ handleUploadFile (file=undefined) { @@ -2102,6 +2196,10 @@ export default class CustUpCore { } + /** + * @private @method handleUploadAllFiles + * @returns {Promise} + */ async handleUploadAllFiles () { if (!this.isUploadConditionsSatisfied()) return; const _class = this @@ -2116,7 +2214,7 @@ export default class CustUpCore { } } - this.selectedFiles.map(file => _class.file_upload_form_data.append(_class.options.file_upload_settings.files_field_name + '[]', file)) + this.selectedFiles.map(file => _class.file_upload_form_data.append(_class.options.file_upload_settings.files_field_name, file)) let attached_files = [] this.options.instance_attach.map(_instance => { @@ -2130,7 +2228,7 @@ export default class CustUpCore { } } }) - attached_files.map(file => _class.file_upload_form_data.append(_class.options.file_upload_settings.files_field_name + '[]', file)) + attached_files.map(file => _class.file_upload_form_data.append(_class.options.file_upload_settings.files_field_name, file)) const all_files = [...this.selectedFiles, ...attached_files]; const beforeUploadStartCheck = this.eventMethods.upload_beforeStart && (await this.eventMethods.upload_beforeStart({files: all_files, formData: _class.file_upload_form_data, form: this.options.file_upload_settings.form_field})); @@ -2139,7 +2237,7 @@ export default class CustUpCore { return; } - _class.__axios_instance.post('', _class.file_upload_form_data, { + await _class.__axios_instance.post('', _class.file_upload_form_data, { onUploadProgress: progressEvent => { this.eventMethods.upload_progress && this.eventMethods.upload_progress({progressEvent, all_files}); } @@ -2152,10 +2250,12 @@ export default class CustUpCore { this.eventMethods.upload_error && this.eventMethods.upload_error({err, files: all_files, formData: _class.file_upload_form_data}); }); + this.eventMethods.upload_all_finished({not_uploaded_files: this.filesNotSent, uploaded_files: this.successfullyUploadedFiles}); + } /** - * @protected fileUploadHandler + * @protected @method fileUploadHandler * @param {File} file - the file to be uploaded */ fileUploadHandler (file=undefined) { @@ -2167,7 +2267,7 @@ export default class CustUpCore { } /** - * @protected handleRetryFileUpload + * @protected @method handleRetryFileUpload * @param {File} file - Blob of the file to retry * @param {HTMLDivElement} retry_upload_overlay_ui - html element of the retry upload overlay */ @@ -2183,7 +2283,7 @@ export default class CustUpCore { } /** - * @protected configure_axios + * @protected @method configure_axios */ configure_axios () { this.__axios_instance = axios.create({ @@ -2199,16 +2299,42 @@ export default class CustUpCore { } /** - * @private handleUploadFileToEndpoint + * @private @method handleUploadFileToEndpoint * @param {File} file - file to upload to the server * @param {HTMLDivElement} upload_element - html element containing elements to display upload data and status + * @param {boolean} chunking */ - handleUploadFileToEndpoint (file, upload_element) { - const _class = this - _class.file_upload_form_data.append(_class.options.file_upload_settings.files_field_name, file); + + handleUploadFileToEndpoint (file, upload_element, chunking = false) { + const _class = this; + const chunk_size = _class.options.file_upload_settings.chunk_size; + + const uniq_formdata = new FormData(_class.options.file_upload_settings.form_field) + if (_class.options.file_upload_settings.should_chunk) { + if (Object.keys(this.file_chunks).includes(file.id)) { + const fileChunkObj = this.file_chunks[file.id] + this.file_chunks[file.id].endByte = Math.min(fileChunkObj.startByte + chunk_size, file.size) + this.file_chunks[file.id].batch += 1 + }else{ + this.file_chunks[file.id] = { + startByte: 0, + endByte: chunk_size > file.size ? file.size : Math.min(chunk_size, file.size), + batch: 1, + } + } + + const file_split = file.slice(this.file_chunks[file.id].startByte, this.file_chunks[file.id].endByte) + + uniq_formdata.set(file.id, file_split, file.name); + }else{ + uniq_formdata.append(_class.options.file_upload_settings.files_field_name, file); + } - if (this.filesNotSent.length > 0 && this.options.use_default_file_display_ui) { + + + + if (!chunking && this.filesNotSent.length > 0 && this.options.use_default_file_display_ui) { upload_element.style.boxShadow = 'none' const upload_file_element = this.fileDisplayUIEl.querySelector(`#${file.id}`).querySelector('._custup_file_ui') upload_file_element.querySelector(`.${this.get_element_class_name('retry_upload_overlay_ui')}`)?.remove() @@ -2217,28 +2343,59 @@ export default class CustUpCore { } // if additional data to be sent along with request was provided then add it to the request - if (_class.options.file_upload_settings.additional_data != undefined) { + if (((_class.options.file_upload_settings.should_chunk && this.file_chunks[file.id].endByte >= file.size) && _class.options.file_upload_settings.additional_data != undefined) || + (_class.options.file_upload_settings.additional_data != undefined && !_class.options.file_upload_settings.should_chunk)) { for (const key in _class.options.file_upload_settings.additional_data) { if (Object.hasOwnProperty.call(_class.options.file_upload_settings.additional_data, key)) { const data = _class.options.file_upload_settings.additional_data[key]; - _class.file_upload_form_data.append(key, data) + uniq_formdata.append(key, data); } } } this.eventMethods.upload_beforeStart && this.eventMethods.upload_beforeStart({file, upload_element}); - const fileContainer = _class.fileDisplayUIEl?.querySelector(`#${file.id}`) - _class.__axios_instance.post('', _class.file_upload_form_data, { + const fileContainer = _class.fileDisplayUIEl?.querySelector(`#${file.id}`); + + _class.successfullyUploadedFiles.map(file => uniq_formdata.delete(file.id)); + + _class.options.file_upload_settings.should_chunk && (_class.__axios_instance.defaults.headers.post['Content-Range'] = "bytes " + this.file_chunks[file.id].startByte + "-" + this.file_chunks[file.id].endByte + "/" + file.size); + this.currentlyUploadingFiles.push(file) + _class.__axios_instance.post('', uniq_formdata, { onUploadProgress: progressEvent => { + const should_use_chunking = this.options.file_upload_settings.should_chunk; + if (should_use_chunking) { + const chunk_loaded = this.file_chunks[file.id].startByte + progressEvent.loaded; + this.file_progress[file.id] = { + total: file.size, + loaded: chunk_loaded > file.size ? file.size : chunk_loaded, + progress: (chunk_loaded > file.size ? file.size : chunk_loaded) / file.size, + } + } + progressEvent.loaded = should_use_chunking ? this.file_progress[file.id].loaded : progressEvent.loaded; + progressEvent.total = should_use_chunking ? this.file_progress[file.id].total : progressEvent.total; + progressEvent.progress = should_use_chunking ? this.file_progress[file.id].progress : progressEvent.progress; this.eventMethods.upload_progress && this.eventMethods.upload_progress({progressEvent, file, upload_element}); _class.handleUploadProgressEvent(progressEvent, upload_element); } }) .then((data) => { - _class.successfullyUploadedFiles.push(file); - _class.removeFileUploadOverlay(upload_element, fileContainer, true); - this.eventMethods.upload_success && this.eventMethods.upload_success({data, file, upload_element, file_container: fileContainer}); + _class.options.file_upload_settings.should_chunk && (this.file_chunks[file.id].startByte = this.file_chunks[file.id].endByte); + + this.currentlyUploadingFiles.splice(this.currentlyUploadingFiles.indexOf(file), 1); + + if (_class.options.file_upload_settings.should_chunk && this.file_chunks[file.id].startByte < file.size) { + _class.handleUploadFileToEndpoint (file, upload_element, true) + }else{ + _class.successfullyUploadedFiles.push(file); + _class.removeFileUploadOverlay(upload_element, fileContainer, true); + this.eventMethods.upload_success && this.eventMethods.upload_success({data, file, upload_element, file_container: fileContainer}); + delete this.file_chunks[file.id]; + delete this.file_progress[file.id]; + (this.currentlyUploadingFiles.length == 0 && this.eventMethods.upload_all_finished !== undefined) && this.eventMethods.upload_all_finished({not_uploaded_files: this.filesNotSent, uploaded_files: this.successfullyUploadedFiles}); + } + + }) .catch(err => { this.options.show_upload_error_overlay && _class.createRetryUploadOverlay(file, file.id); @@ -2246,11 +2403,12 @@ export default class CustUpCore { _class.filesNotSent.push(file); this.show_message(err.message, 'error'); this.eventMethods.upload_error && this.eventMethods.upload_error({err, file, upload_element, file_container: fileContainer}); + this.currentlyUploadingFiles.splice(this.currentlyUploadingFiles.indexOf(file), 1); }); } /** - * @private removeFileUploadOverlay + * @private @method removeFileUploadOverlay * @param {HTMLDivElement} upload_element - html element of the overlay element * @param {HTMLDivElement} fileContainer - html element of the of the file container * @param {boolean} isSuccessful - boolean to specify if the request was successful or not @@ -2267,7 +2425,7 @@ export default class CustUpCore { /** - * @protected handleUploadProgressEvent + * @protected @method handleUploadProgressEvent * @param {ProgressEvent} event - upload progress event * @param {HTMLDivElement} upload_element - HTML element to display the file upload status */ @@ -2275,11 +2433,13 @@ export default class CustUpCore { if (!this.options.use_default_file_display_ui) return; const upload_progress_inner = upload_element.querySelector(`.${this.get_element_class_name('file_upload_progress_inner')}`) const percentage_uploaded_element = upload_element.querySelector('.upload-text') - upload_progress_inner.style.width = Math.floor(event.progress * 100) + '%' - percentage_uploaded_element.innerHTML = Math.floor(event.progress * 100) + '%' + upload_progress_inner != null && (upload_progress_inner.style.width = Math.floor(event.progress * 100) + '%'); + percentage_uploaded_element != null && (percentage_uploaded_element.innerHTML = Math.floor(event.progress * 100) + '%'); } + //////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////// Event Handlers ////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////////////////////// /** * on - listen for an event * @param { 'file.beforeAdded' | @@ -2309,9 +2469,13 @@ export default class CustUpCore { * 'upload.progress' | * 'upload.success' | * 'upload.error' | - * 'upload.retry' + * 'upload.retry' | + * 'upload.all_finished' | + * 'file_source.closed' | + * 'default_ui.shown' | + * 'default_ui.closed' * } event - event name - * @param {*} callbackFn - the callback function + * @param {Function} callbackFn - the callback function */ on (event, callbackFn) { @@ -2427,13 +2591,31 @@ export default class CustUpCore { case 'upload.retry': this.eventMethods.upload_retry = callbackFn break; + + case 'upload.all_finished': + this.eventMethods.upload_all_finished = callbackFn + break; + + case 'file_source.closed': + this.eventMethods.file_source_closed = callbackFn + break; + + case 'default_ui.shown': + this.eventMethods.default_ui_shown = callbackFn + break; + + case 'default_ui.closed': + this.eventMethods.default_ui_closed = callbackFn + break; default: break; } } + ///////////////////////////////////////////////////////////////////////////////// //////////////////////////////////// Methods //////////////////////////////////// + ///////////////////////////////////////////////////////////////////////////////// /** * @method upload - the method to upload file to the endpoint @@ -2467,7 +2649,8 @@ export default class CustUpCore { */ preview_file (file_id) { const file = this.selectedFiles.find(f => f.id == file_id) - this.makeFilePreviewer(file) + if (!this.is_file_previewable(file)) return; + this.makeFilePreviewer(file); } /** @@ -2477,6 +2660,13 @@ export default class CustUpCore { return this.selectedFiles } + /** + * @method get_default_files - return all the default files + */ + get_default_files () { + return this.defaultFiles + } + /** * @method get_all_files - return all the selected files */ @@ -2552,13 +2742,16 @@ export default class CustUpCore { /** * @method add_file - add a file to the UI + * @param {File} file + * @param {boolean} [skip_file_check=false] + * @param {number | null} [index=null] */ - add_file (file, skip_file_check=false) { + add_file (file, skip_file_check=false, index=null) { const fileArr = Array.isArray(file) ? file : [file] if (skip_file_check === true) { - fileArr.map(file => this.addFileToUI(file)) + fileArr.map(file => this.addFileToUI(file, undefined, index)) }else{ - this.handle_selected_files(fileArr) + this.handle_selected_files(fileArr, undefined, undefined, index) } } @@ -2618,5 +2811,177 @@ export default class CustUpCore { this.handleExternalSource('dalle') } + /** + * @method clear_persisted_files + */ + clear_persisted_files () { + this.clear_files_from_storage(); + } + + /** + * @method select_file_from_device + */ + select_file_from_device () { + this._select_file_from_device(); + } + + /** + * @method close_file_source_popup + */ + close_file_source_popup () { + this._custup_external_source_instance?.destroyContainerUI(true); + this._custup_media_source_instance?.closeMediaPopup(true); // destroy CustUpMediaSource instance if already exists + } + + /** + * @method get_file_sources - Returns all the allowed file sources icons wrapped in HTML element + * @param {HTMLElement | null} iconsContainer - An HTML element to automatically append the icons to + * @param {Function | null} allElOnClick - A callback function to be attached to the onClick event of every icons + * @param {Object | {}} additionalElOnClickEv - An object containing the function to be attached to the onClick event of the specified icons + * @returns {Array} + */ + get_file_sources (iconsContainer=null, allElOnClick=null, additionalElOnClickEv = {}) { + const file_sources = [] + + const file_sources_arr = { + record_video: () => { + const recordVideoIcon = document.createElement('div') + recordVideoIcon.innerHTML = this.options.file_source_icons.video_camera + recordVideoIcon.title = `Record Video` + recordVideoIcon.onclick = (e) => { + e.stopPropagation(); + this.handleMediaSource('video'); + additionalElOnClickEv['record_video'] && additionalElOnClickEv['record_video'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(recordVideoIcon); + file_sources.push(recordVideoIcon); + }, + capture_image: () => { + const captureImageIcon = document.createElement('div') + captureImageIcon.innerHTML = this.options.file_source_icons.capture_image + captureImageIcon.title = `Capture Image` + captureImageIcon.onclick = (e) => { + e.stopPropagation(); + this.handleMediaSource('image'); + additionalElOnClickEv['capture_image'] && additionalElOnClickEv['capture_image'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(captureImageIcon); + file_sources.push(captureImageIcon); + }, + record_audio: () => { + const recordAudioIcon = document.createElement('div') + recordAudioIcon.innerHTML = this.options.file_source_icons.record_audio + recordAudioIcon.title = `Record Audio` + recordAudioIcon.onclick = (e) => { + e.stopPropagation(); + this.handleMediaSource('audio'); + additionalElOnClickEv['record_audio'] && additionalElOnClickEv['record_audio'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(recordAudioIcon); + file_sources.push(recordAudioIcon); + }, + record_screen: () => { + const recordScreenIcon = document.createElement('div') + recordScreenIcon.innerHTML = this.options.file_source_icons.record_screen + recordScreenIcon.title = `Record Screen` + recordScreenIcon.onclick = (e) => { + e.stopPropagation(); + this.handleMediaSource('screen'); + additionalElOnClickEv['record_screen'] && additionalElOnClickEv['record_screen'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(recordScreenIcon); + file_sources.push(recordScreenIcon); + }, + link_source: () => { + const linkSourceIcon = document.createElement('div') + linkSourceIcon.innerHTML = this.options.file_source_icons.url_source + linkSourceIcon.title = `Link` + linkSourceIcon.onclick = (e) => { + e.stopPropagation(); + this.handleExternalSource("url"); + additionalElOnClickEv['link_source'] && additionalElOnClickEv['link_source'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(linkSourceIcon); + file_sources.push(linkSourceIcon); + }, + google_drive_source: () => { + const googleDriveSourceIcon = document.createElement('div') + googleDriveSourceIcon.innerHTML = this.options.file_source_icons.google_drive_source + googleDriveSourceIcon.title = `Google Drive` + googleDriveSourceIcon.onclick = (e) => { + e.stopPropagation(); + this.handleExternalSource('google_drive'); + additionalElOnClickEv['google_drive_source'] && additionalElOnClickEv['google_drive_source'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(googleDriveSourceIcon); + file_sources.push(googleDriveSourceIcon); + }, + dropbox_source: () => { + const dropboxSourceIcon = document.createElement('div') + dropboxSourceIcon.innerHTML = this.options.file_source_icons.dropbox_source + dropboxSourceIcon.title = `Dropbox` + dropboxSourceIcon.onclick = (e) => { + e.stopPropagation(); + this.handleExternalSource('dropbox'); + additionalElOnClickEv['dropbox_source'] && additionalElOnClickEv['dropbox_source'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(dropboxSourceIcon); + file_sources.push(dropboxSourceIcon); + }, + box_source: () => { + const boxSourceIcon = document.createElement('div') + boxSourceIcon.innerHTML = this.options.file_source_icons.box_source + boxSourceIcon.title = `Box` + boxSourceIcon.onclick = (e) => { + e.stopPropagation(); + this.handleExternalSource('box'); + additionalElOnClickEv['box_source'] && additionalElOnClickEv['box_source'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(boxSourceIcon); + file_sources.push(boxSourceIcon); + }, + openai_dalle_source: () => { + const openAIDALLESourceIcon = document.createElement('div') + openAIDALLESourceIcon.innerHTML = this.options.file_source_icons.openai_dalle_source + openAIDALLESourceIcon.title = `DALL.E` + openAIDALLESourceIcon.onclick = (e) => { + e.stopPropagation(); + this.handleExternalSource('dalle'); + additionalElOnClickEv['openai_dalle_source'] && additionalElOnClickEv['openai_dalle_source'](e); + allElOnClick && allElOnClick(e); + } + iconsContainer && iconsContainer.append(openAIDALLESourceIcon); + file_sources.push(openAIDALLESourceIcon); + } + } + + if (this.options.allowed_sources.length > 0) { + this.options.allowed_sources.map(source => file_sources_arr[source]()); + }else{ + Object.keys(file_sources_arr).forEach(source => file_sources_arr[source]()) + } + + return file_sources; + } + + /** + * @public @method display_message - display pop up message + * @param {string} msg - The message to be displayed + * @param {"error" | "success" | "info"} type - The message type + * @param {boolean} async - for async messages that doesn't hide until the request is done + * @param {number} timeout - timeout for hiding the message + * @returns {Function | void} + */ + display_message (msg, type, async = false, timeout = this.options.messages.timeout) { + return this.show_message(msg, type, async, timeout) + } } diff --git a/package-lock.json b/package-lock.json index 7d98d8c..92e7690 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "custup", - "version": "0.1.0", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "custup", - "version": "0.1.0", + "version": "1.0.0", "license": "MIT", "devDependencies": { "@jest/globals": "^29.7.0", diff --git a/package.json b/package.json index 7172dd4..f4b613f 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,13 @@ { "name": "custup", - "version": "0.2.1", + "version": "1.0.0", "description": "Highly customisable file upload library with zero dependencies", "main": "src/custup.min.js", "scripts": { "test": "NODE_OPTIONS=--experimental-vm-modules npx jest", - "type-test": "npx tsd ." + "type-test": "npx tsd .", + "typed": "find . -type f ! -path './node_modules/*' -name '*.d.ts*' -delete; npx tsc", + "grunt": "grunt uglify cssmin" }, "repository": { "type": "git", diff --git a/plugins/custupmediasource.d.ts b/plugins/custupmediasource.d.ts index 1a61278..1f8e620 100644 --- a/plugins/custupmediasource.d.ts +++ b/plugins/custupmediasource.d.ts @@ -14,7 +14,7 @@ export default class CustUpMediaSource { * ui_styles: typeof media_capture_ui_styles; * }} */ - constructor({ inner_container, media_type, standalone, callbackFn, config, eventMethods, ui_styles }: { + constructor({ inner_container, media_type, standalone, callbackFn, config, eventMethods, ui_styles, onclose }: { inner_container: HTMLDivElement; media_type: 'audio' | 'video' | 'image'; standalone?: boolean; @@ -27,9 +27,9 @@ export default class CustUpMediaSource { ui_styles: typeof media_capture_ui_styles; }); /** - * @protected @property {HTMLDivElement} _funkupInnerContainer + * @protected @property {HTMLDivElement} _custupInnerContainer */ - protected _funkupInnerContainer: HTMLDivElement; + protected _custupInnerContainer: HTMLDivElement; /** * @protected @property {'audio' | 'video' | 'image' | 'screen'} media_type */ @@ -96,6 +96,10 @@ export default class CustUpMediaSource { * @protected @property {Function} callbackFn */ protected callbackFn: Function; + /** + * @protected @property {Function} onPopupCloseCallback + */ + protected onPopupCloseCallback: any; /** * @protected @property {Function} media_config */ @@ -138,7 +142,7 @@ export default class CustUpMediaSource { * @param {'video' | 'both' | 'image' | 'audio' | 'screen'} constraint_type - type of media * @returns MediaStream */ - protected initializeMediaDevices(constraint_type: 'video' | 'both' | 'image' | 'audio' | 'screen'): Promise; + protected initializeMediaDevices(constraint_type: 'video' | 'both' | 'image' | 'audio' | 'screen'): Promise; /** * @protected initializeMediaDevices * @param {string} constraint_type - type of media @@ -168,7 +172,8 @@ export default class CustUpMediaSource { */ protected createMediaCaptureUI(media_type: 'audio' | 'video' | 'image'): HTMLVideoElement; removeMediaCaptureUI(): void; - closeMediaPopup(): void; + stopTracks(): void; + closeMediaPopup(silent?: boolean): void; /** * @protected animateStartActionButton * @param {boolean} stop - whether to start or stop the action button animation diff --git a/plugins/custupmediasource.d.ts.map b/plugins/custupmediasource.d.ts.map index 001add2..66291ff 100644 --- a/plugins/custupmediasource.d.ts.map +++ b/plugins/custupmediasource.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"custupmediasource.d.ts","sourceRoot":"","sources":["custupmediasource.js"],"names":[],"mappings":"AAGA;IAkHI;;;;;;;;;;;;;;OAcG;IAEH,sGAdW;QACV,eAAsB,EAAE,cAAc,CAAC;QACvC,UAAiB,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;QAC/C,UAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,UAAiB,WAAW;QAC5B,MAAa,CAAC,EAAE;YAChB,UAAqB,EAAE,OAAO,CAAC;YAC/B,sBAAiC,EAAE,OAAO,CAAC;SACnC,CAAC;QACT,YAAmB,EAAE,OAAO,YAAY,CAAC;QACzC,SAAgB,EAAE,8BAA8B,CAAC;KAC9C,EA6CH;IA3KD;;OAEG;IACH,gDAAqB;IAErB;;OAEG;IACH,kDAAU;IAEV;;OAEG;IACH,mCAAe;IAEf;;OAEG;IACH,+BAAsB;IAGtB;;OAEG;IACH,mBAAe;IAEf;;OAEG;IACH,gCAAuB;IAEvB;;OAEG;IACH,yBAAgB;IAEhB;;OAEG;IACH,qBAAoB;IAEpB;;;;;;;OAOG;IACH,4BAAmB;IACnB,4CAAsC;IACtC,sBAAgB;IAChB,8BAAwB;IACxB,4BAAsB;IACtB,8BAAwB;IAGxB;;;;;;;;;;;MAIC;IAED;;;;OAIG;IACH,0CAA0B;IAC1B,kCAA4B;IAC5B,0CAAoC;IAEpC;;OAEG;IACH,+BAAU;IAEV;;OAEG;IACH;oBAyCwB,OAAO;gCACK,OAAO;kBA1C/B;IAEZ;;OAEG;IACH;;;;MAAwC;IAExC;;OAEG;IACH;;;;;;;;;;;;;;;;;MAqBC;IA8DD,4BAmBC;IAED;;;;OAIG;IACH,kDAHW,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,wBAKzD;IAED;;;;OAIG;IACH,kEAEC;IAED;;;OAGG;IACH,qBAQC;IAED;;;;;;;;OAQG;IACH,uBAGC;IAED,8CAEC;IAED;;;;OAIG;IACH,2CAHW,OAAO,GAAG,OAAO,GAAG,OAAO,GACzB,gBAAgB,CA2G5B;IAED,6BAKC;IAED,wBAWC;IAED;;;OAGG;IACH,0CAFW,OAAO,QAWjB;IAED,oBAGC;IAED,qBAGC;IAED,oBAGC;IAED,qBAGC;IAED,6BAEC;IAED,uBAsCC;IAED,4BAkBC;IAED,4BAMC;IAED,4BAOC;IAED,kCAsBC;CACJ;wCAvgBuC,qBAAqB"} \ No newline at end of file +{"version":3,"file":"custupmediasource.d.ts","sourceRoot":"","sources":["custupmediasource.js"],"names":[],"mappings":"AAGA;IAuHI;;;;;;;;;;;;;;OAcG;IAEH,+GAdW;QACV,eAAsB,EAAE,cAAc,CAAC;QACvC,UAAiB,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;QAC/C,UAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,UAAiB,WAAW;QAC5B,MAAa,CAAC,EAAE;YAChB,UAAqB,EAAE,OAAO,CAAC;YAC/B,sBAAiC,EAAE,OAAO,CAAC;SACnC,CAAC;QACT,YAAmB,EAAE,OAAO,YAAY,CAAC;QACzC,SAAgB,EAAE,8BAA8B,CAAC;KAC9C,EAqDH;IAxLD;;OAEG;IACH,gDAAqB;IAErB;;OAEG;IACH,kDAAU;IAEV;;OAEG;IACH,mCAAe;IAEf;;OAEG;IACH,+BAAsB;IAGtB;;OAEG;IACH,mBAAe;IAEf;;OAEG;IACH,gCAAuB;IAEvB;;OAEG;IACH,yBAAgB;IAEhB;;OAEG;IACH,qBAAoB;IAEpB;;;;;;;OAOG;IACH,4BAAmB;IACnB,4CAAsC;IACtC,sBAAgB;IAChB,8BAAwB;IACxB,4BAAsB;IACtB,8BAAwB;IAGxB;;;;;;;;;;;MAIC;IAED;;;;OAIG;IACH,0CAA0B;IAC1B,kCAA4B;IAC5B,0CAAoC;IAEpC;;OAEG;IACH,+BAAU;IAEV;;OAEG;IACH,oCAAoB;IAEpB;;OAEG;IACH;oBAyCwB,OAAO;gCACK,OAAO;kBA1C/B;IAEZ;;OAEG;IACH;;;;MAAwC;IAExC;;OAEG;IACH;;;;;;;;;;;;;;;;;MAqBC;IAsED,4BAmBC;IAED;;;;OAIG;IACH,kDAHW,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,gBAMzD;IAED;;;;OAIG;IACH,kEAEC;IAED;;;OAGG;IACH,qBAQC;IAED;;;;;;;;OAQG;IACH,uBAGC;IAED,8CAEC;IAED;;;;OAIG;IACH,2CAHW,OAAO,GAAG,OAAO,GAAG,OAAO,GACzB,gBAAgB,CA2G5B;IAED,6BAKC;IAED,mBAIC;IAGD,wCAUC;IAED;;;OAGG;IACH,0CAFW,OAAO,QAWjB;IAED,oBAGC;IAED,qBAGC;IAED,oBAGC;IAED,qBAGC;IAED,6BAEC;IAED,uBAsCC;IAED,4BAkBC;IAED,4BAMC;IAED,4BAOC;IAED,kCAsBC;CACJ;wCA3hBuC,qBAAqB"} \ No newline at end of file diff --git a/plugins/custupmediasource.js b/plugins/custupmediasource.js index aba87e1..3131752 100644 --- a/plugins/custupmediasource.js +++ b/plugins/custupmediasource.js @@ -3,9 +3,9 @@ import icons from "../utils/icons.js" export default class CustUpMediaSource { /** - * @protected @property {HTMLDivElement} _funkupInnerContainer + * @protected @property {HTMLDivElement} _custupInnerContainer */ - _funkupInnerContainer + _custupInnerContainer /** * @protected @property {'audio' | 'video' | 'image' | 'screen'} media_type @@ -79,6 +79,11 @@ export default class CustUpMediaSource { */ callbackFn + /** + * @protected @property {Function} onPopupCloseCallback + */ + onPopupCloseCallback + /** * @protected @property {Function} media_config */ @@ -138,13 +143,14 @@ export default class CustUpMediaSource { callbackFn, config, eventMethods, - ui_styles + ui_styles, + onclose }) { if (inner_container == undefined && !standalone) { throw new Error('inner container of CustUp initialization is required') } - this._funkupInnerContainer = inner_container; + this._custupInnerContainer = inner_container; this.media_type = media_type == undefined ? 'video' : media_type; this.standalone_mode = !standalone ? false : true; @@ -172,6 +178,13 @@ export default class CustUpMediaSource { } } + + if (document.querySelector('._custup_media_capture_container') != null) { + document.querySelector('._custup_media_capture_container')?.remove(); + } + + onclose !== undefined && (this.onPopupCloseCallback = onclose); + this.initialize(); } @@ -202,7 +215,8 @@ export default class CustUpMediaSource { * @returns MediaStream */ async initializeMediaDevices (constraint_type) { - return this.media_devices_instance = await navigator.mediaDevices.getUserMedia(this.media_constraints[constraint_type]); + this.media_devices_instance = await navigator.mediaDevices.getUserMedia(this.media_constraints[constraint_type]); + return this.media_devices_instance } /** @@ -238,12 +252,12 @@ export default class CustUpMediaSource { * */ set_class_name (style_key_name, element_to_style) { - const get_style_classname = media_capture_ui_styles[style_key_name]; + const get_style_classname = this.ui_styles[style_key_name]; element_to_style.className = get_style_classname } get_style_classname (style_key_name) { - return media_capture_ui_styles[style_key_name]; + return this.ui_styles[style_key_name]; } /** @@ -355,27 +369,33 @@ export default class CustUpMediaSource { this.media_capture_ui_container.append(this.media_capture_main_container) this.media_capture_ui_container.append(this.media_capture_bottom_tools_container) - this._funkupInnerContainer.append(this.media_capture_ui_container) + this._custupInnerContainer.append(this.media_capture_ui_container) } removeMediaCaptureUI () { - this.media_capture_ui_container.remove() + this.media_capture_ui_container?.remove() this.media_devices_instance = undefined this.media_devices_instance = undefined this.media_data = [] } - closeMediaPopup () { + stopTracks () { this.media_devices_instance?.getTracks().forEach(function(track) { track.stop(); }); - this.media_capture_ui_container.remove(); - this.media_capture_bottom_tools_container.remove(); - this.media_capture_main_container.remove(); + } + + + closeMediaPopup (silent=false) { + this.stopTracks() + this.media_capture_ui_container?.remove(); + this.media_capture_bottom_tools_container?.remove(); + this.media_capture_main_container?.remove(); this.removeMediaCaptureUI(); (this.media_type == 'video' && this.eventMethods.video_recordCancel !== undefined) && this.eventMethods.video_recordCancel(); (this.media_type == 'audio' && this.eventMethods.audio_recordCancel !== undefined) && this.eventMethods.audio_recordCancel(); (this.media_type == 'screen' && this.eventMethods.screen_recordCancel !== undefined) && this.eventMethods.screen_recordCancel(); + (this.onPopupCloseCallback && !silent) && this.onPopupCloseCallback(); } /** diff --git a/plugins/externalsources.d.ts b/plugins/externalsources.d.ts index 84d9c5e..b21120e 100644 --- a/plugins/externalsources.d.ts +++ b/plugins/externalsources.d.ts @@ -68,7 +68,9 @@ export default class ExternalSource { ami: string; apk: string; appcache: string; - application: string; + application: string; /** + * URL Source + */ apr: string; arc: string; asc: string; @@ -366,7 +368,11 @@ export default class ExternalSource { igs: string; igx: string; iif: string; - imp: string; + imp: string; /** + * @private getRandChars + * @param {string} identifyer + * @returns {string} + */ ims: string; in: string; ink: string; @@ -1083,7 +1089,6 @@ export default class ExternalSource { accessToken: null; googleDrivePickerInited: boolean; gisInited: boolean; - dropboxInitialized: boolean; dropboxUIContainer: any; /** * OneDrive source @@ -1126,11 +1131,16 @@ export default class ExternalSource { onedrivePickerPort: any; /** * @private @param {HTMLDivElement} dalleOuterContainer + */ + private dalleOuterContainer; + /** * @public @param {HTMLDivElement} dalleInitialPageContainer */ - public private dalleOuterContainer; - dalleInitialPageContainer: any; - dallePreviewPageContainer: any; + public dalleInitialPageContainer: any; + /** + * @public @param {HTMLDivElement} dallePreviewPageContainer + */ + public dallePreviewPageContainer: any; dalleResponseData: any[]; dalle_file_data: any[]; dalle_selected_files: any[]; @@ -1230,9 +1240,10 @@ export default class ExternalSource { loadOneDrivePickerScript(): void; setupCustupCloseBtn(): void; createContainerUI(): void; - destroyContainerUI(): void; + destroyContainerUI(silent?: boolean): void; makeURLSourceUi(): void; handleAddFileFromURLSource(): Promise; + dropboxIsInitialized(): boolean; handleAddFileFromDropbox(): void; addDropboxToUI(): void; /** @@ -1251,6 +1262,7 @@ export default class ExternalSource { googleAPIisLoaded(): void; createGoogleDrivePicker(): void; googleDrivePickerCallback(data: any): Promise; + isBoxScriptLoaded(): boolean; handleAddFileFromBox(): void; addBoxPickerToUI(): void; handleAddFileFromOneDrive(): void; diff --git a/plugins/externalsources.d.ts.map b/plugins/externalsources.d.ts.map index b070a1f..6a4457b 100644 --- a/plugins/externalsources.d.ts.map +++ b/plugins/externalsources.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"externalsources.d.ts","sourceRoot":"","sources":["externalsources.js"],"names":[],"mappings":"AAKA;IA8MI;;;;;;;;;;;;;;;;;;;;;;;;;MAyBE;IAEF,0NAzBW;QACX,eAAsB,EAAE,cAAc,CAAC;QACvC,WAAkB,EAAE,KAAK,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,GAAG,KAAK,GAAG,OAAO,CAAC;QACxF,UAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,UAAiB,WAAW;QAC5B,gBAAuB,CAAC,EAAE,cAAc,CAAC;QACzC,sBAA6B,CAAC,WAAW;QACzC,OAAc,CAAC,WAAW;QAC1B,oBAA2B,CAAC,EAAE;YAC9B,YAAoB,WAAW;YAC/B,eAAuB,WAAW;SAC1B,CAAC;QACT,kBAAyB,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAgB,CAAC,CAAC;QACnD,eAAsB,EAAE;YACxB,GAAc,EAAE,MAAM,CAAC;YACvB,QAAmB,EAAE,MAAM,CAAC;YAC5B,YAAuB,EAAE,MAAM,CAAC;YAChC,SAAoB,EAAE,MAAM,CAAC;YAC7B,GAAc,EAAE,MAAM,CAAC;YACvB,KAAgB,EAAE,MAAM,CAAC;SAChB,CAAC;QACV,cAAsB,EAAE,iCAAiC,CAAC;KACvD,EAgEF;IArSD,sCAAqB;IACrB,qBAAU;IACV,yBAAe;IAEf;;;;;;;OAOG;IACH,+BAAsB;IACtB,6CAAgB;IAChB,6CAAsB;IACtB;;;;MAIC;IACD,0BAAuB;IACvB,8BAAO;IACP,0BAAoB;IAEpB;;OAEG;IACH,oBAAW;IAEX;;OAEG;IACH,8BAAuD;IAEvD;;OAEG;IACH,0BAAoB;IACpB,kCAA4B;IAC5B,kCAA4B;IAC5B,gCAA0B;IAC1B,iCAA2B;IAC3B,2BAAqB;IACrB,uBAAiB;IAEjB;;OAEG;IACH,kCAA6B;IAC7B,kBAAmB;IACnB,iCAAgC;IAChC,mBAAkB;IAElB,4BAA0B;IAC1B,wBAAkB;IAElB;;OAEG;IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BC;IACD;;;MAGC;IACD,aAAO;IACP,uBAAiB;IACjB,wBAAkB;IAKlB;;;OAGG;IACH,mCAAmB;IACnB,+BAAyB;IACzB,+BAAyB;IAEzB,yBAAsB;IACtB,uBAAoB;IACpB,4BAAyB;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2FC;IA6FD;;;;;;;OAOG;IACH,yBAaC;IAEF;;;;;;;;QAQI;IACH,uBAGC;IAGD;;;;OAIG;IACH,qBAQC;IAEF,mBAkBE;IAED,qCAaC;IAED,gCASC;IAED,4BAYC;IAED,iCAOC;IAED,4BAGC;IAED,0BAMC;IAED,2BAUC;IAED,wBAkCC;IAED,4CAiBC;IAID,iCAIC;IAED,uBAWC;IAED;;;OAGG;IACH,4BAYC;IAED,qCASC;IAED,sCAEC;IAED;;;OAGG;IACH,6CAGC;IAGD,iBAEC;IAGD,0BASC;IAGD,gCA4CC;IAED,oDA8BC;IAED,6BAIC;IAED,yBAuCC;IAED,kCAIC;IAED,8BAGC;IAED,gDAiCC;IAED;;;;WAIO;IACP,4CAKC;IAED,8BAmDC;IAED,6CA8EC;IAGD,qCAMC;IAED,6BA8CC;IAED,6BAEC;IAGD,uBAIC;IAED,+CAQC;IAED,mEAkCC;IAGD,mCA2EC;IAED,uDAEC;IAED,kCAQC;CAEJ;2CAllC0C,qBAAqB"} \ No newline at end of file +{"version":3,"file":"externalsources.d.ts","sourceRoot":"","sources":["externalsources.js"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/plugins/externalsources.js b/plugins/externalsources.js index 00af7f2..23cf2ea 100644 --- a/plugins/externalsources.js +++ b/plugins/externalsources.js @@ -6,7 +6,7 @@ import file_types from "../utils/filetypes.js"; export default class ExternalSource { _custupInnerContainer callbackFn - standalone_mode + standalone_mode // not implemented yet /** * @private @param {HTMLDivElement} container_ui_container @@ -57,7 +57,6 @@ export default class ExternalSource { googleDrivePickerInited = false; gisInited = false; - dropboxInitialized = false dropboxUIContainer /** @@ -105,10 +104,15 @@ export default class ExternalSource { /** * @private @param {HTMLDivElement} dalleOuterContainer - * @public @param {HTMLDivElement} dalleInitialPageContainer */ dalleOuterContainer + /** + * @public @param {HTMLDivElement} dalleInitialPageContainer + */ dalleInitialPageContainer + /** + * @public @param {HTMLDivElement} dallePreviewPageContainer + */ dallePreviewPageContainer dalleResponseData = [] @@ -293,7 +297,11 @@ export default class ExternalSource { } } - this.setElementMediaQuery = setElementMediaQuery + this.setElementMediaQuery = setElementMediaQuery; + + if (document.querySelector('._custup_external_sources_container') != null) { + document.querySelector('._custup_external_sources_container').remove() + } this.initialize(); @@ -434,7 +442,7 @@ export default class ExternalSource { this._custupInnerContainer.append(this.container_ui_container) } - destroyContainerUI () { + destroyContainerUI (silent=false) { if (this.source_type == 'dalle') { this.resetDalleData() } @@ -443,7 +451,7 @@ export default class ExternalSource { this.custup_close_btn.onclick = () => null; this.custup_close_btn.style.display = 'none'; } - this.onclose?.(); + !silent && this.onclose?.(); } makeURLSourceUi () { @@ -501,16 +509,19 @@ export default class ExternalSource { _class.URL_source_button.disabled = false } - + dropboxIsInitialized () { + return document.querySelector('[src*="https://www.dropbox.com/static/api/"]') != null + } handleAddFileFromDropbox () { - if (this.dropboxInitialized == false) { + if (this.dropboxIsInitialized() == false) { this.loadDropboxPickerScript() + }else{ + this.addDropboxToUI() } } addDropboxToUI () { - this.dropboxInitialized = true; this.createContainerUI(); this.setupCustupCloseBtn(); this.allowed_mime_types.map(type => this.config_override.dropbox.options.extensions.push("."+type)) @@ -631,27 +642,35 @@ export default class ExternalSource { async googleDrivePickerCallback(data) { try { if (data.action === google.picker.Action.PICKED) { - this.custup_show_message_fn("Adding selected files to the UI, please wait it can take few minutes", "info") + const request_notif_msg = this.custup_show_message_fn("Adding selected files from Google Drive, please wait it may take up to few minutes", "info", true) const doc = data[google.picker.Response.DOCUMENTS]; - // const fileId = doc[google.picker.Document.ID]; - doc.map(async file => { - const res = await gapi.client.drive.files.get({ - 'fileId': file[google.picker.Document.ID], - 'fields': '*', - alt: 'media' - }); - // Convert binary string to ArrayBuffer - const arrayBuffer = new Uint8Array([...res.body].map((char) => char.charCodeAt(0))).buffer; - - // Create a Blob from the ArrayBuffer - const blob = new Blob([arrayBuffer], { type: file.mimeType }); - - // Use the resulting Blob as needed - - blob.name = file.name - this.callbackFn(blob) - }) this.destroyContainerUI() + + for await (const file of doc) { + try { + const res = await gapi.client.drive.files.get({ + 'fileId': file[google.picker.Document.ID], + 'fields': '*', + alt: 'media' + }); + // Convert binary string to ArrayBuffer + const arrayBuffer = new Uint8Array([...res.body].map((char) => char.charCodeAt(0))).buffer; + + // Create a Blob from the ArrayBuffer + const blob = new Blob([arrayBuffer], { type: file.mimeType }); + + // Use the resulting Blob as needed + + blob.name = file.name + this.callbackFn(blob) + } catch (error) { + this.custup_show_message_fn("An error occured, could not load file " + file.name + " from Google Drive", "error") + } + } + + request_notif_msg(); + this.custup_show_message_fn("All files has been loaded from Google Drive", "success") + } } catch (error) { @@ -660,10 +679,18 @@ export default class ExternalSource { } + isBoxScriptLoaded () { + return document.querySelector(`[src*="${this.config_override.box.authConfig.jsLink}"]`) != null + } + handleAddFileFromBox () { this.createContainerUI(); this.setupCustupCloseBtn(); - this.loadBoxPickerScript() + if (!this.isBoxScriptLoaded()) { + this.loadBoxPickerScript(); + }else{ + this.addBoxPickerToUI() + } } addBoxPickerToUI () { @@ -924,7 +951,7 @@ export default class ExternalSource { const dalleIntialPageButtonContainer = document.createElement('div') const dalleIntialPageTitleText = document.createElement('div') - dalleIntialPageTitleText.innerText = "Generate Image with OpenAI DALL.E" + dalleIntialPageTitleText.innerText = "Generate images with OpenAI DALL.E" const dalleIntialPageSearchInput = document.createElement('input') dalleIntialPageSearchInput.placeholder = "Type a prompt for DALL.E" diff --git a/src/all.min.css b/src/all.min.css index 4010ab3..743da6b 100644 --- a/src/all.min.css +++ b/src/all.min.css @@ -1 +1 @@ -.BareUIOuterContainer{box-shadow:none!important;border-radius:5px!important;border:0!important;height:200px!important}.BareUIInnerContainer{border:2px dashed #c6c5c5!important;border-radius:5px!important}.BareUIDefaultUIEl{width:100%!important;height:100%!important;box-shadow:none!important;border-radius:5px!important;background-color:rgba(245,244,244,.657)!important;border:0!important}.BareUIDefaultUIUploadIconsContainer{height:0;margin:0!important;padding:0!important}.BareUIDefaultUIInnerContent{color:gray;line-height:30px;pointer-events:none;display:flex;flex-direction:column;align-items:center}.BareUIDefaultUIInnerContentLastItem{font-size:85%}.BareUIDefaultUIInnerContentLastItem span{text-decoration:underline;color:#4270d3;font-weight:700}:root{--main-color:rgb(0, 150, 255);--border-radius:15px;--custup-gray:rgb(61, 61, 61)}div[class*="_custup_parent_container"]{width:550px;height:350px;border:1px solid #f5f5f5;border-radius:15px;background-color:#fff;box-shadow:2px 2px 15px 1px rgba(88,88,88,.2);overflow:hidden;display:flex;justify-content:space-between}div[class*="_custup_parent_container"] *{box-sizing:border-box}div[class*="_custup_parent_container"] ._custup_inner_parent_container{width:100%;height:100%;border-radius:15px;position:relative;display:flex;flex-shrink:0;flex-wrap:wrap;flex-direction:column;overflow:hidden;justify-content:center;align-items:center}div[class*="_custup_parent_container"] ._custup_sidebar_left_container{height:100%}div[class*="_custup_parent_container"] ._custup_sidebar_right_container{height:100%}div[class*="_custup_parent_container"] ._custup_scroll_bar_el{position:absolute;top:0;right:1px;width:6px;height:0%;border-radius:25px;background-color:rgba(160,160,160,.4);transition:height .4s linear}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_close_popup_btn{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:40px;z-index:+9;display:flex;justify-content:center;align-items:center;display:none;background:rgba(255,0,0,.685);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_close_popup_btn svg{width:60%;height:60%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container{width:95%;height:95%;border-radius:15px;align-self:center;justify-self:center;margin:auto;border:1px dashed var(--main-color);cursor:pointer;position:absolute;margin:auto;z-index:+3;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_sentence_container{width:80%;text-align:center;display:flex;align-items:center;justify-content:center;color:var(--custup-gray)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_icons_container{width:auto;padding:10px;margin-top:5px;z-index:+6;display:flex;align-items:center;flex-wrap:wrap;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_icons_container>div{margin:0 5px;width:30px;height:30px;padding:5px;background-color:#d3d3d3;border-radius:45px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_icons_container>div svg{width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools{position:absolute;height:25px;top:10px;left:30px;z-index:+3;display:flex;align-items:center;justify-content:center;border-radius:30px;box-shadow:1px 1px 10px 1px rgba(110,110,110,.2);user-select:none}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div{width:25px;height:25px;font-size:80%;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:rgba(245,245,245,.6)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:not(div:first-child,div:last-child):hover{background-color:#dcdcdc}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:not(div:first-child):active svg{width:75%;height:75%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div svg{width:70%;height:70%;transition:all .1s ease-in}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:first-child{border-radius:30px 0 0 30px;background-color:#f5f5f5;color:var(--main-color)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:last-child{border-radius:0 30px 30px 0;cursor:move}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:last-child:active{background-color:#f5f5f5}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container{width:100%;height:100%;position:relative;display:flex;position:relative;overflow:hidden;display:flex;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container{width:100%;height:auto;display:flex;justify-content:flex-start;align-items:center;flex-shrink:0;flex-wrap:wrap;flex-direction:row;padding:20px 10px 10px 10px;position:absolute;top:0;margin:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer{display:block;width:calc(33% - 10px);height:150px;margin-bottom:65px;position:relative;border-radius:10px;background-color:rgba(160,160,160,.4);margin-right:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:+2;display:flex;align-items:center;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container{width:100%;display:block}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress{width:100%;display:flex;justify-content:space-evenly;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress div[class*=upload-text]{font-size:55%;color:#3d3d3d;text-shadow:0 0 10px #fff}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress ._custup_upload_overlay_file_upload_progress{width:75%;background-color:#bdbdbd;height:5px;border-radius:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress ._custup_upload_overlay_file_upload_progress_inner{width:0%;background-color:var(--main-color);height:5px;border-radius:10px;transition:width .3s linear;box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_retry_upload_overlay_ui{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,177,177,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_retry_upload_overlay_ui ._custup_upload_retry_upload_button{width:25px;height:25px;border-radius:30px;background-color:#fff;box-shadow:0 2px 10px 1px rgba(10,10,10,.2);padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_retry_upload_overlay_ui ._custup_upload_retry_upload_button svg{width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui{margin-bottom:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;position:relative;width:100%;height:100%;border-radius:10px;transition:box-shadow .7s linear}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui ._custup_file_wrapper_el{width:100%;height:100%;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui ._custup_file_wrapper_el img{width:100%;height:100%;object-fit:cover}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui .other-file-el{display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui .other-file-el svg{width:80%;height:120px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_remove_file_btn{width:20px;height:20px;position:absolute;right:-10px;top:-10px;z-index:+2;border-radius:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_remove_file_btn svg{width:10px;height:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui{display:block}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_file_name{font-size:70%;width:100%;color:var(--custup-gray)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container{display:flex;align-items:center;justify-content:space-between}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_file_size{font-size:65%;color:#505050}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_bottom_tools_details_container{display:flex;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_bottom_tools_details_container div svg{width:15px;height:15px;background-color:#cdcdcd;border-radius:4px;margin-right:5px;padding:2px;cursor:pointer}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_bottom_tools_details_container div:last-child svg{margin-right:0}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container{position:absolute;width:80%;min-height:20px;background-color:rgba(205,205,205,.9);border-radius:20px;display:flex;margin:auto;z-index:+99999;align-items:center;transition:bottom .3s ease-out}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container.peakout-anim{bottom:-20px;animation:peakout .3s ease-in}@keyframes peakout{0%{bottom:30px}50%{bottom:40px}100%{bottom:-20px}}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container div:first-child{width:10%;border-radius:20px;display:flex;align-items:center;justify-content:center;height:100%;margin:0}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container div:first-child svg{width:15px;height:15px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container div:last-child{width:90%;height:100%;font-size:70%;padding:3px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_file_previewer{position:absolute;width:100%;height:100%;border-radius:15px;z-index:+3;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_file_previewer ._custup_file_previewer_inner_container{width:95%;height:95%;display:flex;align-items:center;justify-content:center;position:relative}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_file_previewer ._custup_file_previewer_inner_container img,video{width:100%;height:100%;object-fit:contain}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container{position:absolute;width:100%;height:100%;border-radius:15px;z-index:+3;display:block;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_main_container{width:100%;height:80%;border-bottom:1px solid #aaa;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_main_container video,img{width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container{width:100%;height:20%;display:flex;justify-content:center;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div{width:60px;height:60px;background-color:#0bf;border-radius:50%;cursor:pointer;transition:all .4s linear;margin:0 5px;padding:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div svg{width:60%;height:60%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div._custup_m_add_media{background-color:#67e085}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div._custup_m_remove_media_popup{background-color:#434443}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div:active{background-color:rgba(253,89,89,.959);width:50px;height:50px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container{position:absolute;width:100%;height:100%;border-radius:15px;z-index:+3;display:flex;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container{width:100%;display:flex;align-self:center;flex-shrink:0;flex-wrap:wrap}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container div{width:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2{display:block}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_input_container{width:100%;padding:10px;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_input_container input{width:80%;height:40px;border-radius:10px;border:1px solid #c2c2c2;outline:0;padding:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_button_container{width:100%;padding:10px;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_button_container button{padding:10px 25px;border-radius:10px;border:0;color:#fff;background:rgba(0,149,255,.658);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_button_container button:active{background:rgba(0,86,147,.658)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dropbox_ui_container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container{width:100%;height:100%;display:flex;flex-wrap:wrap}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container{width:100%;height:100%;display:flex;align-items:center;justify-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container{width:100%;height:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_search_container{display:flex;align-items:center;justify-content:center;padding:10px 5px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_search_container input{width:80%;padding:10px;border-radius:10px;outline:0;border:1px solid #d3d3d3}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_title_container{display:flex;align-items:center;justify-content:center;padding:10px 5px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_title_container div{font-size:120%;color:gray}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_button_container{display:flex;align-items:center;justify-content:center;padding:10px 5px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_button_container button{padding:10px 25px;border-radius:10px;border:0;color:#fff;background:rgba(0,149,255,.658);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_button_container button:active{background:rgba(1,139,237,.658)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container{width:100%;height:auto;display:flex;justify-content:space-evenly;align-items:center;flex-shrink:0;flex-wrap:wrap;flex-direction:row;padding:20px 10px 10px 10px;position:absolute;top:0;margin:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container{width:150px;height:150px;margin-bottom:5px;border-radius:10px;background-color:rgba(160,160,160,.4);overflow:hidden;position:relative}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container img{width:100%;height:100%;object-fit:cover}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container ._custup_check_mark{position:absolute;top:10px;right:10px;width:40px;height:40px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container ._custup_check_mark svg{width:80%;height:80%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container{width:100%;padding:5px;position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container button{outline:0;background-color:rgba(211,211,211,.857);border-radius:10px;border:none;margin:0 10px;padding:10px 20px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container button svg{width:15px;height:15px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container ._custup_external_sources_dalle_accept_files_btn{color:#fff;background:rgba(0,149,255,.658);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container ._custup_external_sources_dalle_accept_files_btn div{margin:0 5px;height:20px;width:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container ._custup_external_sources_dalle_accept_files_btn div svg{width:100%;height:100%}.w10perc{width:calc(12% - 5px)!important}.w14perc{width:calc(14% - 10px)!important}.w16perc{width:calc(16% - 5px)!important}.w25perc{width:calc(25% - 10px)!important}.w45perc{width:46%!important}.w100perc{width:100%!important}.flexSpaceBetween{justify-content:space-between!important}@media only screen and (max-width:768px){div[class*="_custup_parent_container"] ._custup_inner_container_wrapper_container_768{height:calc(100% - 50px)!important}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container{height:50px;width:100%}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:space-between;background-color:rgba(245,245,245,.6)}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div{width:100%;height:100%;font-size:90%;display:flex;align-items:center;justify-content:center;cursor:pointer}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:not(div:first-child):hover{background-color:#dcdcdc}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:not(div:first-child):active{background-color:#bfbfbf}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div svg{width:25px;transition:all .1s ease-in}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:first-child{background-color:#f5f5f5;color:var(--main-color)}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:last-child:active{background-color:#f5f5f5}}.DUIOuterContainer{box-shadow:none!important;border-radius:5px!important;border:0!important;height:auto!important}.DUIInnerContainerWrapper{height:200px!important;border-radius:5px!important}.DUIInnerContainer{border-radius:5px!important}.DUIIconContainer svg{width:25px;height:25px}.DUIDefaultUI{height:200px!important;top:0;width:100%!important;border-radius:5px!important;border-width:2px!important}.DUITextContainer1{font-weight:700}.DUIFooterContainer{height:auto!important;width:100%!important}.DUIFileContainer{width:100%;background-color:rgba(245,244,244,.657)!important;border-radius:12px;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:3px 10px}.DHIFilePreviewEl{width:10%;height:55px;display:flex;justify-content:center;align-items:center}.DHIFileInnerWrapper{width:40px;height:40px;display:flex;justify-content:center;align-items:center}.DHIFileInnerWrapper img{object-fit:contain}.DHIFileInnerWrapper svg{width:20px;height:20px;margin:auto}.DHIFileDetails{width:80%;display:block;margin-left:5px}.DHICloseBtnContainer{width:10%;display:flex;justify-content:center;align-items:center;cursor:pointer}.DHICloseBtnContainer svg{width:20px;height:20px}.DHITextContainer{display:flex;justify-content:space-between;width:100%;font-size:85%;color:#272794}.DHIFilesizeContainer{font-size:80%}.DHIUploadProgressContainer{width:100%;display:none;margin-top:5px}.DHIMainProgress{width:100%;height:7px;border-radius:50px;background-color:rgba(112,143,211,.331);border:0}.DHIProgressInner{background:#272794;border-radius:50px;width:20%;height:100%}.DUIBottomButtonContainer{width:100%;padding:10px 0;display:none;align-items:center;justify-content:space-around;flex-wrap:nowrap}.DUIBottomButtonContainer button{width:40%;padding:10px;outline:0;border:none;border-radius:12px;font-size:95%}.DUIUploadButton{background-color:#272794;color:#fff}.DUIUploadButton:active{background-color:#333392}.DHIRetryButton{background-color:red;color:#fff;text-align:center;padding:6px 12px;border-radius:15px;font-size:85%;cursor:pointer}.PPUIOuterContainer{box-shadow:none!important;width:350px!important;height:auto!important;border-radius:0!important;border:0!important}.PPUIDefaultUI{width:100%!important;height:100%!important;border-width:2px!important}.PPUIInnerContainer{border-radius:0!important}.PPUIInnerContainerWrapper{display:flex!important;align-items:center!important;justify-content:center!important;background-color:#e6e6e6;width:350px!important;height:350px!important;border-radius:15px!important}.PPUIFileUI{margin-bottom:0!important;border-radius:50%!important}.PPUIDefaultUIInnerIcon svg{width:60px;height:60px}.PPUIFileDisplayUI{display:flex!important;align-items:center!important;justify-content:center!important;height:100%!important;padding:10px!important}.PPUIFileUIOuter{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;background-color:transparent!important}.PPUIFooterContainer{width:100%!important}.PPUIFooterContainer .inner button{padding:10px;width:45%;margin-top:10px;font-size:95%;border:0;border-radius:5px;margin-bottom:10px;cursor:pointer}.PPUIButtonToolsContainer{width:100%;justify-content:space-around;display:flex;justify-content:space-around}.PPUIUploadBtn{background-color:#019901;color:#fff}.PPUIUploadBtn:active{background-color:#01bc01}.PPUIUploadBtn:hover{background-color:#01ac01}.RUIOuterContainer{box-shadow:none!important;border-radius:5px!important;border:1px solid #d3d3d3!important;height:200px!important}.RUIDefaultUIEl{width:100%!important;border:0!important;height:100%!important;box-shadow:none!important;border-radius:5px!important}.RUIDefaultUIUploadIconsContainer{height:0;margin:0!important;padding:0!important} \ No newline at end of file +.BareUIOuterContainer{box-shadow:none!important;border-radius:5px!important;border:0!important;height:200px!important}.BareUIInnerContainer{border:2px dashed #c6c5c5!important;border-radius:5px!important}.BareUIDefaultUIEl{width:100%!important;height:100%!important;box-shadow:none!important;border-radius:5px!important;background-color:rgba(245,244,244,.657)!important;border:0!important}.BareUIDefaultUIUploadIconsContainer{height:0;margin:0!important;padding:0!important}.BareUIDefaultUIInnerContent{color:gray;line-height:30px;pointer-events:none;display:flex;flex-direction:column;align-items:center}.BareUIDefaultUIInnerContentLastItem{font-size:85%}.BareUIDefaultUIInnerContentLastItem span{text-decoration:underline;color:#4270d3;font-weight:700}:root{--main-color:rgb(0, 150, 255);--border-radius:15px;--custup-gray:rgb(61, 61, 61)}div[class*="_custup_parent_container"]{width:550px;height:350px;border:1px solid #f5f5f5;border-radius:15px;background-color:#fff;box-shadow:2px 2px 15px 1px rgba(88,88,88,.2);overflow:hidden;display:flex;justify-content:space-between}div[class*="_custup_parent_container"] *{box-sizing:border-box}div[class*="_custup_parent_container"] ._custup_inner_parent_container{width:100%;height:100%;border-radius:15px;position:relative;display:flex;flex-shrink:0;flex-wrap:wrap;flex-direction:column;overflow:hidden;justify-content:center;align-items:center}div[class*="_custup_parent_container"] ._custup_sidebar_left_container{height:100%}div[class*="_custup_parent_container"] ._custup_sidebar_right_container{height:100%}div[class*="_custup_parent_container"] ._custup_scroll_bar_el{position:absolute;top:0;right:1px;width:6px;height:0%;border-radius:25px;background-color:rgba(160,160,160,.4);transition:height .4s linear}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_close_popup_btn{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:40px;z-index:+9;display:flex;justify-content:center;align-items:center;display:none;background:rgba(255,0,0,.685);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_close_popup_btn svg{width:60%;height:60%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container{width:95%;height:95%;border-radius:15px;align-self:center;justify-self:center;margin:auto;border:1px dashed var(--main-color);cursor:pointer;position:absolute;margin:auto;z-index:+3;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_sentence_container{width:80%;text-align:center;display:flex;align-items:center;justify-content:center;color:var(--custup-gray)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_icons_container{width:auto;padding:10px;margin-top:5px;z-index:+6;display:flex;align-items:center;flex-wrap:wrap;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_icons_container>div{margin:0 5px;width:30px;height:30px;padding:5px;background-color:#d3d3d3;border-radius:45px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_default_ui_container ._custup_default_ui_inner_container ._custup_default_ui_upload_icons_container>div svg{width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools{position:absolute;height:25px;top:10px;left:30px;z-index:+3;display:flex;align-items:center;justify-content:center;border-radius:30px;box-shadow:1px 1px 10px 1px rgba(110,110,110,.2);user-select:none}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div{width:25px;height:25px;font-size:80%;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:rgba(245,245,245,.6)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:not(div:first-child,div:last-child):hover{background-color:#dcdcdc}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:not(div:first-child):active svg{width:75%;height:75%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div svg{width:70%;height:70%;transition:all .1s ease-in}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:first-child{border-radius:30px 0 0 30px;background-color:#f5f5f5;color:var(--main-color)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:last-child{border-radius:0 30px 30px 0;cursor:move}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_ui_tools div:last-child:active{background-color:#f5f5f5}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container{width:100%;height:100%;position:relative;display:flex;position:relative;overflow:hidden;display:flex;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container{width:100%;height:auto;display:flex;justify-content:flex-start;align-items:center;flex-shrink:0;flex-wrap:wrap;flex-direction:row;padding:20px 10px 10px 10px;position:absolute;top:0;margin:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer{display:block;width:calc(33% - 10px);height:150px;margin-bottom:65px;position:relative;border-radius:10px;background-color:rgba(160,160,160,.4);margin-right:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:+2;display:flex;align-items:center;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container{width:100%;display:block}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress{width:100%;display:flex;justify-content:space-evenly;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress div[class*=upload-text]{font-size:55%;color:#3d3d3d;text-shadow:0 0 10px #fff}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress ._custup_upload_overlay_file_upload_progress{width:75%;background-color:#bdbdbd;height:5px;border-radius:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_overlay_container ._custup_upload_overlay_inner_container ._custup_upload_overlay_upload_progress ._custup_upload_overlay_file_upload_progress_inner{width:0%;background-color:var(--main-color);height:5px;border-radius:10px;transition:width .3s linear;box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_retry_upload_overlay_ui{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,177,177,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_retry_upload_overlay_ui ._custup_upload_retry_upload_button{width:25px;height:25px;border-radius:30px;background-color:#fff;box-shadow:0 2px 10px 1px rgba(10,10,10,.2);padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_upload_retry_upload_overlay_ui ._custup_upload_retry_upload_button svg{width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui{margin-bottom:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;position:relative;width:100%;height:100%;border-radius:10px;transition:box-shadow .7s linear}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui ._custup_file_wrapper_el{width:100%;height:100%;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui ._custup_file_wrapper_el img{width:100%;height:100%;object-fit:cover}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui .other-file-el{display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_ui .other-file-el svg{width:80%;height:120px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_remove_file_btn{width:20px;height:20px;position:absolute;right:-10px;top:-10px;z-index:+2;border-radius:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_remove_file_btn svg{width:10px;height:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui{display:block}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_file_name{font-size:70%;width:100%;color:var(--custup-gray)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container{display:flex;align-items:center;justify-content:space-between}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_file_size{font-size:65%;color:#505050}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_bottom_tools_details_container{display:flex;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_bottom_tools_details_container div svg{width:15px;height:15px;background-color:#cdcdcd;border-radius:4px;margin-right:5px;padding:2px;cursor:pointer}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_inner_container_wrapper_container ._custup_file_display_ui_container ._custup_file_ui_outer ._custup_file_details_ui ._custup_file_detail_bottom_details_container ._custup_file_detail_bottom_tools_details_container div:last-child svg{margin-right:0}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container{position:absolute;width:80%;min-height:20px;background-color:rgba(205,205,205,.9);border-radius:20px;display:flex;margin:auto;z-index:+99999;align-items:center;transition:bottom .3s ease-out}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container.peakout-anim{bottom:-20px;animation:peakout .3s ease-in}@keyframes peakout{0%{bottom:30px}50%{bottom:40px}100%{bottom:-20px}}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container div:first-child{width:10%;border-radius:20px;display:flex;align-items:center;justify-content:center;height:100%;margin:0}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container div:first-child svg{width:15px;height:15px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_message_container div:last-child{width:90%;height:100%;font-size:70%;padding:3px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_file_previewer{position:absolute;width:100%;height:100%;border-radius:15px;z-index:+3;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_file_previewer ._custup_file_previewer_inner_container{width:95%;height:95%;display:flex;align-items:center;justify-content:center;position:relative}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_file_previewer ._custup_file_previewer_inner_container img,video{width:100%;height:100%;object-fit:contain}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container{position:absolute;width:100%;height:100%;border-radius:15px;z-index:+3;display:block;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_main_container{width:100%;height:80%;border-bottom:1px solid #aaa;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_main_container video,img{width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container{width:100%;height:20%;display:flex;justify-content:center;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div{width:60px;height:60px;background-color:#0bf;border-radius:50%;cursor:pointer;transition:all .4s linear;margin:0 5px;padding:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div svg{width:60%;height:60%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div._custup_m_add_media{background-color:#67e085}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div._custup_m_remove_media_popup{background-color:#434443}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_media_capture_container ._custup_media_capture_bottom_tools_container div:active{background-color:rgba(253,89,89,.959);width:50px;height:50px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container{position:absolute;width:100%;height:100%;border-radius:15px;z-index:+3;display:flex;background:rgba(255,255,255,.2);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container{width:100%;display:flex;align-self:center;flex-shrink:0;flex-wrap:wrap}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container div{width:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2{display:block}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_input_container{width:100%;padding:10px;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_input_container input{width:80%;height:40px;border-radius:10px;border:1px solid #c2c2c2;outline:0;padding:10px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_button_container{width:100%;padding:10px;display:flex;align-items:center;justify-content:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_button_container button{padding:10px 25px;border-radius:10px;border:0;color:#fff;background:rgba(0,149,255,.658);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_url_source_container ._custup_external_sources_url_source_inner_container_2 ._custup_external_sources_url_source_button_container button:active{background:rgba(0,86,147,.658)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dropbox_ui_container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container{width:100%;height:100%;display:flex;flex-wrap:wrap}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container{width:100%;height:100%;display:flex;align-items:center;justify-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container{width:100%;height:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_search_container{display:flex;align-items:center;justify-content:center;padding:10px 5px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_search_container input{width:80%;padding:10px;border-radius:10px;outline:0;border:1px solid #d3d3d3}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_title_container{display:flex;align-items:center;justify-content:center;padding:10px 5px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_title_container div{font-size:120%;color:gray}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_button_container{display:flex;align-items:center;justify-content:center;padding:10px 5px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_button_container button{padding:10px 25px;border-radius:10px;border:0;color:#fff;background:rgba(0,149,255,.658);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_initial_page_container ._custup_external_sources_dalle_initial_page_content_container ._custup_external_sources_dalle_initial_page_button_container button:active{background:rgba(1,139,237,.658)}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container{width:100%;height:auto;display:flex;justify-content:space-evenly;align-items:center;flex-shrink:0;flex-wrap:wrap;flex-direction:row;padding:20px 10px 10px 10px;position:absolute;top:0;margin:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container{width:150px;height:150px;margin-bottom:5px;border-radius:10px;background-color:rgba(160,160,160,.4);overflow:hidden;position:relative}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container img{width:100%;height:100%;object-fit:cover}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container ._custup_check_mark{position:absolute;top:10px;right:10px;width:40px;height:40px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_preview_page_container ._custup_external_sources_dalle_image_preview_container ._custup_check_mark svg{width:80%;height:80%}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container{width:100%;padding:5px;position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container button{outline:0;background-color:rgba(211,211,211,.857);border-radius:10px;border:none;margin:0 10px;padding:10px 20px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container button svg{width:15px;height:15px}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container ._custup_external_sources_dalle_accept_files_btn{color:#fff;background:rgba(0,149,255,.658);box-shadow:0 0 6px rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container ._custup_external_sources_dalle_accept_files_btn div{margin:0 5px;height:20px;width:auto}div[class*="_custup_parent_container"] ._custup_inner_parent_container ._custup_external_sources_container ._custup_external_sources_dalle_outer_container ._custup_external_sources_dalle_utils_buttons_container ._custup_external_sources_dalle_accept_files_btn div svg{width:100%;height:100%}.w10perc{width:calc(12% - 5px)!important}.w14perc{width:calc(14% - 10px)!important}.w16perc{width:calc(16% - 5px)!important}.w25perc{width:calc(25% - 10px)!important}.w45perc{width:46%!important}.w100perc{width:100%!important}.flexSpaceBetween{justify-content:space-between!important}@media only screen and (max-width:768px){div[class*="_custup_parent_container"] ._custup_inner_container_wrapper_container_768{height:calc(100% - 50px)!important}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container{height:50px;width:100%}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:space-between;background-color:rgba(245,245,245,.6)}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div{width:100%;height:100%;font-size:90%;display:flex;align-items:center;justify-content:center;cursor:pointer}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:not(div:first-child):hover{background-color:#dcdcdc}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:not(div:first-child):active{background-color:#bfbfbf}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div svg{width:25px;transition:all .1s ease-in}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:first-child{background-color:#f5f5f5;color:var(--main-color)}div[class*="_custup_parent_container"] ._custup_mobile_768_screen_tools_container .inner div:last-child:active{background-color:#f5f5f5}}.DUIOuterContainer{box-shadow:none!important;border-radius:5px!important;border:0!important;height:auto!important}.DUIInnerContainerWrapper{height:200px!important;border-radius:5px!important}.DUIInnerContainer{border-radius:5px!important}.DUIIconContainer svg{width:25px;height:25px}.DUIDefaultUI{height:200px!important;top:0;width:100%!important;border-radius:5px!important;border-width:2px!important}.DUITextContainer1{font-weight:700}.DUIFooterContainer{height:auto!important;width:100%!important}.DUIFileContainer{width:100%;background-color:rgba(245,244,244,.657)!important;border-radius:12px;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:3px 10px}.DHIFilePreviewEl{width:10%;height:55px;display:flex;justify-content:center;align-items:center}.DHIFileInnerWrapper{width:40px;height:40px;display:flex;justify-content:center;align-items:center}.DHIFileInnerWrapper img{object-fit:contain}.DHIFileInnerWrapper svg{width:20px;height:20px;margin:auto}.DHIFileDetails{width:80%;display:block;margin-left:5px}.DHICloseBtnContainer{width:10%;display:flex;justify-content:center;align-items:center;cursor:pointer}.DHICloseBtnContainer svg{width:20px;height:20px}.DHITextContainer{display:flex;justify-content:space-between;width:100%;font-size:85%;color:#272794}.DHIFilesizeContainer{font-size:80%}.DHIUploadProgressContainer{width:100%;display:none;margin-top:5px}.DHIMainProgress{width:100%;height:7px;border-radius:50px;background-color:rgba(112,143,211,.331);border:0}.DHIProgressInner{background:#272794;border-radius:50px;width:20%;height:100%}.DUIBottomButtonContainer{width:100%;padding:10px 0;display:none;align-items:center;justify-content:space-around;flex-wrap:nowrap}.DUIBottomButtonContainer button{width:40%;padding:10px;outline:0;border:none;border-radius:12px;font-size:95%}.DUIUploadButton{background-color:#272794;color:#fff}.DUIUploadButton:active{background-color:#333392}.DHIRetryButton{background-color:red;color:#fff;text-align:center;padding:6px 12px;border-radius:15px;font-size:85%;cursor:pointer}.PPUIOuterContainer{box-shadow:none!important;width:350px!important;height:auto!important;border-radius:0!important;border:0!important}.PPUIDefaultUI{width:100%!important;height:100%!important;border-width:2px!important}.PPUIInnerContainer{border-radius:0!important}.PPUIInnerContainerWrapper{display:flex!important;align-items:center!important;justify-content:center!important;background-color:#e6e6e6;width:350px!important;height:350px!important;border-radius:15px!important}.PPUIFileUI{margin-bottom:0!important;border-radius:50%!important}.PPUIDefaultUIInnerIcon svg{width:60px;height:60px}.PPUIFileDisplayUI{display:flex!important;align-items:center!important;justify-content:center!important;height:100%!important;padding:10px!important}.PPUIFileUIOuter{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;background-color:transparent!important}.PPUIFooterContainer{width:100%!important}.PPUIFooterContainer .inner button{padding:10px;width:45%;margin-top:10px;font-size:95%;border:0;border-radius:5px;margin-bottom:10px;cursor:pointer}.PPUIButtonToolsContainer{width:100%;justify-content:space-around;display:flex;justify-content:space-around}.PPUIUploadBtn{background-color:#019901;color:#fff}.PPUIUploadBtn:active{background-color:#01bc01}.PPUIUploadBtn:hover{background-color:#01ac01}.RUIOuterContainer{box-shadow:none!important;border-radius:5px!important;border:1px solid #d3d3d3!important;height:200px!important}.RUIDefaultUIEl{width:100%!important;border:0!important;height:100%!important;box-shadow:none!important;border-radius:5px!important}.RUIDefaultUIUploadIconsContainer{height:0;margin:0!important;padding:0!important}:root{--very-light-gray:rgb(239, 239, 239);--slightly-dark-gray:rgb(229, 229, 229);--header-container-height:var(--height, 60px)!important;--footer-container-height:var(--height, 0px)!important;--eui-border-color:rgb(217, 217, 217);--eui-blue:rgb(0, 106, 255)}.EUIOuterContainer{box-shadow:none!important;border-radius:1px!important;width:750px!important;height:500px!important}.EUIOuterContainer *{font-weight:300!important}.EUIInnerContainer{background-color:var(--very-light-gray)!important;border-radius:1px!important;width:calc(100% - 60px)!important;justify-content:flex-end!important}.EUIHeaderContainer{width:100%!important;height:60px!important;background-color:var(--very-light-gray)!important;position:relative!important;z-index:+6}.EUIFooterContainer,.EUIFooterContainer .inner{width:100%!important;display:flex!important;justify-content:space-between;align-items:flex-start!important}.EUIFooterContainer .inner{border-top:1px solid var(--eui-border-color);padding:0 6px!important}.EUIFooterContainer .inner button{background-color:var(--eui-blue);padding:12px 25px;outline:0;border:0;margin:6px 0;color:#fff;border-radius:4px;cursor:pointer;transition:background-color .2s linear,color .2s linear}.EUIFooterContainer .inner button:hover{background-color:rgba(0,106,255,.858)}.EUIFooterContainer .inner div:first-child button{background-color:var(--very-light-gray)!important;border:1px solid var(--eui-border-color)!important;color:#555!important}.EUIFooterContainer .inner div:last-child button:disabled{background-color:rgba(144,187,246,.858)!important;cursor:not-allowed!important}.EUIFooterContainer .inner div:first-child button:hover{background-color:rgba(239,239,239,.841);color:#555555cb!important}.EUIDefaultUI{height:calc(100% - (var(--header-container-height) + var(--footer-container-height)))!important;justify-self:flex-start!important;width:100%!important;border-radius:0!important;box-shadow:none!important;border:none!important;background-color:transparent!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:var(--very-light-gray)!important;z-index:+4}.EUIInnerContainerWrapper{height:calc(100% - (var(--header-container-height) + var(--footer-container-height)))!important;align-items:flex-start!important;justify-content:start!important;box-shadow:none!important;flex-direction:column!important;padding-top:10px!important}.EUISidebarLeftContainer{width:60px!important;background-color:var(--slightly-dark-gray)!important;height:100%!important;display:flex!important;flex-direction:column!important;align-items:center;overflow-y:auto}.EUISidebarLeftContainer div{width:100%;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer}.EUISidebarLeftContainer div:hover{background-color:var(--very-light-gray)}.EUISidebarLeftContainer div[data-custup-icon-active]{background-color:var(--very-light-gray)!important}.EUISidebarLeftContainer div svg{width:20px;height:20px}.EUIDefaultUIInnerContentEl{width:90%!important;height:90%!important;border:1px dashed gray!important;background-color:var(--very-light-gray)!important;transition:background-color .2s linear}.EUIDefaultUIInnerContentEl:hover{background-color:#fff!important}.EUIDefaultUIInnerContentEl:hover .EUIFileTipIconContainer svg path{fill:rgb(49,116,250)!important;stroke-width:0!important}.EUIExternalSourceContainer,.EUIFilePreviewer,.EUIMediaSourceContainer{background-color:var(--very-light-gray)!important;border-radius:0!important;z-index:5!important}.EUIFilePreviewer{z-index:+6!important}.EUIClosePopupBtn{background-color:transparent!important;box-shadow:none!important;left:auto!important;right:10px!important;cursor:pointer}.EUIHeaderTitleBar{width:100%;display:flex;justify-content:center;align-items:center;min-height:36px;font-size:85%}.EUIHeaderTitleBar svg{width:25px;height:25px}.EUIDefaultUIFileSelectTip{height:auto!important;display:flex!important;flex-direction:column;align-items:center!important}.EUIDefaultUIFileSelectTip div:not(:last-child){margin-bottom:15px}.EUIFileTipIconContainer{width:100%;display:flex!important;justify-content:center!important}.EUIFileTipIconContainer svg{width:70px}.EUIFileTipIconContainer svg path{fill:rgb(181,181,181)!important;stroke-width:0!important}.EUIFileTipText1{font-size:120%;font-weight:400}.EUIFileTipText2{color:gray;font-size:90%}.EUIFilterBoxContainer{width:100%;padding:5px 10px;display:none;justify-content:flex-end}.EUIFilterBoxInputWrapper{width:25%;position:relative;display:flex;align-items:center;justify-content:center}.EUIFilterBoxInputWrapper svg{position:absolute;left:7px;top:12px;width:15px;height:15px;z-index:1;margin:0!important;padding:0!important;align-self:center!important}.EUIFilterBox{width:100%;height:35px;border:1px solid #d3d3d3;outline:0;padding-left:25px;text-align:center;color:gray;border-radius:2px}.EUIFilterBox::placeholder{color:#9e9e9e}.EUIFileStateInfoContainer{border-top:1px solid var(--eui-border-color);padding-top:15px;margin-top:5px;display:none;align-items:flex-end;padding-left:10px}.EUIFileStateInfoContainer div{text-transform:uppercase;color:#555;font-size:75%;font-weight:400!important}.EUIFileDisplayUI{flex-direction:column!important}.EUIFileUIOuterContainer{display:flex!important;width:100%!important;flex-direction:row!important;padding:5px!important;align-items:center!important;justify-content:space-evenly!important;border-radius:0!important;margin-bottom:10px!important;height:auto!important;background-color:#fff!important;position:relative!important}.EUIFileUIMainContainer{width:38px!important;height:38px!important;border-radius:50px!important;margin:0!important}.EUIFileDetailsContainer{display:flex;align-items:center;justify-content:space-between;width:calc(95% - 6px);margin-left:6px}.EUIFilenameSizeContainer div:first-child{color:gray;font-size:85%;margin-bottom:6px}.EUIFilenameSizeContainer div:last-child{color:#a9a9a9;font-size:75%}.EUIFileDisplayToolsContainer{display:flex;align-items:center}.EUIFileDisplayToolsContainer div:not(:last-child){margin-right:10px}.EUIFileDisplayToolsContainer div svg{width:15px;height:15px;cursor:pointer}.EUIFileDisplayToolsContainer div svg path{transition:fill .4s linear;fill:rgb(114,114,114)}.EUIFileDisplayToolsContainer div:hover svg path{fill:darkgray}.EUIProgressIndicatorContainer{position:absolute;bottom:0;height:2px;width:100%}.EUIProgressIndicatorContainer div{width:0%;background-color:var(--eui-blue);height:100%}@media only screen and (max-width:768px),(orientation:landscape) and (max-width:768px){:root{--header-container-height:var(--height, 30px)!important}.EUIOuterContainer{width:100%!important}.EUIHeaderContainer{height:30px!important}.EUIFilterBoxInputWrapper{width:90%!important}.EUIInnerContainer{width:100%!important}.EUIDefaultUIUploadSentenceContainer{display:none!important}.EUIDefaultUIInnerContentEl{align-items:flex-start!important;border:none!important;justify-content:flex-start!important;width:100%!important;height:100%!important;padding:0!important;position:absolute!important}.EUIDefaultUIInnerContentEl:hover{background-color:unset!important}.EUIDefaultUIInnerContentEl div.file-source{display:flex;align-items:center;padding:10px;width:100%}.EUIDefaultUIInnerContentEl div.file-source:hover div,div.file-source:active div{color:var(--eui-blue)}.EUIDefaultUIInnerContentEl div svg{width:30px;height:30px;margin-right:15px;background-color:#fff;padding:6px;border-radius:50%}} \ No newline at end of file diff --git a/src/custup.d.ts b/src/custup.d.ts index da2d39f..50df470 100644 --- a/src/custup.d.ts +++ b/src/custup.d.ts @@ -11,7 +11,7 @@ export default class CustUp extends CustUpCore { * autoInitialize?: boolean; * show_file_remove_btn?: boolean; * show_file_details_container?: boolean; - * file_source_icons?: {[key in 'video_camera' | 'capture_image' | 'record_audio' | 'record_screen' | 'url_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source']: any}; + * file_source_icons: {[key in 'video_camera' | 'capture_image' | 'record_audio' | 'record_screen' | 'url_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source']: any}; * css_font_link?: string; * css_font_name?: string; * external_source_style_override?: typeof external_sources_ui_styles; @@ -19,22 +19,22 @@ export default class CustUp extends CustUpCore { * default_styles_override?: typeof ui_styles; * persist_styles_override_across_instances?: boolean; * default_icons_override?: typeof icons; - * allowed_file_types?: (keyof file_types)[]; - * targetRootElement?: string; - * maxNumberOfFiles?: number; - * minNumberOfFiles?: number; - * minimumAllowedFileSize?: number; - * maximumAllowedFileSize?: number; - * ui_type?: 'default' | 'resumeUploaderUI' | 'bare' | 'detached' | 'profilePicture'; - * display_ui_tools?: boolean; - * show_ui_tools_on_mobile_devices?: boolean; - * disable_drag_n_drop?: boolean; - * disable_select_files_from_device?: boolean; - * allowed_tools?: Array<'tools_dragger' | 'upload' | 'add_file' | 'added_files_count' | 'clear_files'>; - * position_container?: "before" | "after" | "overwrite" | {"beforeEl": string}; - * file_preview_animation_types?: Array<'slideInRight' | 'slideInTop' | 'slideInLeft' | 'slideInBottom' | 'zoomIn' | 'fadeIn'>; - * allowMultipleUpload?: boolean; - * file_upload?: { + * allowed_file_types: (keyof file_types)[]; + * targetRootElement: string; + * maxNumberOfFiles: number; + * minNumberOfFiles: number; + * minimumAllowedFileSize: number; + * maximumAllowedFileSize: number; + * ui_type: 'default' | 'resumeUploaderUI' | 'bare' | 'detached' | 'profilePicture'; + * display_ui_tools: boolean; + * show_ui_tools_on_mobile_devices: boolean; + * disable_drag_n_drop: boolean; + * disable_select_files_from_device: boolean; + * allowed_tools: Array<'tools_dragger' | 'upload' | 'add_file' | 'added_files_count' | 'clear_files'>; + * position_container: "before" | "after" | "overwrite" | {"beforeEl": string}; + * file_preview_animation_types: Array<'slideInRight' | 'slideInTop' | 'slideInLeft' | 'slideInBottom' | 'zoomIn' | 'fadeIn'>; + * allowMultipleUpload: boolean; + * file_upload: { * endpoint_url: string; * files_field_name: string; * form_field?: HTMLFormElement | string; @@ -43,11 +43,15 @@ export default class CustUp extends CustUpCore { * headers: {}; * configs: {}; * }; + * chunk_size: number; + * should_chunk: boolean; * }; - * allowed_sources?: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + * allowed_sources: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + * display_file_sources: boolean; * upload_automatically?: boolean; * show_upload_error_overlay?: boolean; - * file_source_config?: { + * show_upload_progress_bar?: boolean; + * file_source_config: { * video_recording: { * video_only: boolean; * show_image_capture_btn: boolean; @@ -112,13 +116,16 @@ export default class CustUp extends CustUpCore { * quality: "standard" | "hd"; * }; * }; - * default_files?: Array<{file: string | File | Blob; isUploadable: boolean; headers: any}>; - * count_default_files?: boolean; - * instance_attach?: Array; - * single_upload?: boolean; - * persist_files?: boolean; - * persist_type?: 'soft' | 'hard'; - * alert_timeout_time?: number; + * default_files: Array<{file: string | File | Blob; isUploadable: boolean; headers: any}>; + * count_default_files: boolean; + * instance_attach: Array; + * single_upload: boolean; + * persist_files: boolean; + * persist_type: 'soft' | 'hard'; + * alert_timeout_time: number; + * messages: { + * timeout: number; + * }; * }} options * */ @@ -131,7 +138,7 @@ export default class CustUp extends CustUpCore { autoInitialize?: boolean | undefined; show_file_remove_btn?: boolean | undefined; show_file_details_container?: boolean | undefined; - file_source_icons?: { + file_source_icons: { video_camera: any; capture_image: any; record_audio: any; @@ -141,7 +148,7 @@ export default class CustUp extends CustUpCore { dropbox_source: any; box_source: any; openai_dalle_source: any; - } | undefined; + }; css_font_link?: string | undefined; css_font_name?: string | undefined; external_source_style_override?: any; @@ -149,37 +156,1031 @@ export default class CustUp extends CustUpCore { default_styles_override?: any; persist_styles_override_across_instances?: boolean | undefined; default_icons_override?: any; - allowed_file_types?: ("123" | "3dml" | "3ds" | "3g2" | "3gp" | "7z" | "aab" | "aac" | "aam" | "aas" | "abw" | "ac" | "acc" | "ace" | "acu" | "acutc" | "adp" | "aep" | "afm" | "afp" | "ahead" | "ai" | "aif" | "aifc" | "aiff" | "air" | "ait" | "ami" | "apk" | "appcache" | "application" | "apr" | "arc" | "asc" | "asf" | "asm" | "aso" | "asx" | "atc" | "atom" | "atomcat" | "atomsvc" | "atx" | "au" | "avi" | "aw" | "azf" | "azs" | "azw" | "bat" | "bcpio" | "bdf" | "bdm" | "bed" | "bh2" | "bin" | "blb" | "blorb" | "bmi" | "bmp" | "book" | "box" | "boz" | "bpk" | "btif" | "bz" | "bz2" | "c" | "c11amc" | "c11amz" | "c4d" | "c4f" | "c4g" | "c4p" | "c4u" | "cab" | "caf" | "cap" | "car" | "cat" | "cb7" | "cba" | "cbr" | "cbt" | "cbz" | "cc" | "cct" | "ccxml" | "cdbcmsg" | "cdf" | "cdkey" | "cdmia" | "cdmic" | "cdmid" | "cdmio" | "cdmiq" | "cdx" | "cdxml" | "cdy" | "cer" | "cfs" | "cgm" | "chat" | "chm" | "chrt" | "cif" | "cii" | "cil" | "cla" | "class" | "clkk" | "clkp" | "clkt" | "clkw" | "clkx" | "clp" | "cmc" | "cmdf" | "cml" | "cmp" | "cmx" | "cod" | "com" | "conf" | "cpio" | "cpp" | "cpt" | "crd" | "crl" | "crt" | "cryptonote" | "csh" | "csml" | "csp" | "css" | "cst" | "csv" | "cu" | "curl" | "cww" | "cxt" | "cxx" | "dae" | "daf" | "dart" | "dataless" | "davmount" | "dbk" | "dcr" | "dcurl" | "dd2" | "ddd" | "deb" | "def" | "deploy" | "der" | "dfac" | "dgc" | "dic" | "dir" | "dis" | "dist" | "distz" | "djv" | "djvu" | "dll" | "dmg" | "dmp" | "dms" | "dna" | "doc" | "docm" | "docx" | "dot" | "dotm" | "dotx" | "dp" | "dpg" | "dra" | "dsc" | "dssc" | "dtb" | "dtd" | "dts" | "dtshd" | "dump" | "dvb" | "dvi" | "dwf" | "dwg" | "dxf" | "dxp" | "dxr" | "ecelp4800" | "ecelp7470" | "ecelp9600" | "ecma" | "edm" | "edx" | "efif" | "ei6" | "elc" | "emf" | "eml" | "emma" | "emz" | "eol" | "eot" | "eps" | "epub" | "es3" | "esa" | "esf" | "et3" | "etx" | "eva" | "evy" | "exe" | "exi" | "ext" | "ez" | "ez2" | "ez3" | "f" | "f4v" | "f77" | "f90" | "fbs" | "fcdt" | "fcs" | "fdf" | "fe_launch" | "fg5" | "fgd" | "fh" | "fh4" | "fh5" | "fh7" | "fhc" | "fig" | "flac" | "fli" | "flo" | "flv" | "flw" | "flx" | "fly" | "fm" | "fnc" | "for" | "fpx" | "frame" | "fsc" | "fst" | "ftc" | "fti" | "fvt" | "fxp" | "fxpl" | "fzs" | "g2w" | "g3" | "g3w" | "gac" | "gam" | "gbr" | "gca" | "gdl" | "geo" | "gex" | "ggb" | "ggt" | "ghf" | "gif" | "gim" | "gml" | "gmx" | "gnumeric" | "gph" | "gpx" | "gqf" | "gqs" | "gram" | "gramps" | "gre" | "grv" | "grxml" | "gsf" | "gtar" | "gtm" | "gtw" | "gv" | "gxf" | "gxt" | "h" | "h261" | "h263" | "h264" | "hal" | "hbci" | "hdf" | "hh" | "hlp" | "hpgl" | "hpid" | "hps" | "hqx" | "htke" | "htm" | "html" | "hvd" | "hvp" | "hvs" | "i2g" | "icc" | "ice" | "icm" | "ico" | "ics" | "ief" | "ifb" | "ifm" | "iges" | "igl" | "igm" | "igs" | "igx" | "iif" | "imp" | "ims" | "in" | "ink" | "inkml" | "install" | "iota" | "ipfix" | "ipk" | "irm" | "irp" | "iso" | "itp" | "ivp" | "ivu" | "jad" | "jam" | "jar" | "java" | "javascript" | "jisp" | "jlt" | "jnlp" | "joda" | "jpe" | "jpeg" | "jpg" | "jpgm" | "jpgv" | "jpm" | "js" | "json" | "jsonml" | "kar" | "karbon" | "kfo" | "kia" | "kml" | "kmz" | "kne" | "knp" | "kon" | "kpr" | "kpt" | "kpxx" | "ksp" | "ktr" | "ktx" | "ktz" | "kwd" | "kwt" | "lasxml" | "latex" | "lbd" | "lbe" | "les" | "lha" | "link66" | "list" | "list3820" | "listafp" | "lnk" | "log" | "lostxml" | "lrf" | "lrm" | "ltf" | "lvp" | "lwp" | "lzh" | "m13" | "m14" | "m1v" | "m21" | "m2a" | "m2v" | "m3a" | "m3u" | "m3u8" | "m4a" | "m4u" | "m4v" | "ma" | "mads" | "mag" | "maker" | "man" | "mar" | "mathml" | "mb" | "mbk" | "mbox" | "mc1" | "mcd" | "mcurl" | "mdb" | "mdi" | "me" | "mesh" | "meta4" | "metalink" | "mets" | "mfm" | "mft" | "mgp" | "mgz" | "mid" | "midi" | "mie" | "mif" | "mime" | "mj2" | "mjp2" | "mjs" | "mk3d" | "mka" | "mks" | "mkv" | "mlp" | "mmd" | "mmf" | "mmr" | "mng" | "mny" | "mobi" | "mods" | "mov" | "movie" | "mp2" | "mp21" | "mp2a" | "mp3" | "mp4" | "mp4a" | "mp4s" | "mp4v" | "mpc" | "mpe" | "mpeg" | "mpg" | "mpg4" | "mpga" | "mpkg" | "mpm" | "mpn" | "mpp" | "mpt" | "mpy" | "mqy" | "mrc" | "mrcx" | "ms" | "mscml" | "mseed" | "mseq" | "msf" | "msh" | "msi" | "msl" | "msty" | "mts" | "mus" | "musicxml" | "mvb" | "mwf" | "mxf" | "mxl" | "mxml" | "mxs" | "mxu" | "n-gage" | "n3" | "nb" | "nbp" | "nc" | "ncx" | "nfo" | "ngdat" | "nitf" | "nlu" | "nml" | "nnd" | "nns" | "nnw" | "npx" | "nsc" | "nsf" | "ntf" | "nzb" | "oa2" | "oa3" | "oas" | "obd" | "obj" | "oda" | "odb" | "odc" | "odf" | "odft" | "odg" | "odi" | "odm" | "odp" | "ods" | "odt" | "oga" | "ogg" | "ogv" | "ogx" | "omdoc" | "onepkg" | "onetmp" | "onetoc" | "onetoc2" | "opf" | "opml" | "oprc" | "opus" | "org" | "osf" | "osfpvg" | "otc" | "otf" | "otg" | "oth" | "oti" | "otp" | "ots" | "ott" | "oxps" | "oxt" | "p" | "p10" | "p12" | "p7b" | "p7c" | "p7m" | "p7r" | "p7s" | "p8" | "pas" | "paw" | "pbd" | "pbm" | "pcap" | "pcf" | "pcl" | "pclxl" | "pct" | "pcurl" | "pcx" | "pdb" | "pdf" | "pfa" | "pfb" | "pfm" | "pfr" | "pfx" | "pgm" | "pgn" | "pgp" | "pic" | "pkg" | "pki" | "pkipath" | "plb" | "plc" | "plf" | "pls" | "pml" | "png" | "pnm" | "portpkg" | "pot" | "potm" | "potx" | "ppam" | "ppd" | "ppm" | "pps" | "ppsm" | "ppsx" | "ppt" | "pptm" | "pptx" | "pqa" | "prc" | "pre" | "prf" | "ps" | "psb" | "psd" | "psf" | "pskcxml" | "ptid" | "pub" | "pvb" | "pwn" | "pya" | "pyv" | "qam" | "qbo" | "qfx" | "qps" | "qt" | "qwd" | "qwt" | "qxb" | "qxd" | "qxl" | "qxt" | "ra" | "ram" | "rar" | "ras" | "rcprofile" | "rdf" | "rdz" | "rep" | "res" | "rgb" | "rif" | "rip" | "ris" | "rl" | "rlc" | "rld" | "rm" | "rmi" | "rmp" | "rms" | "rmvb" | "rnc" | "roa" | "roff" | "rp9" | "rpss" | "rpst" | "rq" | "rs" | "rsd" | "rss" | "rtf" | "rtx" | "s" | "s3m" | "saf" | "sbml" | "sc" | "scd" | "scm" | "scq" | "scs" | "scurl" | "sda" | "sdc" | "sdd" | "sdkd" | "sdkm" | "sdp" | "sdw" | "see" | "seed" | "sema" | "semd" | "semf" | "ser" | "setpay" | "setreg" | "sfd-hdstx" | "sfs" | "sfv" | "sgi" | "sgl" | "sgm" | "sgml" | "sh" | "shar" | "shf" | "sid" | "sig" | "sil" | "silo" | "sis" | "sisx" | "sit" | "sitx" | "skd" | "skm" | "skp" | "skt" | "sldm" | "sldx" | "slt" | "sm" | "smf" | "smi" | "smil" | "smv" | "smzip" | "snd" | "snf" | "so" | "spc" | "spf" | "spl" | "spot" | "spp" | "spq" | "spx" | "sql" | "src" | "srt" | "sru" | "srx" | "ssdl" | "sse" | "ssf" | "ssml" | "st" | "stc" | "std" | "stf" | "sti" | "stk" | "stl" | "str" | "stw" | "sub" | "sus" | "susp" | "sv4cpio" | "sv4crc" | "svc" | "svd" | "svg" | "svgz" | "swa" | "swf" | "swi" | "sxc" | "sxd" | "sxg" | "sxi" | "sxm" | "sxw" | "t" | "t3" | "taglet" | "tao" | "tar" | "tcap" | "tcl" | "teacher" | "tei" | "teicorpus" | "tex" | "texi" | "texinfo" | "text" | "tfi" | "tfm" | "tga" | "thmx" | "tif" | "tiff" | "tmo" | "torrent" | "tpl" | "tpt" | "tr" | "tra" | "trm" | "tsd" | "tsv" | "ttc" | "ttf" | "ttl" | "twd" | "twds" | "txd" | "txf" | "txt" | "u32" | "udeb" | "ufd" | "ufdl" | "ulx" | "umj" | "unityweb" | "uoml" | "uri" | "uris" | "urls" | "ustar" | "utz" | "uu" | "uva" | "uvd" | "uvf" | "uvg" | "uvh" | "uvi" | "uvm" | "uvp" | "uvs" | "uvt" | "uvu" | "uvv" | "uvva" | "uvvd" | "uvvf" | "uvvg" | "uvvh" | "uvvi" | "uvvm" | "uvvp" | "uvvs" | "uvvt" | "uvvu" | "uvvv" | "uvvx" | "uvvz" | "uvx" | "uvz" | "vcard" | "vcd" | "vcf" | "vcg" | "vcs" | "vcx" | "vis" | "viv" | "vob" | "vor" | "vox" | "vrml" | "vsd" | "vsf" | "vss" | "vst" | "vsw" | "vtu" | "vxml" | "w3d" | "wad" | "wav" | "wax" | "wbmp" | "wbs" | "wbxml" | "wcm" | "wdb" | "wdp" | "weba" | "webm" | "webm1" | "webp" | "wg" | "wgt" | "wks" | "wm" | "wma" | "wmd" | "wmf" | "wml" | "wmlc" | "wmls" | "wmlsc" | "wmv" | "wmx" | "wmz" | "woff" | "woff2" | "wpd" | "wpl" | "wps" | "wqd" | "wri" | "wrl" | "wsdl" | "wspolicy" | "wtb" | "wvx" | "x32" | "x3d" | "x3db" | "x3dbz" | "x3dv" | "x3dvz" | "x3dz" | "xaml" | "xap" | "xar" | "xbap" | "xbd" | "xbm" | "xdf" | "xdm" | "xdp" | "xdssc" | "xdw" | "xenc" | "xer" | "xfdf" | "xfdl" | "xht" | "xhtml" | "xhvml" | "xif" | "xla" | "xlam" | "xlc" | "xlf" | "xlm" | "xls" | "xlsb" | "xlsm" | "xlsx" | "xlt" | "xltm" | "xltx" | "xlw" | "xm" | "xml" | "xo" | "xop" | "xpi" | "xpl" | "xpm" | "xpr" | "xps" | "xpw" | "xpx" | "xsl" | "xslt" | "xsm" | "xspf" | "xul" | "xvm" | "xvml" | "xwd" | "xyz" | "xz" | "yang" | "yin" | "z1" | "z2" | "z3" | "z4" | "z5" | "z6" | "z7" | "z8" | "zaz" | "zip" | "zir" | "zirz" | "zmm")[] | undefined; - targetRootElement?: string | undefined; - maxNumberOfFiles?: number | undefined; - minNumberOfFiles?: number | undefined; - minimumAllowedFileSize?: number | undefined; - maximumAllowedFileSize?: number | undefined; - ui_type?: "default" | "resumeUploaderUI" | "bare" | "detached" | "profilePicture" | undefined; - display_ui_tools?: boolean | undefined; - show_ui_tools_on_mobile_devices?: boolean | undefined; - disable_drag_n_drop?: boolean | undefined; - disable_select_files_from_device?: boolean | undefined; - allowed_tools?: ("tools_dragger" | "upload" | "add_file" | "added_files_count" | "clear_files")[] | undefined; - position_container?: { - beforeEl: string; - } | "before" | "after" | "overwrite" | undefined; - file_preview_animation_types?: ("slideInRight" | "slideInTop" | "slideInLeft" | "slideInBottom" | "zoomIn" | "fadeIn")[] | undefined; - allowMultipleUpload?: boolean | undefined; - file_upload?: { + allowed_file_types: (keyof { + '123': string; + '3dml': string; + '3ds': string; + '3g2': string; + '3gp': string; + '7z': string; + aab: string; + aac: string; + aam: string; + aas: string; + abw: string; + ac: string; + acc: string; + ace: string; + acu: string; + acutc: string; + adp: string; + aep: string; + afm: string; + afp: string; + ahead: string; + ai: string; + aif: string; + aifc: string; + aiff: string; + air: string; + ait: string; + ami: string; + apk: string; + appcache: string; + application: string; + apr: string; + arc: string; + asc: string; + asf: string; + asm: string; + aso: string; + asx: string; + atc: string; + atom: string; + atomcat: string; + atomsvc: string; + atx: string; + au: string; + avi: string; + aw: string; + azf: string; + azs: string; + azw: string; + bat: string; + bcpio: string; + bdf: string; + bdm: string; + bed: string; + bh2: string; + bin: string; + blb: string; + blorb: string; + bmi: string; + bmp: string; + book: string; + box: string; + boz: string; + bpk: string; + btif: string; + bz: string; + bz2: string; + c: string; + c11amc: string; + c11amz: string; + c4d: string; + c4f: string; + c4g: string; + c4p: string; + c4u: string; + cab: string; + caf: string; + cap: string; + car: string; + cat: string; + cb7: string; + cba: string; + cbr: string; + cbt: string; + cbz: string; + cc: string; + cct: string; + ccxml: string; + cdbcmsg: string; + cdf: string; + cdkey: string; + cdmia: string; + cdmic: string; + cdmid: string; + cdmio: string; + cdmiq: string; + cdx: string; + cdxml: string; + cdy: string; + cer: string; + cfs: string; + cgm: string; + chat: string; + chm: string; + chrt: string; + cif: string; + cii: string; + cil: string; + cla: string; + class: string; + clkk: string; + clkp: string; + clkt: string; + clkw: string; + clkx: string; + clp: string; + cmc: string; + cmdf: string; + cml: string; + cmp: string; + cmx: string; + cod: string; + com: string; + conf: string; + cpio: string; + cpp: string; + cpt: string; + crd: string; + crl: string; + crt: string; + cryptonote: string; + csh: string; + csml: string; + csp: string; + css: string; + cst: string; + csv: string; + cu: string; + curl: string; + cww: string; + cxt: string; + cxx: string; + dae: string; + daf: string; + dart: string; + dataless: string; + davmount: string; + dbk: string; + dcr: string; + dcurl: string; + dd2: string; + ddd: string; + deb: string; + def: string; + deploy: string; + der: string; + dfac: string; + dgc: string; + dic: string; + dir: string; + dis: string; + dist: string; + distz: string; + djv: string; + djvu: string; + dll: string; + dmg: string; + dmp: string; + dms: string; + dna: string; + doc: string; + docm: string; + docx: string; + dot: string; + dotm: string; + dotx: string; + dp: string; + dpg: string; + dra: string; + dsc: string; + dssc: string; + dtb: string; + dtd: string; + dts: string; + dtshd: string; + dump: string; + dvb: string; + dvi: string; + dwf: string; + dwg: string; + dxf: string; + dxp: string; + dxr: string; + ecelp4800: string; + ecelp7470: string; + ecelp9600: string; + ecma: string; + edm: string; /** + * @private @method bareUploaderUI + */ + edx: string; + efif: string; + ei6: string; + elc: string; + emf: string; + eml: string; + emma: string; + emz: string; + eol: string; + eot: string; + eps: string; + epub: string; + es3: string; + esa: string; + esf: string; + et3: string; + etx: string; + eva: string; + evy: string; + exe: string; + exi: string; + ext: string; + ez: string; + ez2: string; + ez3: string; + f: string; + f4v: string; + f77: string; + f90: string; + fbs: string; + fcdt: string; + fcs: string; + fdf: string; + fe_launch: string; + fg5: string; + fgd: string; + fh: string; + fh4: string; + fh5: string; + fh7: string; + fhc: string; + fig: string; + flac: string; + fli: string; + flo: string; + flv: string; + flw: string; + flx: string; + fly: string; + fm: string; + fnc: string; + for: string; + fpx: string; + frame: string; + fsc: string; + fst: string; + ftc: string; + fti: string; + fvt: string; + fxp: string; + fxpl: string; + fzs: string; + g2w: string; + g3: string; + g3w: string; + gac: string; + gam: string; + gbr: string; + gca: string; + gdl: string; + geo: string; + gex: string; + ggb: string; + ggt: string; + ghf: string; + gif: string; + gim: string; + gml: string; + gmx: string; + gnumeric: string; + gph: string; + gpx: string; + gqf: string; + gqs: string; + gram: string; + gramps: string; + gre: string; + grv: string; + grxml: string; + gsf: string; + gtar: string; + gtm: string; + gtw: string; + gv: string; + gxf: string; + gxt: string; + h: string; + h261: string; + h263: string; + h264: string; + hal: string; + hbci: string; + hdf: string; + hh: string; + hlp: string; + hpgl: string; + hpid: string; + hps: string; + hqx: string; + htke: string; + htm: string; + html: string; + hvd: string; + hvp: string; + hvs: string; + i2g: string; + icc: string; + ice: string; + icm: string; + ico: string; + ics: string; + ief: string; + ifb: string; + ifm: string; + iges: string; + igl: string; + igm: string; + igs: string; + igx: string; + iif: string; + imp: string; + ims: string; + in: string; + ink: string; + inkml: string; + install: string; + iota: string; + ipfix: string; + ipk: string; + irm: string; + irp: string; + iso: string; + itp: string; + ivp: string; + ivu: string; + jad: string; + jam: string; + jar: string; + java: string; + javascript: string; + jisp: string; + jlt: string; + jnlp: string; + joda: string; + jpe: string; + jpeg: string; + jpg: string; + jpgm: string; + jpgv: string; + jpm: string; + js: string; + json: string; + jsonml: string; + kar: string; + karbon: string; + kfo: string; + kia: string; + kml: string; + kmz: string; + kne: string; + knp: string; + kon: string; + kpr: string; + kpt: string; + kpxx: string; + ksp: string; + ktr: string; + ktx: string; + ktz: string; + kwd: string; + kwt: string; + lasxml: string; + latex: string; + lbd: string; + lbe: string; + les: string; + lha: string; + link66: string; + list: string; + list3820: string; + listafp: string; + lnk: string; + log: string; + lostxml: string; + lrf: string; + lrm: string; + ltf: string; + lvp: string; + lwp: string; + lzh: string; + m13: string; + m14: string; + m1v: string; + m21: string; + m2a: string; + m2v: string; + m3a: string; + m3u: string; + m3u8: string; + m4a: string; + m4u: string; + m4v: string; + ma: string; + mads: string; + mag: string; + maker: string; + man: string; + mar: string; + mathml: string; + mb: string; + mbk: string; + mbox: string; + mc1: string; + mcd: string; + mcurl: string; + mdb: string; + mdi: string; + me: string; + mesh: string; + meta4: string; + metalink: string; + mets: string; + mfm: string; + mft: string; + mgp: string; + mgz: string; + mid: string; + midi: string; + mie: string; + mif: string; + mime: string; + mj2: string; + mjp2: string; + mjs: string; + mk3d: string; + mka: string; + mks: string; + mkv: string; + mlp: string; + mmd: string; + mmf: string; + mmr: string; + mng: string; + mny: string; + mobi: string; + mods: string; + mov: string; + movie: string; + mp2: string; + mp21: string; + mp2a: string; + mp3: string; + mp4: string; + mp4a: string; + mp4s: string; + mp4v: string; + mpc: string; + mpe: string; + mpeg: string; + mpg: string; + mpg4: string; + mpga: string; + mpkg: string; + mpm: string; + mpn: string; + mpp: string; + mpt: string; + mpy: string; + mqy: string; + mrc: string; + mrcx: string; + ms: string; + mscml: string; + mseed: string; + mseq: string; + msf: string; + msh: string; + msi: string; + msl: string; + msty: string; + mts: string; + mus: string; + musicxml: string; + mvb: string; + mwf: string; + mxf: string; + mxl: string; + mxml: string; + mxs: string; + mxu: string; + 'n-gage': string; + n3: string; + nb: string; + nbp: string; + nc: string; + ncx: string; + nfo: string; + ngdat: string; + nitf: string; + nlu: string; + nml: string; + nnd: string; + nns: string; + nnw: string; + npx: string; + nsc: string; + nsf: string; + ntf: string; + nzb: string; + oa2: string; + oa3: string; + oas: string; + obd: string; + obj: string; + oda: string; + odb: string; + odc: string; + odf: string; + odft: string; + odg: string; + odi: string; + odm: string; + odp: string; + ods: string; + odt: string; + oga: string; + ogg: string; + ogv: string; + ogx: string; + omdoc: string; + onepkg: string; + onetmp: string; + onetoc: string; + onetoc2: string; + opf: string; + opml: string; + oprc: string; + opus: string; + org: string; + osf: string; + osfpvg: string; + otc: string; + otf: string; + otg: string; + oth: string; + oti: string; + otp: string; + ots: string; + ott: string; + oxps: string; + oxt: string; + p: string; + p10: string; + p12: string; + p7b: string; + p7c: string; + p7m: string; + p7r: string; + p7s: string; + p8: string; + pas: string; + paw: string; + pbd: string; + pbm: string; + pcap: string; + pcf: string; + pcl: string; + pclxl: string; + pct: string; + pcurl: string; + pcx: string; + pdb: string; + pdf: string; + pfa: string; + pfb: string; + pfm: string; + pfr: string; + pfx: string; + pgm: string; + pgn: string; + pgp: string; + pic: string; + pkg: string; + pki: string; + pkipath: string; + plb: string; + plc: string; + plf: string; + pls: string; + pml: string; + png: string; + pnm: string; + portpkg: string; + pot: string; + potm: string; + potx: string; + ppam: string; + ppd: string; + ppm: string; + pps: string; + ppsm: string; + ppsx: string; + ppt: string; + pptm: string; + pptx: string; + pqa: string; + prc: string; + pre: string; + prf: string; + ps: string; + psb: string; + psd: string; + psf: string; + pskcxml: string; + ptid: string; + pub: string; + pvb: string; + pwn: string; + pya: string; + pyv: string; + qam: string; + qbo: string; + qfx: string; + qps: string; + qt: string; + qwd: string; + qwt: string; + qxb: string; + qxd: string; + qxl: string; + qxt: string; + ra: string; + ram: string; + rar: string; + ras: string; + rcprofile: string; + rdf: string; + rdz: string; + rep: string; + res: string; + rgb: string; + rif: string; + rip: string; + ris: string; + rl: string; + rlc: string; + rld: string; + rm: string; + rmi: string; + rmp: string; + rms: string; + rmvb: string; + rnc: string; + roa: string; + roff: string; + rp9: string; + rpss: string; + rpst: string; + rq: string; + rs: string; + rsd: string; + rss: string; + rtf: string; + rtx: string; + s: string; + s3m: string; + saf: string; + sbml: string; + sc: string; + scd: string; + scm: string; + scq: string; + scs: string; + scurl: string; + sda: string; + sdc: string; + sdd: string; + sdkd: string; + sdkm: string; + sdp: string; + sdw: string; + see: string; + seed: string; + sema: string; + semd: string; + semf: string; + ser: string; + setpay: string; + setreg: string; + 'sfd-hdstx': string; + sfs: string; + sfv: string; + sgi: string; + sgl: string; + sgm: string; + sgml: string; + sh: string; + shar: string; + shf: string; + sid: string; + sig: string; + sil: string; + silo: string; + sis: string; + sisx: string; + sit: string; + sitx: string; + skd: string; + skm: string; + skp: string; + skt: string; + sldm: string; + sldx: string; + slt: string; + sm: string; + smf: string; + smi: string; + smil: string; + smv: string; + smzip: string; + snd: string; + snf: string; + so: string; + spc: string; + spf: string; + spl: string; + spot: string; + spp: string; + spq: string; + spx: string; + sql: string; + src: string; + srt: string; + sru: string; + srx: string; + ssdl: string; + sse: string; + ssf: string; + ssml: string; + st: string; + stc: string; + std: string; + stf: string; + sti: string; + stk: string; + stl: string; + str: string; + stw: string; + sub: string; + sus: string; + susp: string; + sv4cpio: string; + sv4crc: string; + svc: string; + svd: string; + svg: string; + svgz: string; + swa: string; + swf: string; + swi: string; + sxc: string; + sxd: string; + sxg: string; + sxi: string; + sxm: string; + sxw: string; + t: string; + t3: string; + taglet: string; + tao: string; + tar: string; + tcap: string; + tcl: string; + teacher: string; + tei: string; + teicorpus: string; + tex: string; + texi: string; + texinfo: string; + text: string; + tfi: string; + tfm: string; + tga: string; + thmx: string; + tif: string; + tiff: string; + tmo: string; + torrent: string; + tpl: string; + tpt: string; + tr: string; + tra: string; + trm: string; + tsd: string; + tsv: string; + ttc: string; + ttf: string; + ttl: string; + twd: string; + twds: string; + txd: string; + txf: string; + txt: string; + u32: string; + udeb: string; + ufd: string; + ufdl: string; + ulx: string; + umj: string; + unityweb: string; + uoml: string; + uri: string; + uris: string; + urls: string; + ustar: string; + utz: string; + uu: string; + uva: string; + uvd: string; + uvf: string; + uvg: string; + uvh: string; + uvi: string; + uvm: string; + uvp: string; + uvs: string; + uvt: string; + uvu: string; + uvv: string; + uvva: string; + uvvd: string; + uvvf: string; + uvvg: string; + uvvh: string; + uvvi: string; + uvvm: string; + uvvp: string; + uvvs: string; + uvvt: string; + uvvu: string; + uvvv: string; + uvvx: string; + uvvz: string; + uvx: string; + uvz: string; + vcard: string; + vcd: string; + vcf: string; + vcg: string; + vcs: string; + vcx: string; + vis: string; + viv: string; + vob: string; + vor: string; + vox: string; + vrml: string; + vsd: string; + vsf: string; + vss: string; + vst: string; + vsw: string; + vtu: string; + vxml: string; + w3d: string; + wad: string; + wav: string; + wax: string; + wbmp: string; + wbs: string; + wbxml: string; + wcm: string; + wdb: string; + wdp: string; + weba: string; + webm: string; + webm1: string; + webp: string; + wg: string; + wgt: string; + wks: string; + wm: string; + wma: string; + wmd: string; + wmf: string; + wml: string; + wmlc: string; + wmls: string; + wmlsc: string; + wmv: string; + wmx: string; + wmz: string; + woff: string; + woff2: string; + wpd: string; + wpl: string; + wps: string; + wqd: string; + wri: string; + wrl: string; + wsdl: string; + wspolicy: string; + wtb: string; + wvx: string; + x32: string; + x3d: string; + x3db: string; + x3dbz: string; + x3dv: string; + x3dvz: string; + x3dz: string; + xaml: string; + xap: string; + xar: string; + xbap: string; + xbd: string; + xbm: string; + xdf: string; + xdm: string; + xdp: string; + xdssc: string; + xdw: string; + xenc: string; + xer: string; + xfdf: string; + xfdl: string; + xht: string; + xhtml: string; + xhvml: string; + xif: string; + xla: string; + xlam: string; + xlc: string; + xlf: string; + xlm: string; + xls: string; + xlsb: string; + xlsm: string; + xlsx: string; + xlt: string; + xltm: string; + xltx: string; + xlw: string; + xm: string; + xml: string; + xo: string; + xop: string; + xpi: string; + xpl: string; + xpm: string; + xpr: string; + xps: string; + xpw: string; + xpx: string; + xsl: string; + xslt: string; + xsm: string; + xspf: string; + xul: string; + xvm: string; + xvml: string; + xwd: string; + xyz: string; + xz: string; + yang: string; + yin: string; + z1: string; + z2: string; + z3: string; + z4: string; + z5: string; + z6: string; + z7: string; + z8: string; + zaz: string; + zip: string; + zir: string; + zirz: string; + zmm: string; + })[]; + targetRootElement: string; + maxNumberOfFiles: number; + minNumberOfFiles: number; + minimumAllowedFileSize: number; + maximumAllowedFileSize: number; + ui_type: 'default' | 'resumeUploaderUI' | 'bare' | 'detached' | 'profilePicture'; + display_ui_tools: boolean; + show_ui_tools_on_mobile_devices: boolean; + disable_drag_n_drop: boolean; + disable_select_files_from_device: boolean; + allowed_tools: Array<'tools_dragger' | 'upload' | 'add_file' | 'added_files_count' | 'clear_files'>; + position_container: "before" | "after" | "overwrite" | { + "beforeEl": string; + }; + file_preview_animation_types: Array<'slideInRight' | 'slideInTop' | 'slideInLeft' | 'slideInBottom' | 'zoomIn' | 'fadeIn'>; + allowMultipleUpload: boolean; + file_upload: { endpoint_url: string; files_field_name: string; - form_field?: string | HTMLFormElement | undefined; - additional_data?: object | undefined; + form_field?: HTMLFormElement | string; + additional_data?: object; axios_settings: { headers: {}; configs: {}; }; - } | undefined; - allowed_sources?: ("capture_image" | "record_audio" | "record_screen" | "google_drive_source" | "dropbox_source" | "box_source" | "openai_dalle_source" | "record_video" | "link_source")[] | undefined; + chunk_size: number; + should_chunk: boolean; + }; + allowed_sources: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + display_file_sources: boolean; upload_automatically?: boolean | undefined; show_upload_error_overlay?: boolean | undefined; - file_source_config?: { + show_upload_progress_bar?: boolean | undefined; + file_source_config: { video_recording: { video_only: boolean; show_image_capture_btn: boolean; @@ -239,24 +1240,46 @@ export default class CustUp extends CustUpCore { model: "dall-e-3" | "dall-e-2"; quality: "standard" | "hd"; }; - } | undefined; - default_files?: { + }; + default_files: Array<{ file: string | File | Blob; isUploadable: boolean; headers: any; - }[] | undefined; - count_default_files?: boolean | undefined; - instance_attach?: CustUp[] | undefined; - single_upload?: boolean | undefined; - persist_files?: boolean | undefined; - persist_type?: "soft" | "hard" | undefined; - alert_timeout_time?: number | undefined; + }>; + count_default_files: boolean; + instance_attach: Array; + single_upload: boolean; + persist_files: boolean; + persist_type: 'soft' | 'hard'; + alert_timeout_time: number; + messages: { + timeout: number; + }; }); - uiSelect(): void; - resumeUploaderUI(): void; - bareUploaderUI(): void; - detachedUploaderUI(): void; - profilePictureUI(): void; + /** + * @private @method uiSelect + */ + private uiSelect; + /** + * @private @method resumeUploaderUI + */ + private resumeUploaderUI; + /** + * @private @method bareUploaderUI + */ + private bareUploaderUI; + /** + * @private @method detachedUploaderUI + */ + private detachedUploaderUI; + /** + * @private @method profilePictureUI + */ + private profilePictureUI; + /** + * @private @method elegantUI + */ + private elegantUI; } import CustUpCore from "../core/custupCore.js"; //# sourceMappingURL=custup.d.ts.map \ No newline at end of file diff --git a/src/custup.d.ts.map b/src/custup.d.ts.map index b4e60c3..ace3aae 100644 --- a/src/custup.d.ts.map +++ b/src/custup.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"custup.d.ts","sourceRoot":"","sources":["custup.js"],"names":[],"mappings":"AAIA;IACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA0HE;IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA3F4E,MAAM;;;;;0BAIzD,MAAM;8BACF,MAAM;;;4BAGR;gBAC3B,OAAuB,EAAE,EAAE,CAAC;gBAC5B,OAAuB,EAAE,EAAE,CAAC;aAChB;;;;;;6BAMc;gBAC1B,UAAwB,EAAE,OAAO,CAAC;gBAClC,sBAAoC,EAAE,OAAO,CAAC;aACnC;2BACc,EACd;0BACa,EACb;2BACc,EACd;wBACW,EACX;iCACoB;gBAC/B,UAAwB,EAAE;oBAC1B,SAA0B,EAAE,MAAM,CAAC;oBACnC,OAAwB,EAAE,MAAM,CAAC;oBACjC,MAAuB,EAAE,MAAM,CAAC;oBAChC,MAAuB,EAAE,MAAM,CAAC;iBACjB,CAAC;aACL;4BACe;gBAC1B,UAAwB,EAAE;oBAC1B,MAAuB,EAAE,MAAM,CAAC;iBACjB,CAAC;gBAChB,OAAqB,EAAE;oBACvB,MAAuB,WAAW;iBACnB,CAAC;aACL;wBACW;gBACtB,UAAwB,EAAE;oBAC1B,cAAgC,EAAE,MAAM,CAAC;oBACzC,OAAyB,EAAE,MAAM,CAAC;oBAClC,MAAwB,EAAE,MAAM,CAAC;oBACjC,SAA2B,EAAE,MAAM,CAAC;iBACrB,CAAC;gBAChB,YAA0B,EAAE;oBAC5B,iBAAmC,CAAC,EAAE,MAAM,CAAC;oBAC7C,MAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;oBAC3C,aAA+B,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;oBACjD,OAAyB,CAAC,EAAE,MAAM,CAAC;oBACnC,SAA2B,CAAC,EAAE,OAAO,CAAC;oBACtC,iBAAmC,CAAC,EAAE,OAAO,CAAC;oBAC9C,kBAAoC,CAAC,EAAE,OAAO,CAAC;oBAC/C,UAA4B,CAAC,EAAE,MAAM,CAAC;oBACtC,kBAAoC,CAAC,EAAE,MAAM,CAAC;oBAC9C,KAAuB,CAAC,EAAE,MAAM,CAAC;oBACjC,IAAsB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;oBAC3C,OAAyB,CAAC,EAAE,OAAO,CAAC;oBACpC,SAA2B,CAAC,EAAE,OAAO,CAAC;oBACtC,WAA6B,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;oBACpD,iBAAmC,CAAC,EAAE,MAAM,CAAC;oBAC7C,kBAAoC,CAAC,WAAW;oBAChD,mBAAqC,CAAC,WAAW;iBAClC,CAAA;aACJ;iCACoB;gBAC/B,QAAuB,EAAE,MAAM,CAAC;gBAChC,OAAsB,EAAE,MAAM,CAAC;gBAC/B,IAAmB,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;gBAC7D,CAAgB,EAAE,MAAM,CAAC;gBACzB,KAAoB,EAAE,UAAU,GAAG,UAAU,CAAC;gBAC9C,OAAsB,EAAE,UAAU,GAAG,IAAI,CAAC;aAC/B;;;kBAEyB,MAAM,GAAG,IAAI,GAAG,IAAI;0BAAgB,OAAO;qBAAW,GAAG;;;;;;;;OAc5F;IAED,iBAmBC;IAED,yBAmBC;IAED,uBAiCC;IAED,2BA2KC;IAED,yBAkEC;CACJ;uBAncsB,uBAAuB"} \ No newline at end of file +{"version":3,"file":"custup.d.ts","sourceRoot":"","sources":["custup.js"],"names":[],"mappings":"AAIA;IACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiIE;IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA9G2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsK5B;;eAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAxKyC,CAAC,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"} \ No newline at end of file diff --git a/src/custup.js b/src/custup.js index a16ccf3..bfd678c 100644 --- a/src/custup.js +++ b/src/custup.js @@ -15,7 +15,7 @@ export default class CustUp extends CustUpCore { * autoInitialize?: boolean; * show_file_remove_btn?: boolean; * show_file_details_container?: boolean; - * file_source_icons?: {[key in 'video_camera' | 'capture_image' | 'record_audio' | 'record_screen' | 'url_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source']: any}; + * file_source_icons: {[key in 'video_camera' | 'capture_image' | 'record_audio' | 'record_screen' | 'url_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source']: any}; * css_font_link?: string; * css_font_name?: string; * external_source_style_override?: typeof external_sources_ui_styles; @@ -23,22 +23,22 @@ export default class CustUp extends CustUpCore { * default_styles_override?: typeof ui_styles; * persist_styles_override_across_instances?: boolean; * default_icons_override?: typeof icons; - * allowed_file_types?: (keyof file_types)[]; - * targetRootElement?: string; - * maxNumberOfFiles?: number; - * minNumberOfFiles?: number; - * minimumAllowedFileSize?: number; - * maximumAllowedFileSize?: number; - * ui_type?: 'default' | 'resumeUploaderUI' | 'bare' | 'detached' | 'profilePicture'; - * display_ui_tools?: boolean; - * show_ui_tools_on_mobile_devices?: boolean; - * disable_drag_n_drop?: boolean; - * disable_select_files_from_device?: boolean; - * allowed_tools?: Array<'tools_dragger' | 'upload' | 'add_file' | 'added_files_count' | 'clear_files'>; - * position_container?: "before" | "after" | "overwrite" | {"beforeEl": string}; - * file_preview_animation_types?: Array<'slideInRight' | 'slideInTop' | 'slideInLeft' | 'slideInBottom' | 'zoomIn' | 'fadeIn'>; - * allowMultipleUpload?: boolean; - * file_upload?: { + * allowed_file_types: (keyof file_types)[]; + * targetRootElement: string; + * maxNumberOfFiles: number; + * minNumberOfFiles: number; + * minimumAllowedFileSize: number; + * maximumAllowedFileSize: number; + * ui_type: 'default' | 'resumeUploaderUI' | 'bare' | 'detached' | 'profilePicture'; + * display_ui_tools: boolean; + * show_ui_tools_on_mobile_devices: boolean; + * disable_drag_n_drop: boolean; + * disable_select_files_from_device: boolean; + * allowed_tools: Array<'tools_dragger' | 'upload' | 'add_file' | 'added_files_count' | 'clear_files'>; + * position_container: "before" | "after" | "overwrite" | {"beforeEl": string}; + * file_preview_animation_types: Array<'slideInRight' | 'slideInTop' | 'slideInLeft' | 'slideInBottom' | 'zoomIn' | 'fadeIn'>; + * allowMultipleUpload: boolean; + * file_upload: { * endpoint_url: string; * files_field_name: string; * form_field?: HTMLFormElement | string; @@ -47,11 +47,15 @@ export default class CustUp extends CustUpCore { * headers: {}; * configs: {}; * }; + * chunk_size: number; + * should_chunk: boolean; * }; - * allowed_sources?: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + * allowed_sources: Array<'record_video' | 'capture_image' | 'record_audio' | 'record_screen' | 'link_source' | 'google_drive_source' | 'dropbox_source' | 'box_source' | 'openai_dalle_source'>; + * display_file_sources: boolean; * upload_automatically?: boolean; * show_upload_error_overlay?: boolean; - * file_source_config?: { + * show_upload_progress_bar?: boolean; + * file_source_config: { * video_recording: { * video_only: boolean; * show_image_capture_btn: boolean; @@ -116,22 +120,27 @@ export default class CustUp extends CustUpCore { * quality: "standard" | "hd"; * }; * }; - * default_files?: Array<{file: string | File | Blob; isUploadable: boolean; headers: any}>; - * count_default_files?: boolean; - * instance_attach?: Array; - * single_upload?: boolean; - * persist_files?: boolean; - * persist_type?: 'soft' | 'hard'; - * alert_timeout_time?: number; + * default_files: Array<{file: string | File | Blob; isUploadable: boolean; headers: any}>; + * count_default_files: boolean; + * instance_attach: Array; + * single_upload: boolean; + * persist_files: boolean; + * persist_type: 'soft' | 'hard'; + * alert_timeout_time: number; + * messages: { + * timeout: number; + * }; * }} options * */ constructor (options) { super(options); - - this.uiSelect() + this.uiSelect(); } + /** + * @private @method uiSelect + */ uiSelect () { switch (this.options.ui_type) { case 'resumeUploaderUI': @@ -146,6 +155,9 @@ export default class CustUp extends CustUpCore { case 'profilePicture': this.profilePictureUI(); break; + case 'elegant': + this.elegantUI(); + break; default: break; } @@ -153,6 +165,9 @@ export default class CustUp extends CustUpCore { this.options.autoInitialize && this.initializeUI() } + /** + * @private @method resumeUploaderUI + */ resumeUploaderUI () { const style_override = { outerContainer: ['RUIOuterContainer', true], @@ -160,7 +175,7 @@ export default class CustUp extends CustUpCore { defaultUIUploadIconsContainer: ['RUIDefaultUIUploadIconsContainer', true] } this.map_override_styles_to_default_styles(style_override); - this.options.allowed_sources = null; + this.options.display_file_sources = false; this.options._custupDefaultUploadSentence = `
Upload a file or drag and drop here
Accepted Files: ${this.options.allowed_file_types.length == 0 ? 'All' : this.options.allowed_file_types.join(', ').toUpperCase()} @@ -174,6 +189,9 @@ export default class CustUp extends CustUpCore { } } + /** + * @private @method bareUploaderUI + */ bareUploaderUI () { const style_override = { outerContainer: ['BareUIOuterContainer', true], @@ -183,7 +201,7 @@ export default class CustUp extends CustUpCore { } this.map_override_styles_to_default_styles(style_override); this.options.allowed_tools = null; - this.options.allowed_sources = null; + this.options.display_file_sources = false; this.options.disable_scrollbar = true; const defaultUIInnerContentWrapper = document.createElement('div') @@ -209,6 +227,9 @@ export default class CustUp extends CustUpCore { } } + /** + * @private @method detachedUploaderUI + */ detachedUploaderUI () { const style_override = { outerContainer: ['DUIOuterContainer', true], @@ -221,7 +242,7 @@ export default class CustUp extends CustUpCore { } this.options.use_default_file_display_ui = false; this.options.persist_default_ui = true - this.options.allowed_sources = null; + this.options.display_file_sources = false; const defaultContElWrapper = document.createElement('div') const defaultContElMain = document.createElement('div') @@ -362,6 +383,7 @@ export default class CustUp extends CustUpCore { }) this.on('upload.progress', (e) => { + if (this.options.single_upload) return; const item_container = this._custupFooterEl.querySelector('.inner').querySelector(`div.DUIFileContainer#${e.file.id}`) const progress_container = item_container.querySelector('.DHIUploadProgressContainer') progress_container.style.display = "flex" @@ -382,6 +404,9 @@ export default class CustUp extends CustUpCore { } } + /** + * @private @method profilePictureUI + */ profilePictureUI () { const style_override = { outerContainer: ['PPUIOuterContainer', true], @@ -394,7 +419,7 @@ export default class CustUp extends CustUpCore { footerContainer: 'PPUIFooterContainer', } - this.options.allowed_sources = null + this.options.display_file_sources = false this.options.display_ui_tools = false this.options.disable_scrollbar = true this.options.minNumberOfFiles = 1 @@ -448,5 +473,360 @@ export default class CustUp extends CustUpCore { if (document.querySelector("[href*='all.min.']") === null && document.querySelector("[href*='profilePicture.']") === null) { console.warn(this.libraryName + ": Please include the profilePicture css file") } + } + + /** + * @private @method elegantUI + */ + elegantUI () { + + const style_override = { + outerContainer: ['EUIOuterContainer', true], + innerContainer: ['EUIInnerContainer', true], + sidebarLeftContainer: ['EUISidebarLeftContainer', true], + custupInnerContainerWrapperEl: ['EUIInnerContainerWrapper', true], + headerContainer: ['EUIHeaderContainer', true], + defaultUI: ['EUIDefaultUI', true], + defaultUIInnerContentEl: ['EUIDefaultUIInnerContentEl', true], + filePreviewer: ['EUIFilePreviewer', true], + fileDisplayUI: ['EUIFileDisplayUI', true], + fileUIOuterContainer: ['EUIFileUIOuterContainer', true], + fileUI: ['EUIFileUIMainContainer', true], + close_popup_btn: ['EUIClosePopupBtn', true], + footerContainer: ['EUIFooterContainer', true], + defaultUIUploadSentenceContainer: ['EUIDefaultUIUploadSentenceContainer', true], + footerContainer: 'EUIFooterContainer', + } + + const is_mobile = () => window.screen.width <= 768; + + this.map_override_styles_to_default_styles(style_override) + + this.options.display_file_sources = false + this.options.use_default_file_display_ui = true + this.options.display_ui_tools = false + this.options.show_file_remove_btn = false + this.options.show_file_details_container = false + this.options.disable_scrollbar = true + this.options.show_upload_progress_bar = false; + this.options.show_upload_error_overlay = false; + this.options.disable_select_files_from_device = is_mobile(); + + this.options.external_source_style_override = { + ...this.options.external_source_style_override, + container: ["EUIExternalSourceContainer", true] + } + + this.options.media_capture_source_style_override = { + ...this.options.media_capture_source_style_override, + container: ["EUIMediaSourceContainer", true] + } + + this.options.css_font_name = "Roboto-regular, Roboto, sans-serif" + + // default UI file tip + const fileTipWrapper = document.createElement('div') + const defaultUIFileTip = document.createElement('div') + defaultUIFileTip.className = "EUIDefaultUIFileSelectTip" + const fileTipIconContainer = document.createElement('div') + fileTipIconContainer.className = "EUIFileTipIconContainer" + fileTipIconContainer.innerHTML = this.ui_icons.add_file_filled + const fileTipText1 = document.createElement('div') + fileTipText1.className = "EUIFileTipText1" + fileTipText1.innerHTML = "Select Files to Upload" + const fileTipText2 = document.createElement('div') + fileTipText2.className = "EUIFileTipText2" + fileTipText2.innerHTML = "or Drag and Drop Files" + + defaultUIFileTip.appendChild(fileTipIconContainer) + defaultUIFileTip.appendChild(fileTipText1) + defaultUIFileTip.appendChild(fileTipText2) + fileTipWrapper.appendChild(defaultUIFileTip) + + this.options._custupDefaultUploadSentence = fileTipWrapper.innerHTML + // end of default UI file tip + + + this.on('library.init', () => { + // scope variable declaration + let footerContainerFilled = false; + let submitBtnEl_clone = null; + + // function that creates the utils buttons in the footer container + const createUtilsButtonsInFooter = () => { + const clearFilesButtonContainer = document.createElement('div') + const clearFilesButton = document.createElement('button') + clearFilesButton.innerHTML = "Deselect All"; + clearFilesButton.type = "button"; + clearFilesButton.onclick = () => this.clear_files(); + clearFilesButtonContainer.appendChild(clearFilesButton); + + const uploadButtonContainer = document.createElement('div') + const uploadButton = document.createElement('button') + uploadButton.type = "button" + uploadButton.innerHTML = "Upload" + uploadButtonContainer.appendChild(uploadButton) + uploadButton.onclick = () => this.upload(); + submitBtnEl_clone = uploadButton; + + this._custupFooterEl.querySelector('.inner').append(clearFilesButtonContainer) + this._custupFooterEl.querySelector('.inner').append(uploadButtonContainer) + + this._custupEl.style.setProperty('--footer-container-height', this._custupFooterEl.clientHeight + "px") + footerContainerFilled = true + } + + const clearUtilsButtonsFromFooter = () => { + this._custupFooterEl.querySelector('.inner').innerHTML = ""; + this._custupEl.style.setProperty('--footer-container-height', this._custupFooterEl.clientHeight + "px") + footerContainerFilled = false; + } + + // create the select from user's device icon + const selectFromDeviceSourceIcon = document.createElement('div'); + selectFromDeviceSourceIcon.innerHTML = this.ui_icons.desktop_device; + this._custupSidebarLeftEl.append(selectFromDeviceSourceIcon); + selectFromDeviceSourceIcon.dataset.custupIconActive = "true" + + + // create the header title + const headerTitleBar = document.createElement('div') + headerTitleBar.className = "EUIHeaderTitleBar" + this._custupHeaderEl.querySelector('.inner').append(headerTitleBar) + headerTitleBar.innerHTML = is_mobile() ? "Select from" : this.ui_icons.desktop_device; + + // create the filter box + const filterBoxContainer = document.createElement('div') + filterBoxContainer.className = "EUIFilterBoxContainer" + + const filterBoxInputWrapper = document.createElement('div') + filterBoxInputWrapper.className = "EUIFilterBoxInputWrapper" + const filterBox = document.createElement('input') + filterBox.placeholder = "Filter" + filterBox.className = "EUIFilterBox" + const filterBoxInputIcon = document.createElement('div') + filterBoxInputIcon.innerHTML = this.ui_icons.search_icon; + filterBox.onkeyup = (e) => { + const value = e.currentTarget.value + const filter_not_match = this.get_all_files().filter(file => file.name.toLowerCase().indexOf(value.toLowerCase()) == -1) + this.get_all_files().forEach(file => { + if (value != '') { + if (filter_not_match.includes(file)) { + this._custupEl.querySelector("#"+file.id).style.setProperty("display", "none", "important") + }else{ + this._custupEl.querySelector("#"+file.id).style.setProperty("display", "flex", "important") + } + }else{ + this._custupEl.querySelector("#"+file.id).style.setProperty("display", "flex", "important") + } + }) + } + + filterBoxInputWrapper.appendChild(filterBoxInputIcon) + filterBoxInputWrapper.appendChild(filterBox) + filterBoxContainer.appendChild(filterBoxInputWrapper) + this._custupHeaderEl.querySelector('.inner').append(filterBoxContainer) + // end of filter box + + // create file state info + const fileStateInfoContainer = document.createElement('div') + fileStateInfoContainer.className = "EUIFileStateInfoContainer" + const fileStateInfoContainerText = document.createElement('div') + fileStateInfoContainerText.className = "EUIFileStateInfoContainerText" + fileStateInfoContainerText.innerHTML = "Files" + + fileStateInfoContainer.appendChild(fileStateInfoContainerText) + this._custupHeaderEl.querySelector('.inner').append(fileStateInfoContainer) + // end of create file state info + + const hideHeaderUtils = () => { + this._custupHeaderEl.style.setProperty('height', 'auto', 'important');; + filterBoxContainer.style.display = "none"; + fileStateInfoContainer.style.display = "none"; + this._custupEl.style.setProperty('--header-container-height', this._custupHeaderEl.offsetHeight + 'px'); + } + + const showHeaderUtils = () => { + this._custupHeaderEl.style.setProperty('height', 'auto', 'important');; + filterBoxContainer.style.display = "flex" + fileStateInfoContainer.style.display = "flex" + this._custupEl.style.setProperty('--header-container-height', this._custupHeaderEl.offsetHeight + 'px'); + } + + selectFromDeviceSourceIcon.onclick = (e) => { + this.show_add_file_ui(); + this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(el => el.removeAttribute("data-custup-icon-active")); + selectFromDeviceSourceIcon.dataset.custupIconActive = "true"; + headerTitleBar.innerHTML = e.currentTarget.innerHTML; + hideHeaderUtils(); + clearUtilsButtonsFromFooter() + this.close_file_source_popup(); + } + + const setIconActiveCallbackFn = (e) => { + this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(el => el.removeAttribute("data-custup-icon-active")) + e.currentTarget.dataset.custupIconActive = "true" + headerTitleBar.innerHTML = e.currentTarget.innerHTML; + headerTitleBar.querySelector('div')?.remove(); // for mobile screen UI that contains title wrapped in a div + hideHeaderUtils() + } + + // create the other file source icons + const list_file_sources = () => { + this._custupSidebarLeftEl.innerHTML = ""; + !is_mobile() && this.get_file_sources(this._custupSidebarLeftEl, setIconActiveCallbackFn); + if (is_mobile()) { + this._custupDefaultUIInnerContentEl.innerHTML = ""; + const file_source_icons = this.get_file_sources(); + + const selectFromDeviceSourceIcon = document.createElement('div'); + selectFromDeviceSourceIcon.innerHTML = this.ui_icons.desktop_device; + selectFromDeviceSourceIcon.classList.add('file-source'); + const device_icon_title = document.createElement('div'); + device_icon_title.innerHTML = "Select from Device"; + selectFromDeviceSourceIcon.appendChild(device_icon_title); + selectFromDeviceSourceIcon.onclick = (e) => this.select_file_from_device(e); + + this._custupDefaultUIInnerContentEl.append(selectFromDeviceSourceIcon) + file_source_icons.map(source_el => { + source_el.classList.add('file-source'); + const source_icon_title = document.createElement('div') + source_icon_title.innerHTML = source_el.title + source_el.append(source_icon_title); + source_el.addEventListener('click', setIconActiveCallbackFn) + this._custupDefaultUIInnerContentEl.append(source_el) + }) + this.set_scroll_pointer_event(this._custupDefaultUIEl, this._custupDefaultUIInnerContentEl); + }else{ + this._custupDefaultUIInnerContentEl.innerHTML = this.options._custupDefaultUploadSentence; + + } + } + list_file_sources(); + window.onresize = (e) => { + list_file_sources(); + } + + + this.on('file_source.closed', () => { + this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(el => el.removeAttribute("data-custup-icon-active")) + headerTitleBar.innerHTML = is_mobile() ? "Select from" : this.ui_icons.desktop_device; + this.get_total_file_count() > 0 && showHeaderUtils(); + }); + + + this.on('file.afterAdded', ({file, element, count}) => { + !footerContainerFilled && createUtilsButtonsInFooter(); + + const fileDetailsContainer = document.createElement('div'); + fileDetailsContainer.className = "EUIFileDetailsContainer" + + const filenameSizeContainer = document.createElement('div') + filenameSizeContainer.className = "EUIFilenameSizeContainer" + const fileName = document.createElement('div') + fileName.innerHTML = file.name + const fileSize = document.createElement('div') + fileSize.innerHTML = this.parseFileSize(file.size) + filenameSizeContainer.appendChild(fileName) + filenameSizeContainer.appendChild(fileSize) + + const fileDisplayToolsContainer = document.createElement('div') + fileDisplayToolsContainer.className = 'EUIFileDisplayToolsContainer' + const removeFileBtn = document.createElement('div') + removeFileBtn.innerHTML = this.ui_icons.cancel + removeFileBtn.onclick = (e) => { + this.remove_file(file.id) + } + const previewFileBtn = document.createElement('div') + previewFileBtn.innerHTML = this.ui_icons.eye; + previewFileBtn.onclick = (e) => { + this.preview_file(file.id) + } + const retryUploadBtn = document.createElement('div') + retryUploadBtn.innerHTML = this.ui_icons.retry; + retryUploadBtn.id = "retry_" + file.id + retryUploadBtn.style.display = "none" + retryUploadBtn.onclick = (e) => { + this.retry_upload(file.id) + } + + fileDisplayToolsContainer.appendChild(retryUploadBtn) + this.is_file_previewable(file) && fileDisplayToolsContainer.appendChild(previewFileBtn); + + fileDisplayToolsContainer.appendChild(removeFileBtn) + + const progressIndicatorContainer = document.createElement('div') + progressIndicatorContainer.className = "EUIProgressIndicatorContainer" + const progressIndicatorInner = document.createElement('div') + progressIndicatorContainer.appendChild(progressIndicatorInner) + + fileDetailsContainer.appendChild(filenameSizeContainer) + fileDetailsContainer.appendChild(fileDisplayToolsContainer) + element.appendChild(fileDetailsContainer) + element.appendChild(progressIndicatorContainer) + + headerTitleBar.innerHTML = "Selected Files " + count; + + showHeaderUtils(); + }); + + this.on("file.all_removed", (e) => { + clearUtilsButtonsFromFooter(); + headerTitleBar.innerHTML = is_mobile() ? "Select from" : this.ui_icons.desktop_device; + hideHeaderUtils(); + setTimeout(() => { + list_file_sources(); + }, 100); + }); + + this.on("file.removed", (e) => { + headerTitleBar.innerHTML = "Selected Files " + e.files_count + }); + + this.on("upload.error", (e) => { + const file_error_el = this._custupEl.querySelector('#'+e.file.id).querySelector('[id*="retry_"]'); + file_error_el.style.display = "flex"; + submitBtnEl_clone.innerHTML = "Upload"; + submitBtnEl_clone.disabled = false; + }); + + this.on("upload.retry", (e) => { + const file_error_el = this._custupEl.querySelector('#'+e.file.id).querySelector('[id*="retry_"]'); + file_error_el.style.display = "none"; + }); + + this.on("upload.progress", (e) => { + if (this.options.single_upload) return; + const uploadHTMLEl = this._custupEl.querySelector('#'+e.file.id); + const progressFileSize = uploadHTMLEl.querySelector('.EUIFilenameSizeContainer div:last-child') + const progressIndicator = uploadHTMLEl.querySelector('.EUIProgressIndicatorContainer div') + progressIndicator.style.width = (e.progressEvent.progress * 100) + "%"; + progressFileSize.innerHTML = this.parseFileSize(e.progressEvent.loaded) + " / " + this.parseFileSize(e.progressEvent.total); + }); + + this.on('upload.beforeStart', (e) => { + submitBtnEl_clone.innerHTML = "Uploading..."; + submitBtnEl_clone.disabled = true; + }); + + this.on('upload.all_finished', (e) => { + submitBtnEl_clone.innerHTML = "Upload"; + submitBtnEl_clone.disabled = false; + }); + + this.on('default_ui.closed', () => { + this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(el => el.removeAttribute("data-custup-icon-active")); + headerTitleBar.innerHTML = "Selected Files"; + this.get_total_file_count() > 0 && showHeaderUtils(); + createUtilsButtonsInFooter(); + }); + }); + + + + + + + } } \ No newline at end of file diff --git a/src/custup.min.js b/src/custup.min.js index b1e0cf4..bfc5296 100644 --- a/src/custup.min.js +++ b/src/custup.min.js @@ -1,7 +1,7 @@ -/*! custup 2024-01-13 */ -import CustUpCore from"../core/custupCore.js";import _customStyles from"../utils/_customStyles.js";import file_types from"../utils/filetypes.js";export default class CustUp extends CustUpCore{constructor(e){super(e),this.uiSelect()}uiSelect(){switch(this.options.ui_type){case"resumeUploaderUI":this.resumeUploaderUI();break;case"bare":this.bareUploaderUI();break;case"detached":this.detachedUploaderUI();break;case"profilePicture":this.profilePictureUI()}this.map_override_styles_to_default_styles(this.options.default_styles_override),this.options.autoInitialize&&this.initializeUI()}resumeUploaderUI(){this.map_override_styles_to_default_styles({outerContainer:["RUIOuterContainer",!0],defaultUI:["RUIDefaultUIEl",!0],defaultUIUploadIconsContainer:["RUIDefaultUIUploadIconsContainer",!0]}),this.options.allowed_sources=null,this.options._custupDefaultUploadSentence=`
+/*! custup 2024-02-11 */ +import CustUpCore from"../core/custupCore.js";import _customStyles from"../utils/_customStyles.js";import file_types from"../utils/filetypes.js";export default class CustUp extends CustUpCore{constructor(e){super(e),this.uiSelect()}uiSelect(){switch(this.options.ui_type){case"resumeUploaderUI":this.resumeUploaderUI();break;case"bare":this.bareUploaderUI();break;case"detached":this.detachedUploaderUI();break;case"profilePicture":this.profilePictureUI();break;case"elegant":this.elegantUI()}this.map_override_styles_to_default_styles(this.options.default_styles_override),this.options.autoInitialize&&this.initializeUI()}resumeUploaderUI(){this.map_override_styles_to_default_styles({outerContainer:["RUIOuterContainer",!0],defaultUI:["RUIDefaultUIEl",!0],defaultUIUploadIconsContainer:["RUIDefaultUIUploadIconsContainer",!0]}),this.options.display_file_sources=!1,this.options._custupDefaultUploadSentence=`
Upload a file or drag and drop here
Accepted Files: ${0==this.options.allowed_file_types.length?"All":this.options.allowed_file_types.join(", ").toUpperCase()} Up to ${this.parseFileSize(this.options.maximumAllowedFileSize)}
-
`,(this.options.allowed_tools=null)===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='resumeUploaderUI.']")&&console.warn(this.libraryName+": Please include the resumeUploaderUI css file")}bareUploaderUI(){this.map_override_styles_to_default_styles({outerContainer:["BareUIOuterContainer",!0],innerContainer:["BareUIInnerContainer",!0],defaultUI:["BareUIDefaultUIEl",!0],defaultUIUploadIconsContainer:["BareUIDefaultUIUploadIconsContainer",!0]}),this.options.allowed_tools=null,this.options.allowed_sources=null,this.options.disable_scrollbar=!0;var e=document.createElement("div"),t=document.createElement("div"),l=(t.className="BareUIDefaultUIInnerContent",document.createElement("div")),n=(l.style.width="50px",l.style.height="50px",l.innerHTML=this.ui_icons.upload_circle,document.createElement("div")),o=(n.innerHTML='Drop files here',document.createElement("div"));o.className="BareUIDefaultUIInnerContentLastItem",o.innerHTML="or Select files",t.appendChild(l),t.appendChild(n),t.appendChild(o),e.appendChild(t),this.options._custupDefaultUploadSentence=e.innerHTML,null===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='bare.']")&&console.warn(this.libraryName+": Please include the bare css file")}detachedUploaderUI(){this.options.use_default_file_display_ui=!1,this.options.persist_default_ui=!0,this.options.allowed_sources=null;var e=document.createElement("div"),t=document.createElement("div"),l=(t.style.lineHeight="30px",document.createElement("div")),n=(l.innerHTML=this.ui_icons.unknown_file,l.className="DUIIconContainer",document.createElement("div")),o=(n.innerHTML="Drag and drop your files here",n.className="DUITextContainer1",document.createElement("div"));o.innerHTML="or Click to browse from your computer",t.appendChild(l),t.appendChild(n),t.appendChild(o),e.append(t),this.options._custupDefaultUploadSentence=e.innerHTML;const d=document.createElement("div"),i=(d.className="DUIBottomButtonContainer",document.createElement("button")),r=(i.className="DUIUploadButton",i.innerHTML="Upload",i.type="button",i.onclick=e=>this.upload(),document.createElement("button"));r.className="DUIClearButton",r.innerHTML="Clear",r.type="button",r.onclick=()=>{this.clear_files(),d.style.display="none",this._custupFooterEl.querySelector(".inner").innerHTML=""};l=0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("clear_files"),n=0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("upload");l&&d.appendChild(r),n&&d.appendChild(i),this.map_override_styles_to_default_styles({outerContainer:["DUIOuterContainer",!0],innerContainer:["DUIInnerContainer",!0],custupInnerContainerWrapperEl:["DUIInnerContainerWrapper",!0],defaultUI:["DUIDefaultUI",!0],footerContainer:"DUIFooterContainer",headerContainer:"DUIHeaderContainer",file_wrapper_el:"DHIFileInnerWrapper"}),this.on("file.beforeAdded",e=>{const t=document.createElement("div");t.style.width="100%",t.className="DUIFileContainer",t.id=e.file.id;var l=document.createElement("div"),n=(l.className="DHIFilePreviewEl",this.makeFileDisplayElement(e.file,l,e.base64),document.createElement("div")),o=(n.className="DHIFileDetails",document.createElement("div")),i=(o.className="DHITextContainer",document.createElement("div")),r=document.createElement("div"),s=(r.className="DHIFilesizeContainer",r.innerHTML=this.parseFileSize(e.file.size),document.createElement("div")),i=(s.className="DHIProgressText",i.innerHTML=this.clipFileNameIfShouldClip(e.file.name),o.appendChild(i),o.appendChild(s),document.createElement("div")),s=(i.className="DHIUploadProgressContainer",document.createElement("div")),a=(s.className="DHIMainProgress",document.createElement("div")),s=(a.className="DHIProgressInner",s.appendChild(a),i.appendChild(s),a.style.width="0%",n.appendChild(o),n.appendChild(r),n.appendChild(i),document.createElement("div"));s.className="DHICloseBtnContainer",s.innerHTML=this.ui_icons.red_circle_cancel,s.onclick=()=>this.remove_file(e.file.id,()=>t.remove()),t.appendChild(l),t.appendChild(n),t.appendChild(s),this._custupFooterEl.querySelector(".inner").append(t),d.style.display="flex"}),this.on("library.init",()=>{this._custupFooterEl.append(d)}),this.on("file.removed",e=>{0==e.files_count&&(d.style.display="none")}),this.on("upload.beforeStart",()=>{i.disabled=!0,r.disabled=!0,i.innerHTML="Uploading..."}),this.on("upload.success",e=>{i.disabled=!1,r.disabled=!1,i.innerHTML="Upload"}),this.on("upload.error",e=>{i.disabled=!1,r.disabled=!1,i.innerHTML="Upload";var t=this._custupFooterEl.querySelector(".inner").querySelector("div.DUIFileContainer#"+e.file.id),t=(t.querySelector(".DHIUploadProgressContainer").querySelector(".DHIProgressInner").style.backgroundColor="red",t.querySelector(".DHIProgressText")),l=document.createElement("div");l.className="DHIRetryButton",l.innerHTML="Retry",l.onclick=()=>this.retry_upload(e.file.id),this.options.single_upload||(t.innerHTML=""),this.options.single_upload||t.append(l)}),this.on("upload.progress",e=>{var t=this._custupFooterEl.querySelector(".inner").querySelector("div.DUIFileContainer#"+e.file.id),l=t.querySelector(".DHIUploadProgressContainer"),t=(l.style.display="flex",t.querySelector(".DHIProgressText")),l=l.querySelector(".DHIProgressInner"),n=(l.style.backgroundColor="rgb(39, 39, 148)",e.progressEvent.loaded/e.progressEvent.total*100);l.style.width=n+"%",t.innerHTML=100==n?"100%":n.toFixed(1)+"%",e.progressEvent.loaded>=e.progressEvent.total&&(l.style.backgroundColor="green")}),null===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='detached.']")&&console.warn(this.libraryName+": Please include the detached css file")}profilePictureUI(){this.options.allowed_sources=null,this.options.display_ui_tools=!1,this.options.disable_scrollbar=!0,this.options.minNumberOfFiles=1,this.options.maxNumberOfFiles=1,this.options.show_file_remove_btn=!1,this.options.show_file_details_container=!1,this.options.allowed_file_types=["jpg","png","jpeg","jpg"],this.map_override_styles_to_default_styles({outerContainer:["PPUIOuterContainer",!0],innerContainer:["PPUIInnerContainer",!0],custupInnerContainerWrapperEl:["PPUIInnerContainerWrapper",!0],fileDisplayUI:["PPUIFileDisplayUI",!0],fileUIOuterContainer:["PPUIFileUIOuter",!0],fileUI:["PPUIFileUI",!0],defaultUI:["PPUIDefaultUI",!0],footerContainer:"PPUIFooterContainer"});var e=document.createElement("div"),t=(e.className="PPUIDefaultUIInner",document.createElement("div")),l=(t.className="PPUIDefaultUIInnerIcon",t.innerHTML=this.ui_icons.plus,document.createElement("div"));l.innerHTML="Upload Profile Picture",e.appendChild(t),e.appendChild(l),this.options._custupDefaultUploadSentence=e.innerHTML;const n=document.createElement("div");n.className="PPUIButtonToolsContainer";var t=document.createElement("button"),l=(t.className="PPUIUploadBtn",t.innerHTML="Upload",t.type="button",t.onclick=()=>this.upload(),document.createElement("button")),e=(l.className="PPUIClearBtn",l.type="button",l.innerHTML="Clear",l.onclick=()=>this.clear_files(),0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("clear_files")),o=0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("upload");e&&n.appendChild(l),o&&n.appendChild(t),this.on("file.afterAdded",()=>{this._custupFooterEl.querySelector(".inner").append(n)}),this.on("file.all_removed",()=>{this._custupFooterEl.querySelector(".inner").innerHTML=""}),null===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='profilePicture.']")&&console.warn(this.libraryName+": Please include the profilePicture css file")}} \ No newline at end of file +
`,(this.options.allowed_tools=null)===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='resumeUploaderUI.']")&&console.warn(this.libraryName+": Please include the resumeUploaderUI css file")}bareUploaderUI(){this.map_override_styles_to_default_styles({outerContainer:["BareUIOuterContainer",!0],innerContainer:["BareUIInnerContainer",!0],defaultUI:["BareUIDefaultUIEl",!0],defaultUIUploadIconsContainer:["BareUIDefaultUIUploadIconsContainer",!0]}),this.options.allowed_tools=null,this.options.display_file_sources=!1,this.options.disable_scrollbar=!0;var e=document.createElement("div"),t=document.createElement("div"),i=(t.className="BareUIDefaultUIInnerContent",document.createElement("div")),n=(i.style.width="50px",i.style.height="50px",i.innerHTML=this.ui_icons.upload_circle,document.createElement("div")),l=(n.innerHTML='Drop files here',document.createElement("div"));l.className="BareUIDefaultUIInnerContentLastItem",l.innerHTML="or Select files",t.appendChild(i),t.appendChild(n),t.appendChild(l),e.appendChild(t),this.options._custupDefaultUploadSentence=e.innerHTML,null===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='bare.']")&&console.warn(this.libraryName+": Please include the bare css file")}detachedUploaderUI(){this.options.use_default_file_display_ui=!1,this.options.persist_default_ui=!0,this.options.display_file_sources=!1;var e=document.createElement("div"),t=document.createElement("div"),i=(t.style.lineHeight="30px",document.createElement("div")),n=(i.innerHTML=this.ui_icons.unknown_file,i.className="DUIIconContainer",document.createElement("div")),l=(n.innerHTML="Drag and drop your files here",n.className="DUITextContainer1",document.createElement("div"));l.innerHTML="or Click to browse from your computer",t.appendChild(i),t.appendChild(n),t.appendChild(l),e.append(t),this.options._custupDefaultUploadSentence=e.innerHTML;const d=document.createElement("div"),o=(d.className="DUIBottomButtonContainer",document.createElement("button")),r=(o.className="DUIUploadButton",o.innerHTML="Upload",o.type="button",o.onclick=e=>this.upload(),document.createElement("button"));r.className="DUIClearButton",r.innerHTML="Clear",r.type="button",r.onclick=()=>{this.clear_files(),d.style.display="none",this._custupFooterEl.querySelector(".inner").innerHTML=""};i=0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("clear_files"),n=0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("upload");i&&d.appendChild(r),n&&d.appendChild(o),this.map_override_styles_to_default_styles({outerContainer:["DUIOuterContainer",!0],innerContainer:["DUIInnerContainer",!0],custupInnerContainerWrapperEl:["DUIInnerContainerWrapper",!0],defaultUI:["DUIDefaultUI",!0],footerContainer:"DUIFooterContainer",headerContainer:"DUIHeaderContainer",file_wrapper_el:"DHIFileInnerWrapper"}),this.on("file.beforeAdded",e=>{const t=document.createElement("div");t.style.width="100%",t.className="DUIFileContainer",t.id=e.file.id;var i=document.createElement("div"),n=(i.className="DHIFilePreviewEl",this.makeFileDisplayElement(e.file,i,e.base64),document.createElement("div")),l=(n.className="DHIFileDetails",document.createElement("div")),o=(l.className="DHITextContainer",document.createElement("div")),r=document.createElement("div"),s=(r.className="DHIFilesizeContainer",r.innerHTML=this.parseFileSize(e.file.size),document.createElement("div")),o=(s.className="DHIProgressText",o.innerHTML=this.clipFileNameIfShouldClip(e.file.name),l.appendChild(o),l.appendChild(s),document.createElement("div")),s=(o.className="DHIUploadProgressContainer",document.createElement("div")),a=(s.className="DHIMainProgress",document.createElement("div")),s=(a.className="DHIProgressInner",s.appendChild(a),o.appendChild(s),a.style.width="0%",n.appendChild(l),n.appendChild(r),n.appendChild(o),document.createElement("div"));s.className="DHICloseBtnContainer",s.innerHTML=this.ui_icons.red_circle_cancel,s.onclick=()=>this.remove_file(e.file.id,()=>t.remove()),t.appendChild(i),t.appendChild(n),t.appendChild(s),this._custupFooterEl.querySelector(".inner").append(t),d.style.display="flex"}),this.on("library.init",()=>{this._custupFooterEl.append(d)}),this.on("file.removed",e=>{0==e.files_count&&(d.style.display="none")}),this.on("upload.beforeStart",()=>{o.disabled=!0,r.disabled=!0,o.innerHTML="Uploading..."}),this.on("upload.success",e=>{o.disabled=!1,r.disabled=!1,o.innerHTML="Upload"}),this.on("upload.error",e=>{o.disabled=!1,r.disabled=!1,o.innerHTML="Upload";var t=this._custupFooterEl.querySelector(".inner").querySelector("div.DUIFileContainer#"+e.file.id),t=(t.querySelector(".DHIUploadProgressContainer").querySelector(".DHIProgressInner").style.backgroundColor="red",t.querySelector(".DHIProgressText")),i=document.createElement("div");i.className="DHIRetryButton",i.innerHTML="Retry",i.onclick=()=>this.retry_upload(e.file.id),this.options.single_upload||(t.innerHTML=""),this.options.single_upload||t.append(i)}),this.on("upload.progress",e=>{var t,i,n;this.options.single_upload||((i=(t=this._custupFooterEl.querySelector(".inner").querySelector("div.DUIFileContainer#"+e.file.id)).querySelector(".DHIUploadProgressContainer")).style.display="flex",t=t.querySelector(".DHIProgressText"),(i=i.querySelector(".DHIProgressInner")).style.backgroundColor="rgb(39, 39, 148)",n=e.progressEvent.loaded/e.progressEvent.total*100,i.style.width=n+"%",t.innerHTML=100==n?"100%":n.toFixed(1)+"%",e.progressEvent.loaded>=e.progressEvent.total&&(i.style.backgroundColor="green"))}),null===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='detached.']")&&console.warn(this.libraryName+": Please include the detached css file")}profilePictureUI(){this.options.display_file_sources=!1,this.options.display_ui_tools=!1,this.options.disable_scrollbar=!0,this.options.minNumberOfFiles=1,this.options.maxNumberOfFiles=1,this.options.show_file_remove_btn=!1,this.options.show_file_details_container=!1,this.options.allowed_file_types=["jpg","png","jpeg","jpg"],this.map_override_styles_to_default_styles({outerContainer:["PPUIOuterContainer",!0],innerContainer:["PPUIInnerContainer",!0],custupInnerContainerWrapperEl:["PPUIInnerContainerWrapper",!0],fileDisplayUI:["PPUIFileDisplayUI",!0],fileUIOuterContainer:["PPUIFileUIOuter",!0],fileUI:["PPUIFileUI",!0],defaultUI:["PPUIDefaultUI",!0],footerContainer:"PPUIFooterContainer"});var e=document.createElement("div"),t=(e.className="PPUIDefaultUIInner",document.createElement("div")),i=(t.className="PPUIDefaultUIInnerIcon",t.innerHTML=this.ui_icons.plus,document.createElement("div"));i.innerHTML="Upload Profile Picture",e.appendChild(t),e.appendChild(i),this.options._custupDefaultUploadSentence=e.innerHTML;const n=document.createElement("div");n.className="PPUIButtonToolsContainer";var t=document.createElement("button"),i=(t.className="PPUIUploadBtn",t.innerHTML="Upload",t.type="button",t.onclick=()=>this.upload(),document.createElement("button")),e=(i.className="PPUIClearBtn",i.type="button",i.innerHTML="Clear",i.onclick=()=>this.clear_files(),0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("clear_files")),l=0==this.options.allowed_tools?.length||this.options.allowed_tools?.includes("upload");e&&n.appendChild(i),l&&n.appendChild(t),this.on("file.afterAdded",()=>{this._custupFooterEl.querySelector(".inner").append(n)}),this.on("file.all_removed",()=>{this._custupFooterEl.querySelector(".inner").innerHTML=""}),null===document.querySelector("[href*='all.min.']")&&null===document.querySelector("[href*='profilePicture.']")&&console.warn(this.libraryName+": Please include the profilePicture css file")}elegantUI(){const m=()=>window.screen.width<=768;this.map_override_styles_to_default_styles({outerContainer:["EUIOuterContainer",!0],innerContainer:["EUIInnerContainer",!0],sidebarLeftContainer:["EUISidebarLeftContainer",!0],custupInnerContainerWrapperEl:["EUIInnerContainerWrapper",!0],headerContainer:["EUIHeaderContainer",!0],defaultUI:["EUIDefaultUI",!0],defaultUIInnerContentEl:["EUIDefaultUIInnerContentEl",!0],filePreviewer:["EUIFilePreviewer",!0],fileDisplayUI:["EUIFileDisplayUI",!0],fileUIOuterContainer:["EUIFileUIOuterContainer",!0],fileUI:["EUIFileUIMainContainer",!0],close_popup_btn:["EUIClosePopupBtn",!0],footerContainer:["EUIFooterContainer",!0],footerContainer:"EUIFooterContainer",defaultUIUploadSentenceContainer:["EUIDefaultUIUploadSentenceContainer",!0]}),this.options.display_file_sources=!1,this.options.use_default_file_display_ui=!0,this.options.display_ui_tools=!1,this.options.show_file_remove_btn=!1,this.options.show_file_details_container=!1,this.options.disable_scrollbar=!0,this.options.show_upload_progress_bar=!1,this.options.show_upload_error_overlay=!1,this.options.disable_select_files_from_device=m(),this.options.external_source_style_override={...this.options.external_source_style_override,container:["EUIExternalSourceContainer",!0]},this.options.media_capture_source_style_override={...this.options.media_capture_source_style_override,container:["EUIMediaSourceContainer",!0]},this.options.css_font_name="Roboto-regular, Roboto, sans-serif";var e=document.createElement("div"),t=document.createElement("div"),i=(t.className="EUIDefaultUIFileSelectTip",document.createElement("div")),n=(i.className="EUIFileTipIconContainer",i.innerHTML=this.ui_icons.add_file_filled,document.createElement("div")),l=(n.className="EUIFileTipText1",n.innerHTML="Select Files to Upload",document.createElement("div"));l.className="EUIFileTipText2",l.innerHTML="or Drag and Drop Files",t.appendChild(i),t.appendChild(n),t.appendChild(l),e.appendChild(t),this.options._custupDefaultUploadSentence=e.innerHTML,this.on("library.init",()=>{let d=!1,n=null;const c=()=>{var e=document.createElement("div"),t=document.createElement("button"),t=(t.innerHTML="Deselect All",t.type="button",t.onclick=()=>this.clear_files(),e.appendChild(t),document.createElement("div")),i=document.createElement("button");i.type="button",i.innerHTML="Upload",t.appendChild(i),i.onclick=()=>this.upload(),n=i,this._custupFooterEl.querySelector(".inner").append(e),this._custupFooterEl.querySelector(".inner").append(t),this._custupEl.style.setProperty("--footer-container-height",this._custupFooterEl.clientHeight+"px"),d=!0},t=()=>{this._custupFooterEl.querySelector(".inner").innerHTML="",this._custupEl.style.setProperty("--footer-container-height",this._custupFooterEl.clientHeight+"px"),d=!1},i=document.createElement("div"),u=(i.innerHTML=this.ui_icons.desktop_device,this._custupSidebarLeftEl.append(i),i.dataset.custupIconActive="true",document.createElement("div")),e=(u.className="EUIHeaderTitleBar",this._custupHeaderEl.querySelector(".inner").append(u),u.innerHTML=m()?"Select from":this.ui_icons.desktop_device,document.createElement("div"));e.className="EUIFilterBoxContainer";var l=document.createElement("div"),o=(l.className="EUIFilterBoxInputWrapper",document.createElement("input")),r=(o.placeholder="Filter",o.className="EUIFilterBox",document.createElement("div"));r.innerHTML=this.ui_icons.search_icon,o.onkeyup=e=>{const t=e.currentTarget.value,i=this.get_all_files().filter(e=>-1==e.name.toLowerCase().indexOf(t.toLowerCase()));this.get_all_files().forEach(e=>{""!=t&&i.includes(e)?this._custupEl.querySelector("#"+e.id).style.setProperty("display","none","important"):this._custupEl.querySelector("#"+e.id).style.setProperty("display","flex","important")})},l.appendChild(r),l.appendChild(o),e.appendChild(l),this._custupHeaderEl.querySelector(".inner").append(e);const s=document.createElement("div");s.className="EUIFileStateInfoContainer";r=document.createElement("div");r.className="EUIFileStateInfoContainerText",r.innerHTML="Files",s.appendChild(r),this._custupHeaderEl.querySelector(".inner").append(s);const a=()=>{this._custupHeaderEl.style.setProperty("height","auto","important"),e.style.display="none",s.style.display="none",this._custupEl.style.setProperty("--header-container-height",this._custupHeaderEl.offsetHeight+"px")},p=()=>{this._custupHeaderEl.style.setProperty("height","auto","important"),e.style.display="flex",s.style.display="flex",this._custupEl.style.setProperty("--header-container-height",this._custupHeaderEl.offsetHeight+"px")},h=(i.onclick=e=>{this.show_add_file_ui(),this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(e=>e.removeAttribute("data-custup-icon-active")),i.dataset.custupIconActive="true",u.innerHTML=e.currentTarget.innerHTML,a(),t(),this.close_file_source_popup()},e=>{this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(e=>e.removeAttribute("data-custup-icon-active")),e.currentTarget.dataset.custupIconActive="true",u.innerHTML=e.currentTarget.innerHTML,u.querySelector("div")?.remove(),a()}),_=()=>{var e,t,i;this._custupSidebarLeftEl.innerHTML="",m()||this.get_file_sources(this._custupSidebarLeftEl,h),m()?(this._custupDefaultUIInnerContentEl.innerHTML="",e=this.get_file_sources(),(t=document.createElement("div")).innerHTML=this.ui_icons.desktop_device,t.classList.add("file-source"),(i=document.createElement("div")).innerHTML="Select from Device",t.appendChild(i),t.onclick=e=>this.select_file_from_device(e),this._custupDefaultUIInnerContentEl.append(t),e.map(e=>{e.classList.add("file-source");var t=document.createElement("div");t.innerHTML=e.title,e.append(t),e.addEventListener("click",h),this._custupDefaultUIInnerContentEl.append(e)}),this.set_scroll_pointer_event(this._custupDefaultUIEl,this._custupDefaultUIInnerContentEl)):this._custupDefaultUIInnerContentEl.innerHTML=this.options._custupDefaultUploadSentence};_(),window.onresize=e=>{_()},this.on("file_source.closed",()=>{this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(e=>e.removeAttribute("data-custup-icon-active")),u.innerHTML=m()?"Select from":this.ui_icons.desktop_device,0{d||c();var n=document.createElement("div"),l=(n.className="EUIFileDetailsContainer",document.createElement("div")),o=(l.className="EUIFilenameSizeContainer",document.createElement("div")),r=(o.innerHTML=t.name,document.createElement("div")),o=(r.innerHTML=this.parseFileSize(t.size),l.appendChild(o),l.appendChild(r),document.createElement("div")),r=(o.className="EUIFileDisplayToolsContainer",document.createElement("div")),s=(r.innerHTML=this.ui_icons.cancel,r.onclick=e=>{this.remove_file(t.id)},document.createElement("div")),a=(s.innerHTML=this.ui_icons.eye,s.onclick=e=>{this.preview_file(t.id)},document.createElement("div")),a=(a.innerHTML=this.ui_icons.retry,a.id="retry_"+t.id,a.style.display="none",a.onclick=e=>{this.retry_upload(t.id)},o.appendChild(a),this.is_file_previewable(t)&&o.appendChild(s),o.appendChild(r),document.createElement("div")),s=(a.className="EUIProgressIndicatorContainer",document.createElement("div"));a.appendChild(s),n.appendChild(l),n.appendChild(o),e.appendChild(n),e.appendChild(a),u.innerHTML="Selected Files "+i,p()}),this.on("file.all_removed",e=>{t(),u.innerHTML=m()?"Select from":this.ui_icons.desktop_device,a(),setTimeout(()=>{_()},100)}),this.on("file.removed",e=>{u.innerHTML="Selected Files "+e.files_count}),this.on("upload.error",e=>{this._custupEl.querySelector("#"+e.file.id).querySelector('[id*="retry_"]').style.display="flex",n.innerHTML="Upload",n.disabled=!1}),this.on("upload.retry",e=>{this._custupEl.querySelector("#"+e.file.id).querySelector('[id*="retry_"]').style.display="none"}),this.on("upload.progress",e=>{var t,i;this.options.single_upload||(i=(t=this._custupEl.querySelector("#"+e.file.id)).querySelector(".EUIFilenameSizeContainer div:last-child"),t.querySelector(".EUIProgressIndicatorContainer div").style.width=100*e.progressEvent.progress+"%",i.innerHTML=this.parseFileSize(e.progressEvent.loaded)+" / "+this.parseFileSize(e.progressEvent.total))}),this.on("upload.beforeStart",e=>{n.innerHTML="Uploading...",n.disabled=!0}),this.on("upload.all_finished",e=>{n.innerHTML="Upload",n.disabled=!1}),this.on("default_ui.closed",()=>{this._custupEl.querySelectorAll('[data-custup-icon-active="true"]').forEach(e=>e.removeAttribute("data-custup-icon-active")),u.innerHTML="Selected Files",0; upload_automatically?: boolean; @@ -119,4 +121,10 @@ export interface ICustUpOptions { persist_files?: boolean; persist_type?: 'soft' | 'hard'; alert_timeout_time?: number; + messages: { + timeout: number; + }; + display_file_sources: boolean; + show_upload_progress_bar?: boolean; + } \ No newline at end of file diff --git a/utils/icons.d.ts b/utils/icons.d.ts index f36960d..bcd2f94 100644 --- a/utils/icons.d.ts +++ b/utils/icons.d.ts @@ -1,6 +1,7 @@ declare const _default: { add_file: string; add_file_2: string; + add_file_filled: string; delete_filled: string; delete: string; edit: string; @@ -54,6 +55,11 @@ declare const _default: { openai_logo: string; red_circle_cancel: string; upload_circle: string; + loading_partial: string; + desktop_device: string; + mobile_device: string; + search_icon: string; + bars: string; }; export default _default; //# sourceMappingURL=icons.d.ts.map \ No newline at end of file diff --git a/utils/icons.js b/utils/icons.js index 7c95084..43a7bf3 100644 --- a/utils/icons.js +++ b/utils/icons.js @@ -28,6 +28,10 @@ export default { `, + add_file_filled: ` + Combined Shape + + `, delete_filled: ` @@ -120,14 +124,13 @@ export default { `, cancel: ` - - - - - - + + + + + + - `, remove: ` @@ -708,6 +711,46 @@ export default { + `, + loading_partial: ` + + `, + desktop_device: ` + + + + + + + + `, + mobile_device: ` + + + + + mobile + + + + `, + search_icon: ` + + + + + + + + `, + bars: ` + + + + + + + ` }