mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-10 15:47:32 +00:00
Merge branch '365-csv-encoding-support' into 'develop'
Added support for character encodings when importing csv files Closes #365 See merge request bramw/baserow!205
This commit is contained in:
Bram Wiepjes
commit
3c2d6d98df
3 changed files with 163 additions and 19 deletions
changelog.md
web-frontend/modules/database/components/table
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
## Unreleased
|
||||
|
||||
* Added support for different character encodings when importing CSV files.
|
||||
* Prevent websocket reconnect loop when the authentication fails.
|
||||
* Refactored the GridView component and improved interface speed.
|
||||
* Prevent websocket reconnect when the connection closes without error.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="control">
|
||||
<label class="control__label"> Choose CSV file </label>
|
||||
<label class="control__label">Choose CSV file</label>
|
||||
<div class="control__description">
|
||||
You can import an existing CSV by uploading the .CSV file with tabular
|
||||
data. Most spreadsheet applications will allow you to export your
|
||||
|
|
@ -31,19 +31,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="filename !== ''" class="row">
|
||||
<div class="col col-6">
|
||||
<div class="col col-4">
|
||||
<div class="control">
|
||||
<label class="control__label"> First row is header </label>
|
||||
<div class="control__elements">
|
||||
<Checkbox v-model="values.firstRowHeader" @input="reload()"
|
||||
>yes</Checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-6">
|
||||
<div class="control">
|
||||
<label class="control__label"> Column separator </label>
|
||||
<label class="control__label">Column separator</label>
|
||||
<div class="control__elements">
|
||||
<Dropdown v-model="columnSeparator" @input="reload()">
|
||||
<DropdownItem name="auto detect" value="auto"></DropdownItem>
|
||||
|
|
@ -63,8 +53,158 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-8">
|
||||
<div class="control">
|
||||
<label class="control__label">Encoding</label>
|
||||
<div class="control__elements">
|
||||
<Dropdown v-model="encoding" @input="reload()">
|
||||
<DropdownItem name="Unicode (UTF-8)" value="utf-8"></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Arabic (ISO-8859-6)"
|
||||
value="iso-8859-6"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Arabic (Windows-1256)"
|
||||
value="windows-1256"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Baltic (ISO-8859-4)"
|
||||
value="iso-8859-4"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Baltic (windows-1257)"
|
||||
value="windows-1257"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Celtic (ISO-8859-14)"
|
||||
value="iso-8859-14"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Central European (ISO-8859-2)"
|
||||
value="iso-8859-2"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Central European (Windows-1250)"
|
||||
value="windows-1250"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Chinese, Simplified (GBK)"
|
||||
value="gbk"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Chinese (GB18030)"
|
||||
value="gb18030"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Chinese Traditional (Big5)"
|
||||
value="big5"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Cyrillic (KOI8-R)"
|
||||
value="koi8-r"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Cyrillic (KOI8-U)"
|
||||
value="koi8-u"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Cyrillic (ISO-8859-5)"
|
||||
value="iso-8859-5"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Cyrillic (Windows-1251)"
|
||||
value="windows-1251"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Cyrillic Mac OS (x-mac-cyrillic)"
|
||||
value="x-mac-cyrillic"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Greek (ISO-8859-7)"
|
||||
value="iso-8859-7"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Greek (Windows-1253)"
|
||||
value="windows-1253"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Hebrew (ISO-8859-8)"
|
||||
value="iso-8859-8"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Hebrew (Windows-1255)"
|
||||
value="windows-1255"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Japanese (EUC-JP)"
|
||||
value="euc-jp"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Japanese (ISO-2022-JP)"
|
||||
value="iso-2022-jp"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Japanese (Shift-JIS)"
|
||||
value="shift-jis"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Korean (EUC-KR)"
|
||||
value="euc-kr"
|
||||
></DropdownItem>
|
||||
<DropdownItem name="Macintosh" value="macintosh"></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Nordic (ISO-8859-10)"
|
||||
value="iso-8859-10"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="South-Eastern European (ISO-8859-16)"
|
||||
value="iso-8859-16"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Thai (Windows-874)"
|
||||
value="windows-874"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Turkish (Windows-1254)"
|
||||
value="windows-1254"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Vietnamese (Windows-1258)"
|
||||
value="windows-1258"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Western European (ISO-8859-1)"
|
||||
value="iso-8859-1"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Western European (Windows-1252)"
|
||||
value="windows-1252"
|
||||
></DropdownItem>
|
||||
<DropdownItem
|
||||
name="Latin 3 (ISO-8859-3)"
|
||||
value="iso-8859-3"
|
||||
></DropdownItem>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="error !== ''" class="alert alert--error alert--has-icon">
|
||||
<div v-if="filename !== ''" class="row">
|
||||
<div class="col col-6">
|
||||
<div class="control">
|
||||
<label class="control__label">First row is header</label>
|
||||
<div class="control__elements">
|
||||
<Checkbox v-model="values.firstRowHeader" @input="reload()"
|
||||
>yes</Checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="error !== ''"
|
||||
class="alert alert--error alert--has-icon margin-top-1"
|
||||
>
|
||||
<div class="alert__icon">
|
||||
<i class="fas fa-exclamation"></i>
|
||||
</div>
|
||||
|
|
@ -100,6 +240,7 @@ export default {
|
|||
},
|
||||
filename: '',
|
||||
columnSeparator: 'auto',
|
||||
encoding: 'utf-8',
|
||||
error: '',
|
||||
rawData: null,
|
||||
preview: {},
|
||||
|
|
@ -140,7 +281,7 @@ export default {
|
|||
this.rawData = event.target.result
|
||||
this.reload()
|
||||
})
|
||||
reader.readAsBinaryString(event.target.files[0])
|
||||
reader.readAsArrayBuffer(event.target.files[0])
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
|
@ -150,8 +291,10 @@ export default {
|
|||
* when the CSV doesn't have any entries the appropriate error will be shown.
|
||||
*/
|
||||
reload() {
|
||||
const decoder = new TextDecoder(this.encoding)
|
||||
const decodedData = decoder.decode(this.rawData)
|
||||
const limit = this.$env.INITIAL_TABLE_DATA_LIMIT
|
||||
const count = this.rawData.split(/\r\n|\r|\n/).length
|
||||
const count = decodedData.split(/\r\n|\r|\n/).length
|
||||
if (limit !== null && count > limit) {
|
||||
this.values.data = ''
|
||||
this.error = `It is not possible to import more than ${limit} rows.`
|
||||
|
|
@ -160,7 +303,7 @@ export default {
|
|||
return
|
||||
}
|
||||
|
||||
Papa.parse(this.rawData, {
|
||||
Papa.parse(decodedData, {
|
||||
delimiter: this.columnSeparator === 'auto' ? '' : this.columnSeparator,
|
||||
complete: (data) => {
|
||||
if (data.data.length === 0) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="control">
|
||||
<label class="control__label"> Paste the table data </label>
|
||||
<label class="control__label">Paste the table data</label>
|
||||
<div class="control__description">
|
||||
You can copy the cells from a spreadsheet and paste them below.
|
||||
</div>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="control__label"> First row is header </label>
|
||||
<label class="control__label">First row is header</label>
|
||||
<div class="control__elements">
|
||||
<Checkbox v-model="values.firstRowHeader" @input="reload()"
|
||||
>yes</Checkbox
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue