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 named ExternalUrlForm with an index.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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import PropTypes from "prop-types";
import Row from "../Row";
import { Label, InputText } from "@buffetjs/core";
import { LoadingIndicator } from "strapi-helper-plugin";

class ExternalUrlForm extends Component {
  state = { url: "" };
  preAnalyzeImportFile = async url => {
    this.setState({ url }, () => {
      this.props.onRequestAnalysis({ source: "url", options: { url } });
    });
  };
}
ExternalUrlForm.propTypes = {
  onRequestAnalysis: PropTypes.func.isRequired,
  loadingAnalysis: PropTypes.bool.isRequired
};

export 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 the preAnalyzeImportFile method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
render() {
    const { url } = this.state;
    const { loadingAnalysis } = this.props;
    return (
      <Row>
        <Label message={"Import URL"} htmlFor={"urlInput"} />
        <InputText
          name={"urlInput"}
          placeholder={"https://www.nasa.gov/rss/dyn/educationnews.rss"}
          type={"url"}
          value={url}
          onChange={({ target: { value } }) => {
            this.preAnalyzeImportFile(value);
          }}
        />
        <Row>{loadingAnalysis && <LoadingIndicator />} </Row>
      </Row>
    );
  }

RawInputForm component

• Create another directory named RawInputForm inside components directory:

  admin/src/components/RawInputForm/index.js

• Create and open the index.js file inside our new RawInputForm directory and paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {Label, Select, Button, Textarea} from '@buffetjs/core'
import Row from "../Row";

class RawInputForm extends Component {
  dataFormats = [{label: 'csv', value: 'text/csv'}];
  state = {
    rawText: '',
    dataFormat: 'text/csv'
  }
  textChanged = async rawText => {
    this.setState({rawText});
  };
  changeDataFormat = dataFormat => {
    this.setState({dataFormat});
  };
  analyze = () => {
    const { dataFormat, rawText } = this.state;
    this.props.onRequestAnalysis({
      source: "raw",
      type: this.state.dataFormat,
      options: { rawText }
    });
  };
};

RawInputForm.propTypes = {
  onRequestAnalysis: PropTypes.func.isRequired,
  loadingAnalysis: PropTypes.bool.isRequired
}
export default RawInputForm

• For the render method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  render() { return (
    <div className={'col-12'}>
      <Row className={'row'}>
        <Label
          message={'Data Format'}
          htmlFor={'dataFormats'}
        />
        <Select
          name={'dataFormats'}
          options={this.dataFormats}
          value={this.state.dataFormat}
          onChange={({target: {value}}) => this.changeDataFormat(value)}
        />
      </Row>
      <Row
        className={'row'}>
        <Textarea
          name={'rawTextarea'}
          className={'col-12'}
          textStyle={{
            fontFamily: 'monospace'
          }}
          value={this.state.rawText}
          onChange={({target: {value}}) => {
            this.textChanged(value)
          }} />
      </Row>
      <Row className={'row'}>
        <Button
          label={'Analyze'}
          onClick={() => this.analyze()}
        />
      </Row>
    </div>
  )}

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:

1
2
import ExternalUrlForm from "../../components/ExternalUrlForm";
import RawInputForm from "../../components/RawInputForm";

• Then replace the <UploadFileForm /> tag which is shown as below:

1
2
<UploadFileForm
onRequestAnalysis={this.onRequestAnalysis} loadingAnalysis={this.state.analyzing} />

with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
			<Row>
              {this.state.importSource === "upload" && (
                <UploadFileForm
                  onRequestAnalysis={this.onRequestAnalysis}
                  loadingAnalysis={this.state.analyzing}
                />
              )}
              {this.state.importSource === "url" && (
                <ExternalUrlForm
                  onRequestAnalysis={this.onRequestAnalysis}
                  loadingAnalysis={this.state.analyzing}
                />
              )}
              {this.state.importSource === "raw" && (
                <RawInputForm
                  onRequestAnalysis={this.onRequestAnalysis}
                  loadingAnalysis={this.state.analyzing}
                />
              )}
            </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