| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
const { __ } = wp.i18n; |
| 5 |
|
| 6 |
const { Component } = wp.element; |
| 7 |
|
| 8 |
const { |
| 9 |
Button, |
| 10 |
ExternalLink, |
| 11 |
PanelBody |
| 12 |
} = wp.components; |
| 13 |
|
| 14 |
class FileImport extends Component { |
| 15 |
constructor() { |
| 16 |
super( ...arguments ); |
| 17 |
|
| 18 |
this.uploadInput = React.createRef(); |
| 19 |
this.fileUploaded = this.fileUploaded.bind( this ); |
| 20 |
this.uploadImport = this.uploadImport.bind( this ); |
| 21 |
|
| 22 |
this.state = { |
| 23 |
uploadLabel: __( 'Upload' ) |
| 24 |
}; |
| 25 |
} |
| 26 |
|
| 27 |
fileUploaded( e ) { |
| 28 |
if ( 'text/csv' === e.target.files[0].type ) { |
| 29 |
this.setState({ uploadLabel: __( 'Upload' ) }); |
| 30 |
} |
| 31 |
} |
| 32 |
|
| 33 |
uploadImport() { |
| 34 |
this.props.readUploadedFile( this.uploadInput ); |
| 35 |
this.setState({ uploadLabel: __( 'Uploaded' ) }); |
| 36 |
} |
| 37 |
|
| 38 |
render() { |
| 39 |
return ( |
| 40 |
<PanelBody |
| 41 |
title={ __( 'Import data from file' ) } |
| 42 |
initialOpen={ false } |
| 43 |
> |
| 44 |
|
| 45 |
<p>{ __( 'Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).' ) }</p> |
| 46 |
<p> |
| 47 |
{ __( 'If you are unsure about how to format your data CSV then please take a look at this sample: ' ) } |
| 48 |
<ExternalLink href={ `${visualizerLocalize.absurl}samples/${this.props.chart['visualizer-chart-type']}.csv` }> |
| 49 |
{ `${this.props.chart['visualizer-chart-type']}.csv` } |
| 50 |
</ExternalLink> |
| 51 |
</p> |
| 52 |
|
| 53 |
<input |
| 54 |
type="file" |
| 55 |
accept="text/csv" |
| 56 |
ref={ this.uploadInput } |
| 57 |
onChange={ this.fileUploaded } |
| 58 |
/> |
| 59 |
|
| 60 |
<Button |
| 61 |
isPrimary |
| 62 |
onClick={ this.uploadImport } |
| 63 |
> |
| 64 |
{ this.state.uploadLabel } |
| 65 |
</Button> |
| 66 |
|
| 67 |
</PanelBody> |
| 68 |
); |
| 69 |
} |
| 70 |
} |
| 71 |
|
| 72 |
export default FileImport; |
| 73 |
|
