Skip to main content

Default UI

The defualt UI serves as a major entry to CustUp as it is the default UI that displays and gives users a hint and options on how to start adding files.

An it is also possible to customize it to your taste using options and style override, to change the styles of the default UI check main UI style customization.

There are currently two main components in the default UI

  • The hint text
  • The File source list

and both can be customized to fit into the need of your project

The hint text​

The hint text can hold any HTML element so you can change set the innerHTML of the hint element to anything you like, the hint text can be changed with the _custupDefaultUploadSentence option

const instance1 = new CustUp({
    // ...
    _custupDefaultUploadSentence: `<div>This is a custom HTML element</div>`
})

To hide the hint element you can either set _custupDefaultUploadSentence to null or override the style by adding a new class name to the element with defaultUIUploadSentenceContainer that has display: none

The File source list​

To customize the file source list HTML use the file_source_icons and set any custom HTML to the icons you want to customize

const instance1 = new CustUp({
    file_source_icons: {
        video_camera: '<div style="align-self: center; text-align: center;">V</div>',
        capture_image: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M456-600h320q-27-69-82.5-118.5T566-788L456-600Zm-92 80 160-276q-11-2-22-3t-22-1q-66 0-123 25t-101 67l108 188ZM170-400h218L228-676q-32 41-50 90.5T160-480q0 21 2.5 40.5T170-400Zm224 228 108-188H184q27 69 82.5 118.5T394-172Zm86 12q66 0 123-25t101-67L596-440 436-164q11 2 21.5 3t22.5 1Zm252-124q32-41 50-90.5T800-480q0-21-2.5-40.5T790-560H572l160 276ZM480-480Zm0 400q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"/></svg>',
        openai_dalle_source: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M560-32v-80q117 0 198.5-81.5T840-392h80q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T560-32Zm0-160v-80q50 0 85-35t35-85h80q0 83-58.5 141.5T560-192ZM222-57q-15 0-30-6t-27-17L23-222q-11-12-17-27t-6-30q0-16 6-30.5T23-335l127-127q23-23 57-23.5t57 22.5l50 50 28-28-50-50q-23-23-23-56t23-56l57-57q23-23 56.5-23t56.5 23l50 50 28-28-50-50q-23-23-23-56.5t23-56.5l127-127q12-12 27-18t30-6q15 0 29.5 6t26.5 18l142 142q12 11 17.5 25.5T895-730q0 15-5.5 30T872-673L745-546q-23 23-56.5 23T632-546l-50-50-28 28 50 50q23 23 22.5 56.5T603-405l-56 56q-23 23-56.5 23T434-349l-50-50-28 28 50 50q23 23 22.5 57T405-207L278-80q-11 11-25.5 17T222-57Zm0-79 42-42-142-142-42 42 142 142Zm85-85 42-42-142-142-42 42 142 142Zm184-184 56-56-142-142-56 56 142 142Zm198-198 42-42-142-142-42 42 142 142Zm85-85 42-42-142-142-42 42 142 142ZM448-504Z"/></svg>'
    },
})

Using options​

Currently these are the customizations that can be done to the default UI through using options

  • Persisting the UI
  • Setting and rearranging the icons list

Persisting the UI​

You may want to set the default UI to not automatically hide when file has been added just like the behavior of the detached UI, to achieve that set the persist_default_ui to true which is false by default

const instance1 = new CustUp({
    // ...
    persist_default_ui: true
})

Icons list​

You can rearrange and also choose which file sources you would like to list out on the default UI

To choose or rearrange the file sources icons you can use the allowed_sources option which takes an array of file sources

const instance1 = new CustUp({
    // ...
    allowed_sources: ['dropbox_source', 'record_screen', 'link_source', 'google_drive_source'],
})

The file sources icons will be listed as they listed in the array