Как остановить действие POST по умолчанию в Reaction-Dropzone-Componen? - PullRequest
Новая
       17

Как остановить действие POST по умолчанию в Reaction-Dropzone-Componen?

0 голосов
/ 27 марта 2019

Я хочу отправить запрос в axios без использования POST-запроса по умолчанию из формы. Я уже создал событие отправки, которое правильно отправляет запрос в axios.

упрощенный код: 

import logo from './logo.svg';
import './App.css';
import DropzoneComponent from 'react-dropzone-component';

export class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPlaceholder: true,
      filename: '',
      sliceSize: 50144,
      start: 0,
      totalChunks: 0,
      numRequest: 1,
      modalIsOpen: false,
      errorCopie: '',
      modalErrorReportIsOpen: false,
      errorReportLimit: {},
      errorObject: {}
    };

    this.djsConfig = {
      addRemoveLinks: true,
      autoProcessQueue: false,
      headers: true,
      maxFilesize: 2000048,
      params: {
        industry: 'some'
      },
      chunking: true,
      chunkSize: 50144,
      timeout: 60000,
      maxFiles: 1,
      parallelUploads: 5,
      acceptedFiles: '.jpg',
      retryChunks: true,
      retryChunksLimit: 5
    };

    this.componentConfig = {
      iconFiletypes: ['.jpg'],
      showFiletypeIcon: true,
      postUrl: `dummy-url`
    };

    this.dropzone = null;
  }

  handleAddedFile = (file) => {
    console.log("handleAddedFile");
    this.dropzone.processQueue();
    this.handleShowPlaceholder();
  };

  handleRemovedFile = () => {
    console.log("handleRemovedFile");
  };

  handleShowPlaceholder = () => {
    console.log("handleShowPlaceholder");
    this.setState({
      showPlaceholder: !this.state.showPlaceholder
    });
  };

  handleSendingFile = (file, xhr, formData) => {
    console.log("handleSendingFile");

    /* HERE make axios request */

   /* HOW to prevent default behavior with sending request to dummy url */

  };

  handleSuccessFile = (file) => {
    console.log("handleSuccessFile");  
  };

  handleError = (error) => {
    console.log("handleError");
  };


  handlePost() {
    this.dropzone.processQueue();
  }

  render() {
    const config = this.componentConfig;
    const djsConfig = this.djsConfig;

    const eventHandlers = {
      init: (dz) => (this.dropzone = dz),
      addedfile: this.handleAddedFile,
      removedfile: this.handleRemovedFile,
      sending: this.handleSendingFile,
      success: this.handleSuccessFile,
      uploadprogress: this.handleUploadprogress,
      error: this.handleError
    };

    return (
      <div>
        <DropzoneComponent
        config={config}
        eventHandlers={eventHandlers}
        djsConfig={djsConfig}
      />
      <button onClick={this.handlePost.bind(this)}>Upload</button>
      </div>

    );
  }
}


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Example />
        </header>
      </div>
    );
  }
}

export default App;

Я ожидал отправить запрос на мой запрос axios, не отправляя запрос по умолчанию на dummy-url. Как заставить работать? Я не хочу заменять URL, вместо этого использую события для отправки соответствующих запросов.

...