diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
new file mode 100644
index 000000000000..0b6d30a71c60
--- /dev/null
+++ b/client/src/api/datatypes.ts
@@ -0,0 +1,3 @@
+import { type components } from "@/api";
+
+export type CompositeFileInfo = components["schemas"]["CompositeFileInfo"];
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index e743d2b4b33e..b1b94e8d70a5 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -5,10 +5,11 @@ import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import draggable from "vuedraggable";
 
 import type { HDASummary, HistoryItemSummary } from "@/api";
+import { Toast } from "@/composables/toast";
 import STATES from "@/mvc/dataset/states";
 import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
@@ -17,6 +18,8 @@ import FormSelectMany from "../Form/Elements/FormSelectMany/FormSelectMany.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 import DatasetCollectionElementView from "@/components/Collections/ListDatasetCollectionElementView.vue";
 
+const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
+
 interface Props {
     historyId: string;
     initialElements: HistoryItemSummary[];
@@ -75,15 +78,6 @@ const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
 /** Are we filtering by datatype? */
 const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
 
-// TODO: This needs to be done in the other creators as well
-watch(
-    () => props.initialElements,
-    () => {
-        // for any new/removed elements, add them to working elements
-        _elementsSetUp();
-    }
-);
-
 /** set up instance vars function */
 function _instanceSetUp() {
     /** Ids of elements that have been selected by the user - to preserve over renders */
@@ -107,6 +101,26 @@ function _elementsSetUp() {
     // reverse the order of the elements to emulate what we have in the history panel
     workingElements.value.reverse();
 
+    // for inListElements, reset their values (in order) to datasets from workingElements
+    const inListElementsPrev = inListElements.value;
+    inListElements.value = [];
+    inListElementsPrev.forEach((prevElem) => {
+        const element = workingElements.value.find((e) => e.id === prevElem.id);
+        const problem = _isElementInvalid(prevElem);
+
+        if (element) {
+            inListElements.value.push(element);
+        } else if (problem) {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        } else {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${localize("has been removed from the collection")}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        }
+    });
+
     // _ensureElementIds();
     _validateElements();
     _mangleDuplicateNames();
@@ -285,12 +299,17 @@ function onUpdateHideSourceItems(newHideSourceItems: boolean) {
     hideSourceItems.value = newHideSourceItems;
 }
 
-// TODO: No need to use `onMounted` here, this can be done in the `setup`
-onMounted(() => {
-    _instanceSetUp();
-    _elementsSetUp();
-    saveOriginalNames();
-});
+_instanceSetUp();
+saveOriginalNames();
+
+watch(
+    () => props.initialElements,
+    () => {
+        // for any new/removed elements, add them to working elements
+        _elementsSetUp();
+    },
+    { immediate: true }
+);
 
 watch(
     () => datatypesMapper.value,
@@ -302,6 +321,29 @@ watch(
     { immediate: true }
 );
 
+function addUploadedFiles(files: HDASummary[]) {
+    const returnedElements = props.fromSelection ? workingElements : inListElements;
+    files.forEach((f) => {
+        const file = props.fromSelection ? f : workingElements.value.find((e) => e.id === f.id);
+        const problem = _isElementInvalid(f);
+        if (file && !returnedElements.value.find((e) => e.id === file.id)) {
+            returnedElements.value.push(file);
+        } else if (problem) {
+            invalidElements.value.push("Uploaded item: " + f.name + "  " + problem);
+            Toast.error(
+                localize(`Dataset ${f.hid}: ${f.name} ${problem} and is an invalid element for this collection`),
+                localize("Uploaded item is invalid")
+            );
+        } else {
+            invalidElements.value.push("Uploaded item: " + f.name + " could not be added to the collection");
+            Toast.error(
+                localize(`Dataset ${f.hid}: ${f.name} could not be added to the collection`),
+                localize("Uploaded item is invalid")
+            );
+        }
+    });
+}
+
 /** find the element in the workingElements array and update its name */
 function renameElement(element: any, name: string) {
     element = workingElements.value.find((e) => e.id === element.id);
@@ -420,6 +462,7 @@ function renameElement(element: any, name: string) {
                     :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
                     :extensions="extensions"
+                    @add-uploaded-files="addUploadedFiles"
                     @on-update-datatype-toggle="changeDatatypeFilter"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate">
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 979a6bdf1ead..f7a9ab5f6d5a 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -2,9 +2,10 @@
 import { faArrowsAltV } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton } from "bootstrap-vue";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import type { HDASummary, HistoryItemSummary } from "@/api";
+import { Toast } from "@/composables/toast";
 import STATES from "@/mvc/dataset/states";
 import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
@@ -14,6 +15,8 @@ import type { DatasetPair } from "../History/adapters/buildCollectionModal";
 import DatasetCollectionElementView from "./ListDatasetCollectionElementView.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
+const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
+
 interface SelectedDatasetPair {
     forward: HDASummary | undefined;
     reverse: HDASummary | undefined;
@@ -71,6 +74,24 @@ const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
 /** Are we filtering by datatype? */
 const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
 
+watch(
+    () => props.initialElements,
+    () => {
+        // initialize; and then for any new/removed elements, sync working elements
+        _elementsSetUp();
+
+        // TODO: fix this, now either of those will almost always be empty
+        if (props.fromSelection && !initialSuggestedName.value) {
+            initialSuggestedName.value = _guessNameForPair(
+                workingElements.value[0] as HDASummary,
+                workingElements.value[1] as HDASummary,
+                removeExtensions.value
+            );
+        }
+    },
+    { immediate: true }
+);
+
 function _elementsSetUp() {
     /** a list of invalid elements and the reasons they aren't valid */
     invalidElements.value = [];
@@ -85,6 +106,35 @@ function _elementsSetUp() {
     // reverse the order of the elements to emulate what we have in the history panel
     workingElements.value.reverse();
 
+    // for inListElements, reset their values (in order) to datasets from workingElements
+    const inListElementsPrev = inListElements.value;
+    inListElements.value = { forward: undefined, reverse: undefined };
+
+    for (const key of ["forward", "reverse"]) {
+        const prevElem = inListElementsPrev[key as keyof SelectedDatasetPair];
+        if (!prevElem) {
+            continue;
+        }
+        const element = workingElements.value.find(
+            (e) => e.id === inListElementsPrev[key as keyof SelectedDatasetPair]?.id
+        );
+        const problem = _isElementInvalid(prevElem);
+        if (element) {
+            inListElements.value[key as keyof SelectedDatasetPair] = element;
+        } else if (problem) {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        } else {
+            const invalidMsg = `${prevElem.hid}: ${prevElem.name} ${localize("has been removed from the collection")}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Invalid element"));
+        }
+    }
+
+    // TODO: Next thing to add is: If the user adds an uploaded file, that is eventually nuked from workingElements
+    //       because it is invalid, Toast an error for that file by keeping track of uploaded ids in a separate list
+
     _ensureElementIds();
     _validateElements();
 }
@@ -176,6 +226,21 @@ function swapButton() {
     }
 }
 
+function addUploadedFiles(files: HDASummary[]) {
+    // Any added files are added to workingElements in _elementsSetUp
+    // The user will have to manually select the files to add them to the pair
+
+    // Check for validity of uploads
+    files.forEach((file) => {
+        const problem = _isElementInvalid(file);
+        if (problem) {
+            const invalidMsg = `${file.hid}: ${file.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Uploaded item invalid for pair"));
+        }
+    });
+}
+
 function clickedCreate(collectionName: string) {
     if (state.value !== "error" && exactlyTwoValidElements.value) {
         const returnedPair = {
@@ -270,17 +335,6 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
 
     return fwdLCS + revLCS;
 }
-
-onMounted(() => {
-    _elementsSetUp();
-
-    // TODO: fix this, now either of those will almost always be empty
-    initialSuggestedName.value = _guessNameForPair(
-        workingElements.value[0] as HDASummary,
-        workingElements.value[1] as HDASummary,
-        removeExtensions.value
-    );
-});
 </script>
 
 <template>
@@ -377,7 +431,9 @@ onMounted(() => {
                     :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
                     :suggested-name="initialSuggestedName"
+                    :extensions="props.extensions"
                     :extensions-toggle="removeExtensions"
+                    @add-uploaded-files="addUploadedFiles"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 4bacdbea0362..ae871c69c124 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -9,10 +9,12 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import draggable from "vuedraggable";
 
 import type { HDASummary, HistoryItemSummary } from "@/api";
+import { Toast } from "@/composables/toast";
+import STATES from "@/mvc/dataset/states";
 import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 // import levenshteinDistance from '@/utils/levenshtein';
 import localize from "@/utils/localization";
@@ -25,6 +27,7 @@ import PairedElementView from "./PairedElementView.vue";
 import UnpairedDatasetElementView from "./UnpairedDatasetElementView.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
+const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
 const COMMON_FILTERS = {
     illumina: ["_1", "_2"],
     Rs: ["_R1", "_R2"],
@@ -173,8 +176,6 @@ const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
 /** Are we filtering by datatype? */
 const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
 
-_elementsSetUp();
-
 function removeExtensionsToggle() {
     removeExtensions.value = !removeExtensions.value;
     generatedPairs.value.forEach((pair, index) => {
@@ -182,6 +183,15 @@ function removeExtensionsToggle() {
     });
 }
 
+watch(
+    () => props.initialElements,
+    () => {
+        // initialize; and then for any new/removed elements, sync working elements
+        _elementsSetUp();
+    },
+    { immediate: true }
+);
+
 /** Set up main data */
 function _elementsSetUp() {
     // a list of invalid elements and the reasons they aren't valid
@@ -195,6 +205,11 @@ function _elementsSetUp() {
     // copy initial list, sort, // TODO: add ids if needed
     // copy initial list, sort, add ids if needed
     workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
+
+    // TODO: Here, we do what we do in other 2 creators; we check the already built pairs
+    //       and sync them with the workingElements, ensuring that there aren't any elements
+    //       in built pairs that no longer exist in workingElements
+
     // _ensureElementIds();
     _validateElements();
     _sortInitialList();
@@ -258,7 +273,7 @@ function _isElementInvalid(element: HistoryItemSummary) {
     if (element.history_content_type === "dataset_collection") {
         return localize("is a collection, this is not allowed");
     }
-    var validState = element.state === "ok" || ["error", "paused"].includes(element.state);
+    var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state as string);
     if (!validState) {
         return localize("has errored, is paused, or is not accessible");
     }
@@ -719,6 +734,21 @@ function changeFilters(filter: keyof typeof COMMON_FILTERS) {
     reverseFilter.value = COMMON_FILTERS[filter][1] as string;
 }
 
+function addUploadedFiles(files: HDASummary[]) {
+    // Any uploaded files are added to workingElements in _elementsSetUp
+    // The user will have to manually select the files to add them to the pair
+
+    // Check for validity of uploads
+    files.forEach((file) => {
+        const problem = _isElementInvalid(file);
+        if (problem) {
+            const invalidMsg = `${file.hid}: ${file.name} ${problem} and ${NOT_VALID_ELEMENT_MSG}`;
+            invalidElements.value.push(invalidMsg);
+            Toast.error(invalidMsg, localize("Uploaded item invalid for pair"));
+        }
+    });
+}
+
 async function clickedCreate(collectionName: string) {
     checkForDuplicates();
     if (state.value == "build") {
@@ -907,6 +937,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                     render-extensions-toggle
                     :extensions-toggle="removeExtensions"
                     :extensions="extensions"
+                    @add-uploaded-files="addUploadedFiles"
                     @onUpdateHideSourceItems="hideSourceItems = $event"
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index edab4d25b136..1dc1ddf36efa 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { faChevronDown, faChevronUp, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faChevronUp, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BFormCheckbox, BFormGroup, BFormInput, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
+import type { HDASummary } from "@/api";
+import type { CompositeFileInfo } from "@/api/datatypes";
+import { AUTO_EXTENSION, getUploadDatatypes } from "@/components/Upload/utils";
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
@@ -18,6 +21,15 @@ const Tabs = {
     upload: 1,
 };
 
+type ExtensionDetails = {
+    id: string;
+    text: string;
+    description: string | null;
+    description_url: string | null;
+    composite_files?: CompositeFileInfo[] | null;
+    upload_warning?: string | null;
+};
+
 interface Props {
     oncancel: () => void;
     historyId: string;
@@ -39,17 +51,25 @@ const emit = defineEmits<{
     (e: "clicked-create", value: string): void;
     (e: "onUpdateHideSourceItems", value: boolean): void;
     (e: "on-update-datatype-toggle", value: "all" | "datatype" | "ext"): void;
+    (e: "add-uploaded-files", value: HDASummary[]): void;
 }>();
 
 const isExpanded = ref(false);
 const currentTab = ref(Tabs.create);
 const collectionName = ref(props.suggestedName);
 const localHideSourceItems = ref(props.hideSourceItems);
+const listExtensions = ref<ExtensionDetails[]>([]);
+const extensionsSet = ref(false);
 
 const validInput = computed(() => {
     return collectionName.value.length > 0;
 });
 
+// If there are props.extensions, filter the list of extensions to only include those
+const validExtensions = computed(() => {
+    return listExtensions.value.filter((ext) => props.extensions?.includes(ext.id));
+});
+
 // Upload properties
 const { config, isConfigLoaded } = useConfig();
 
@@ -61,8 +81,8 @@ const configOptions = computed(() =>
               chunkUploadSize: config.value.chunk_upload_size,
               fileSourcesConfigured: config.value.file_sources_configured,
               ftpUploadSite: config.value.ftp_upload_site,
-              defaultDbKey: config.value.default_genome,
-              defaultExtension: config.value.default_extension,
+              defaultDbKey: config.value.default_genome || "",
+              defaultExtension: config.value.default_extension || "",
           }
         : {}
 );
@@ -71,6 +91,22 @@ const ftpUploadSite = computed(() =>
     currentUser.value && "id" in currentUser.value ? configOptions.value.ftpUploadSite : null
 );
 
+const defaultExtension = computed(() => {
+    if (!configOptions.value || !extensionsSet.value) {
+        return "auto";
+    } else if (!props.extensions?.length) {
+        return configOptions.value.defaultExtension || "auto";
+    } else {
+        return props.extensions[0];
+    }
+});
+
+function addUploadedFiles(value: HDASummary[]) {
+    // TODO: We really need to wait for each of these items to get `state = 'ok'`
+    //       before we can add them to the collection.
+    emit("add-uploaded-files", value);
+}
+
 function clickForHelp() {
     isExpanded.value = !isExpanded.value;
     return isExpanded.value;
@@ -80,6 +116,13 @@ function cancelCreate() {
     props.oncancel();
 }
 
+async function loadExtensions() {
+    listExtensions.value = await getUploadDatatypes(false, AUTO_EXTENSION);
+    extensionsSet.value = true;
+}
+
+loadExtensions();
+
 watch(
     () => localHideSourceItems.value,
     () => {
@@ -195,18 +238,35 @@ watch(
             </template>
             <!-- TODO: This is incomplete; need to return uploadValues to parent -->
             <DefaultBox
-                v-if="configOptions"
+                v-if="configOptions && extensionsSet"
                 :chunk-upload-size="configOptions.chunkUploadSize"
                 :default-db-key="configOptions.defaultDbKey"
-                :default-extension="configOptions.defaultExtension"
-                :effective-extensions="extensions"
+                :default-extension="defaultExtension"
+                :effective-extensions="props.extensions?.length ? validExtensions : listExtensions"
                 :file-sources-configured="configOptions.fileSourcesConfigured"
                 :ftp-upload-site="ftpUploadSite"
                 :has-callback="false"
                 :history-id="historyId"
-                :is-collection="true"
-                :list-db-keys="listDbKeys"
-                @dismiss="currentTab = Tabs.create" />
+                :list-db-keys="[]"
+                disable-footer
+                emit-uploaded
+                @uploaded="addUploadedFiles"
+                @dismiss="currentTab = Tabs.create">
+                <template v-slot:footer>
+                    <div class="d-flex align-items-center justify-content-between mt-2">
+                        <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
+                            <HelpText
+                                uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
+                                :text="localize('Required extensions: ')" />
+                            <strong>{{ orList(extensions) }}</strong>
+                        </BAlert>
+                    </div>
+                </template>
+                <template v-slot:emit-btn-txt>
+                    <FontAwesomeIcon :icon="faPlus" fixed-width />
+                    {{ localize("Add Uploaded") }}
+                </template>
+            </DefaultBox>
         </BTab>
     </BTabs>
 </template>
diff --git a/client/src/components/Help/terms.yml b/client/src/components/Help/terms.yml
index 0b47674c4415..fce6204d6198 100644
--- a/client/src/components/Help/terms.yml
+++ b/client/src/components/Help/terms.yml
@@ -66,6 +66,12 @@ galaxy:
       filteredExtensions: |
         The history is filtered for the extensions that are required for this collection. You might see some
         items with other extensions since those can still be valid inputs via implicit conversion.
+      requiredUploadExtensions: |
+        The extensions that are required for this collection. The files you upload will be assumed to have
+        these extensions. In the case of more than one extension, you can select a specific extension for
+        each individual file above. If there is only one extension, Galaxy will attempt to set that as the
+        extension for each file.
+
 
   jobs:
     states:
diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
index 91c5546be514..3023a3feeb98 100644
--- a/client/src/components/Upload/DefaultBox.vue
+++ b/client/src/components/Upload/DefaultBox.vue
@@ -68,9 +68,17 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    disableFooter: {
+        type: Boolean,
+        default: false,
+    },
+    emitUploaded: {
+        type: Boolean,
+        default: false,
+    },
 });
 
-const emit = defineEmits(["dismiss", "progress"]);
+const emit = defineEmits(["dismiss", "progress", "uploaded"]);
 
 const collectionModalShow = ref(false);
 const collectionSelection = ref([]);
@@ -149,7 +157,7 @@ function eventAnnounce(index, file) {
 }
 
 /** Populates collection builder with uploaded files */
-async function eventBuild() {
+async function eventBuild(openModal = false) {
     try {
         collectionSelection.value = [];
         uploadValues.value.forEach((model) => {
@@ -163,7 +171,11 @@ async function eventBuild() {
                 console.debug("Warning, upload response does not contain outputs.", model);
             }
         });
-        collectionModalShow.value = true;
+        if (openModal) {
+            collectionModalShow.value = true;
+        } else {
+            emit("uploaded", collectionSelection.value);
+        }
     } catch (err) {
         console.error(err);
     }
@@ -387,8 +399,8 @@ defineExpose({
                     :file-name="uploadItem.fileName"
                     :file-size="uploadItem.fileSize"
                     :info="uploadItem.info"
-                    :list-extensions="isCollection ? null : listExtensions"
-                    :list-db-keys="isCollection ? null : listDbKeys"
+                    :list-extensions="!isCollection && listExtensions.length > 1 ? listExtensions : null"
+                    :list-db-keys="!isCollection && listDbKeys.length > 1 ? listDbKeys : null"
                     :percentage="uploadItem.percentage"
                     :space-to-tab="uploadItem.spaceToTab"
                     :status="uploadItem.status"
@@ -405,7 +417,7 @@ defineExpose({
             </div>
             <input ref="uploadFile" type="file" :multiple="multiple" @change="addFiles($event.target.files)" />
         </UploadBox>
-        <div class="upload-footer text-center">
+        <div v-if="!disableFooter" class="upload-footer text-center">
             <span v-if="isCollection" class="upload-footer-title">Collection:</span>
             <UploadSelect
                 v-if="isCollection"
@@ -434,6 +446,7 @@ defineExpose({
                 placeholder="Select Reference"
                 @input="updateDbKey" />
         </div>
+        <slot name="footer" />
         <div class="upload-buttons d-flex justify-content-end">
             <BButton id="btn-local" :disabled="!enableSources" @click="uploadFile.click()">
                 <FontAwesomeIcon icon="fa-laptop" />
@@ -461,9 +474,21 @@ defineExpose({
                 :disabled="!enableBuild"
                 title="Build"
                 :variant="enableBuild ? 'primary' : null"
-                @click="eventBuild">
+                @click="() => eventBuild(true)">
                 <span v-localize>Build</span>
             </BButton>
+            <BButton
+                v-if="emitUploaded"
+                id="btn-emit"
+                :disabled="!enableBuild"
+                title="Use Uploaded Files"
+                :variant="enableBuild ? 'primary' : null"
+                @click="() => eventBuild(false)">
+                <slot name="emit-btn-txt">
+                    <span v-localize>Use Uploaded</span>
+                </slot>
+                ({{ counterSuccess }})
+            </BButton>
             <BButton id="btn-stop" title="Pause" :disabled="!isRunning" @click="eventStop">
                 <span v-localize>Pause</span>
             </BButton>