WeImport

Modular and interactive component for managing complex imports in a guided and intuitive way. Ideal for importing data from various types of files, following a structured and validated step-by-step process.

Examples

Basic usage

  <WeImport
    url="import"
    @done="goBack"
  />

Custom slots

It supports dynamic slots for each column that can have default values, allowing for maximum customisation.

• Use the naming convention: default_values.<column_id>
• You can add custom inputs such as select, date picker, checkbox, etc.

  <WeImport
    url="import"
    @done="goBack"
  >
    <template #[`default_values.type`]="{ attrs, on }">
      <v-select
        v-bind="attrs"
        label="Type"
        :items="items"
        v-on="on"
      />
    </template>
  />

Features

• Guided steps to upload files, choose the starting row, associate columns, enter default values, preview and view results.
• Tabular preview of imported data with error indication.
• Dry-run validation step to check imported data without saving it permanently and validation column data match before final import
• Clear validations and error messages.

Props

Prop	Type	Default	Description
url	String	Required	Api resource path to fetch items and headers and manage import process
acceptedFiles	String	'.csv,.xls,.xlsx'	Defines the types of files accepted within the upload dropzone. It is passed directly to the we-s-3-drozpone component as the value of the accepted-files attributes
signedUrl	String	null	If provided, the signed URL will be requested from this endpoint instead of the default: "storage/signed_url"
extraParams	Object	{}	Additional parameters for the import and preview API requests

Events

Event	Paylod	Description
done	any	Emitted at the end of the import (useful for closing or navigating elsewhere)