CnMassImportDialog

File upload dialog with options and results summary. Supports importing data from files into OpenRegister.

Try it

Loading CnMassImportDialog playground…

Wraps: NcDialog, NcButton

Props

Prop	Type	Default	Description
dialogTitle	String	'Import data'
acceptedTypes	String	'.json,.xlsx,.xls,.csv'	Accepted file types (input accept attribute)
options	Array	[]	Additional import option definitions
fileTypeHelp	Array	[{ label, description }]	Help entries shown in the "Supported file types" list; defaults to JSON, Excel, and CSV entries
canSubmit	Boolean	true	Whether the form is ready to submit. The parent can set this to false (via a slot) while required options are incomplete.
successText	String	'Import completed successfully!'	Message shown in the result phase when all rows imported without errors
partialSuccessText	String	'Import completed with errors. Check the details below.'	Message shown when the import finished but with some errors
loadingText	String	'Importing data — this may take a moment for large files...'	Text shown while the import is running
summaryTitle	String	'Import summary'	Heading above the result summary table
supportedFormatsLabel	String	'Supported file types:'	Label above the file type help list
selectFileLabel	String	'Select file'	Label for the file-picker button
cancelLabel	String	'Cancel'
closeLabel	String	'Close'	Label for the close button shown in the result phase
confirmLabel	String	'Import'
sheetLabel	String	'Sheet'	Column header for the sheet name in the summary table
foundLabel	String	'Found'	Column header for the found-rows count
createdLabel	String	'Created'	Column header for the created-rows count
updatedLabel	String	'Updated'	Column header for the updated-rows count
unchangedLabel	String	'Unchanged'	Column header for the unchanged-rows count
errorsLabel	String	'Errors'	Column header for the error count

Events

Event	Payload	Description
confirm	\{ file, options \}	Import confirmed
close	—	Dialog closed

Slots

Slot	Scope	Description
#import-fields	\{ file \}	Extra fields below file upload

Public Methods

Method	Description
setResult(\{ success?, error?, imported?, skipped? \})	Set import result

Live demo

<template>
  <div>
    <button @click="open = true" style="padding: 6px 16px; border-radius: 4px; background: var(--color-primary-element); color: white; border: none; cursor: pointer;">Import</button>
    <CnMassImportDialog
      v-if="open"
      ref="dlg"
      @confirm="onConfirm"
      @close="open = false" />
  </div>
</template>
<script>
export default {
  data() { return { open: false } },
  methods: {
    async onConfirm(payload) {
      await new Promise(r => setTimeout(r, 800))
      this.$refs.dlg.setResult({ success: true })
    },
  },
}
</script>

Usage

<CnMassImportDialog
  accepted-types=".json,.csv,.xlsx"
  @confirm="onImport"
  @close="showImport = false">
  <template #import-fields="{ file }">
    <NcCheckboxRadioSwitch v-model="overwriteExisting">
      Overwrite existing records
    </NcCheckboxRadioSwitch>
  </template>
</CnMassImportDialog>

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnMassImportDialog.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
dialogTitle	string		() => t('nextcloud-vue', 'Import data')	Dialog title
acceptedTypes	string		'.json,.xlsx,.xls,.csv'	Accepted file types (input accept attribute)
options	array		[]	Import option definitions
fileTypeHelp	array		[ \{ label: 'JSON', description: 'Configuration and objects.' \}, \{ label: 'Excel (.xlsx, .xls)', description: 'Tabular objects data with multiple sheets.' \}, \{ label: 'CSV', description: 'Single table of objects data.' \}, ]	File type help entries
canSubmit	boolean		true	Whether the form is ready to submit (parent can control via slot logic)
successText	string		() => t('nextcloud-vue', 'Import completed successfully!')	Success text when all rows imported without errors
partialSuccessText	string		() => t('nextcloud-vue', 'Import completed with errors. Check the details below.')	Text when import partially succeeded
loadingText	string		() => t('nextcloud-vue', 'Importing data — this may take a moment for large files...')	Text shown while importing
summaryTitle	string		() => t('nextcloud-vue', 'Import summary')
supportedFormatsLabel	string		() => t('nextcloud-vue', 'Supported file types:')
selectFileLabel	string		() => t('nextcloud-vue', 'Select file')
cancelLabel	string		() => t('nextcloud-vue', 'Cancel')
closeLabel	string		() => t('nextcloud-vue', 'Close')
confirmLabel	string		() => t('nextcloud-vue', 'Import')
sheetLabel	string		() => t('nextcloud-vue', 'Sheet')
foundLabel	string		() => t('nextcloud-vue', 'Found')
createdLabel	string		() => t('nextcloud-vue', 'Created')
updatedLabel	string		() => t('nextcloud-vue', 'Updated')
unchangedLabel	string		() => t('nextcloud-vue', 'Unchanged')
errorsLabel	string		() => t('nextcloud-vue', 'Errors')

Events

Name	Payload	Description
close	—
confirm	—

Slots

Name	Bindings	Description
fields	file

Methods

Name	Description
setResult	Set the result of the import operation.