Как сохранить txt-файл из приложения React в бэкэнде SilverStripe 4?

Question

У меня есть приложение реагирования, вложенное в проект SilverStripe 4.Я пытаюсь правильно интегрировать реагирующее приложение в проекте SilverStripe, чтобы файлы, создаваемые реагирующим приложением, можно было сохранить в серверной части SilverStripe.Способ его вложения аналогичен решению, предложенному для этого вопроса:

Как вставить (внедрить?) Существующее приложение React (просто пользовательский интерфейс без внутреннего интерфейса) в макет страницы SilverStripe?

Приложение реагирования создает график и имеет кнопку сохранения, которая берет информацию из графика и создает текстовый файл, который затем можно сохранить в моей локальной системе.В дополнение к этому я хочу, чтобы кнопка «сохранить» отправляла txt-файл в соответствующую таблицу в проекте SilverStripe (который оборачивает приложение-приложение).

В настоящее время я изучаю фреймворк SilverStripe, и вы можете видеть, что в моем контроллере страниц еще нет ничего, что помогло бы мне сделать это.Будем очень благодарны за любые предложения о том, что мне может понадобиться.

Ниже приведены методы в приложенииact-приложения, которые локально сохраняют и загружают текстовый файл:

  saveJson = () => {
    const validJson = this.state.json;
    window.localStorage.setItem(LOCALSTORAGE_KEY, validJson);
  };

  loadJson = () => {
    const json =
      window.localStorage.getItem(LOCALSTORAGE_KEY) ||
      JSON.stringify(this.state.High, null, 2);
    this.setState({ json });
  };

...

 dataToSave = () => {
    let data = {};
    data.High = this.checkStateArrayForData("High");
    data.Intermediate = this.checkStateArrayForData("Intermediate");
    data.Low = this.checkStateArrayForData("Low");
    data.Output = this.checkStateArrayForData("Output");
    data.Input = this.checkStateArrayForData("Input");
    data.links = this.state.links;
    return data;
  };

...

 onReaderLoad = event => {
    let obj = JSON.parse(event.target.result);
    let time = new Date().getTime();
    this.setState({
      High: obj.High,
      Intermediate: obj.Intermediate,
      Low: obj.Low,
      Output: obj.Output,
      Input: obj.Input,
      linksToRender: obj.links,
      time: time
    });
  };

Ниже приведен код изметод возврата, относящийся к кнопке Сохранить

 render() {
    const uri =
      "data:text/json;charset=UTF-8," +
      encodeURIComponent(JSON.stringify(this.dataToSave(), null, 2));

...

return(
...

  <input
                type="file"
                id="file"
                ref={ref => (this.upload = ref)}
                style={{ display: "none" }}
                onChange={this.onChangeFile}
                accept=".txt"
              />
              <ToolbarItem
                icon="ic-open"
                label="Open"
                onClick={() => {
                  this.upload.click();
                }}
              />
              <a href={uri} download="myfile.eval">
                <ToolbarItem icon="ic-save" label="Save" />
              </a>

Ниже представлен компонент ToolbarItem, поскольку кнопка сохранения является компонентом ToolbarItem.Примечание: я унаследовал этот код, который является прототипом, написанным кем-то другим.Я думаю, что этот компонент должен быть функциональным и не иметь состояния.

import React from "react";

class ToolbarItem extends React.Component {
    state = {};

    render() {
        return <div className="item" onClick={this.props.onClick}>
            <div className={`icon ${this.props.icon}`}></div>
            <div className="label">{this.props.label}</div>
        </div>;
    }
}

export default ToolbarItem;

Ниже приведен макет страницы SilverStripe:

<!-- BEGIN CONTENT -->
        <div class="content">   
                    <div class="main col-sm-12" 
                         style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"> 

                            <div id="root">
                                If you can see this your React app hasn't initialised yet
                            </div>
                    </div>
        </div>
        <!-- END CONTENT -->

Ниже приведен мой класс SilverStripe для приложения реакции:

<?php
namespace SilverStripe\Lessons;

use Page;    
use SilverStripe\Assets\File;

class ReactAppPage extends Page 
{
  private static $table_name = 'example5_ReactAppPage';
  private static $has_one  = [
      'svg' => File::class,
      'woff' => File::class,
      'woff2' => File::class,
      'ttf' => File::class,
      'eot' => File::class,
    ];
}
?>

Ниже представлен контроллер страницы для приложения реагирования:

<?php
namespace SilverStripe\Lessons;

use SilverStripe\View\Requirements;

use PageController;    

class ReactAppPageController extends PageController 
{
    protected function init()
    {
        parent::init();
        // Build files for the react-app. NOTE: Doesn't include media folder files which are manually placed in a SilverStripe-app/public/static/media folder.
        Requirements::javascript('app/react-app/build/static/js/main.40bb7a47.js');
        Requirements::css('app/react-app/build/static/css/main.ca3832cb.css');

    }
}
?>

Ожидаемые результаты состоят в том, что после того, как пользователь нажмет кнопку сохранения в приложении реагирования, они будутпредоставляется опция, где они хотят сохранить файл (локально или в SilverStripe Back-end).Если они выберут серверную часть SilverStripe, файл автоматически сохранится в таблицу в базе данных SilverStripe.

Спасибо, что уделили время.Пожалуйста, прокомментируйте, если вы заметили недостающую информацию.Я буду редактировать этот вопрос, поскольку я продолжу исследовать, как это сделать, и буду использовать комментарии, чтобы найти ответы.Приветствия: -)