This tutorial is part of the « How to create your own plugin »:
Please note: Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us by reporting it here.
Table of contents
- Upload From file (part 1)
- Upload from url and raw input (part 2) - current
- Services (part 3)
- History Page (part 4)
You can reach the code for this tutorial at this link
ExternalUrlForm Component
Alright! Until now we are providing three options to import data, but we only implemented one of them which is the file upload. Now we are about to implement the other approaches starting from “External Url”;
Go to
components
directory and create a new directory namedExternalUrlForm
with anindex.js
file inside:admin/src/components/ExternalUrlForm/index.js
This will show the users a form for providing their data source url
.
- Open the
index.js
file and paste the following:
1import React, { Component } from "react";
2import PropTypes from "prop-types";
3import Row from "../Row";
4import { Label, InputText } from "@buffetjs/core";
5import { LoadingIndicator } from "strapi-helper-plugin";
6
7class ExternalUrlForm extends Component {
8 state = { url: "" };
9 preAnalyzeImportFile = async url => {
10 this.setState({ url }, () => {
11 this.props.onRequestAnalysis({ source: "url", options: { url } });
12 });
13 };
14}
15ExternalUrlForm.propTypes = {
16 onRequestAnalysis: PropTypes.func.isRequired,
17 loadingAnalysis: PropTypes.bool.isRequired
18};
19
20export default ExternalUrlForm;
Our approach here, is the same as UploadFileForm
component; here we are keeping track of the provided url
instead of a file; and when the user provides us with a url
, we will call the onRequestAnalysis
which is handed down to us from the HomePage
.
- For the UI part, paste the below code as your
render
method after thepreAnalyzeImportFile
method:
1render() {
2 const { url } = this.state;
3 const { loadingAnalysis } = this.props;
4 return (
5 <Row>
6 <Label message={"Import URL"} htmlFor={"urlInput"} />
7 <InputText
8 name={"urlInput"}
9 placeholder={"https://www.nasa.gov/rss/dyn/educationnews.rss"}
10 type={"url"}
11 value={url}
12 onChange={({ target: { value } }) => {
13 this.preAnalyzeImportFile(value);
14 }}
15 />
16 <Row>{loadingAnalysis && <LoadingIndicator />} </Row>
17 </Row>
18 );
19 }
RawInputForm component
Create another directory named
RawInputForm
insidecomponents
directory:admin/src/components/RawInputForm/index.js
Create and open the
index.js
file inside our newRawInputForm
directory and paste the following:
1import React, {Component} from 'react'
2import PropTypes from 'prop-types'
3import {Label, Select, Button, Textarea} from '@buffetjs/core'
4import Row from "../Row";
5
6class RawInputForm extends Component {
7 dataFormats = [{label: 'csv', value: 'text/csv'}];
8 state = {
9 rawText: '',
10 dataFormat: 'text/csv'
11 }
12 textChanged = async rawText => {
13 this.setState({rawText});
14 };
15 changeDataFormat = dataFormat => {
16 this.setState({dataFormat});
17 };
18 analyze = () => {
19 const { dataFormat, rawText } = this.state;
20 this.props.onRequestAnalysis({
21 source: "raw",
22 type: this.state.dataFormat,
23 options: { rawText }
24 });
25 };
26};
27
28RawInputForm.propTypes = {
29 onRequestAnalysis: PropTypes.func.isRequired,
30 loadingAnalysis: PropTypes.bool.isRequired
31}
32export default RawInputForm
- For the
render
method:
1 render() { return (
2 <div className={'col-12'}>
3 <Row className={'row'}>
4 <Label
5 message={'Data Format'}
6 htmlFor={'dataFormats'}
7 />
8 <Select
9 name={'dataFormats'}
10 options={this.dataFormats}
11 value={this.state.dataFormat}
12 onChange={({target: {value}}) => this.changeDataFormat(value)}
13 />
14 </Row>
15 <Row
16 className={'row'}>
17 <Textarea
18 name={'rawTextarea'}
19 className={'col-12'}
20 textStyle={{
21 fontFamily: 'monospace'
22 }}
23 value={this.state.rawText}
24 onChange={({target: {value}}) => {
25 this.textChanged(value)
26 }} />
27 </Row>
28 <Row className={'row'}>
29 <Button
30 label={'Analyze'}
31 onClick={() => this.analyze()}
32 />
33 </Row>
34 </div>
35 )}
Awesome! We have implemented the other 2 ways available for importing data and it is time to actually use them. Open index.js
file at HomePage
and add the following imports:
1import ExternalUrlForm from "../../components/ExternalUrlForm";
2import RawInputForm from "../../components/RawInputForm";
- Then replace the
<UploadFileForm />
tag which is shown as below:
1<UploadFileForm
2onRequestAnalysis={this.onRequestAnalysis} loadingAnalysis={this.state.analyzing} />
with the following:
1 <Row>
2 {this.state.importSource === "upload" && (
3 <UploadFileForm
4 onRequestAnalysis={this.onRequestAnalysis}
5 loadingAnalysis={this.state.analyzing}
6 />
7 )}
8 {this.state.importSource === "url" && (
9 <ExternalUrlForm
10 onRequestAnalysis={this.onRequestAnalysis}
11 loadingAnalysis={this.state.analyzing}
12 />
13 )}
14 {this.state.importSource === "raw" && (
15 <RawInputForm
16 onRequestAnalysis={this.onRequestAnalysis}
17 loadingAnalysis={this.state.analyzing}
18 />
19 )}
20 </Row>
Here we go!
Great you finished the second part of this tutorial! Let's create the necessary services ! https://strapi.io/blog/how-to-create-an-import-content-plugin-part-3-4
Pouya is an active member of the Strapi community, who has been contributing actively with contributions in the core and plugins.