Реагировать Dropzone застревать на Upload

Question

Использование Реагировать Dropzone: https://github.com/okonet/react-dropzone

Он работал чудесно и «вдруг» он перестал работать, но мы не уверены, когда.

Он застревает в загружаемой части. Работы рендеринга, dropzone доступны, и вы можете щелкнуть или перетащить файл.

Но он застревает в «Uploading now ...» и никогда не загружает ничего сейчас. Но это было какое-то время.

Я предполагаю, что это просто отсутствует что-то маленькое, поскольку мы редко обновляем этот файл.

Сама форма по адресу: http://hrockchurch.com/requests/ PopWrap: HRockCreative

import Dropzone from 'react-dropzone' 
import R from 'ramda' 
import { Input } from 'react-bootstrap' 

import utils from '../lib/utils' 
import styles from '../lib/styles' 
import Gett from '../lib/gett' 

import FileList from './fileList' 

export default class CustomDropzone extends React.Component { 
    static propTypes = { 
    setValue: React.PropTypes.func, 
    multiple: React.PropTypes.bool 
    } 

    static defaultProps = { 
    setValue: utils.noop, 
    multiple: true 
    } 

    state = { 
    uploading: false, 
    dragOver: false, 
    files: [] 
    } 

    constructor(props) { 
    super(props) 
    this.onDrop = this.onDrop.bind(this) 
    this.onDragOver = this.onDragOver.bind(this) 
    this.onDragLeave = this.onDragLeave.bind(this) 
    this.uploadFile = this.uploadFile.bind(this) 
    this.removeFile = this.removeFile.bind(this) 
    } 

    uploadFile(file) { 
    this.setState({ uploading: true, dragOver: false }) 
    Gett.file 
     .create(file) 
     .then(gtFile => { 
     this.addFile(gtFile) 
     this.setState({ uploading: false }) 
     }) 
    } 

    addFile(file) { 
    const newFiles = this.state.files.concat(file) 
    this.updateFiles(newFiles) 
    } 

    removeFile(file) { 
    const newFiles = R.reject(f => f.id == file.id, this.state.files) 
    this.updateFiles(newFiles) 
    } 

    updateFiles(files) { 
    this.setState({ files: files }) 
    this.props.setValue(R.map(R.prop('url'), files)) 
    } 

    onDrop(files) { 
    if (this.state.uploading) return 

    R.forEach(this.uploadFile, files) 
    } 

    onDragOver() { 
    if (this.state.uploading) return 

    this.setState({ dragOver: true }) 
    } 

    onDragLeave() { 
    if (this.state.uploading) return 

    this.setState({ dragOver: false }) 
    } 

    getMessage() { 
    if (this.state.uploading) { 
     return 'Uploading now...' 
    } 
    if (this.state.dragOver) { 
     return 'Yeah, that\'s the right idea!' 
    } else { 
     return `Drop your file${this.props.multiple ? 's' : ''} here` 
    } 
    } 

    renderDropzone() { 
    if (!this.props.multiple && this.state.files.length >= 1) return null 

    return (
     <Dropzone onDrop={this.onDrop} 
      onDragOver={this.onDragOver} 
      onDragLeave={this.onDragLeave} 
      style={styles.dropzone} 
      disableClick={this.state.uploading}> 
     <div>{this.getMessage()}</div> 
    </Dropzone> 
    ) 
    } 

    render() { 
    const label = this.props.label || utils.titleize(this.props.name) 

    return (
     <div> 
     <Input label={label}> 

      {this.renderDropzone()} 
      <FileList files={this.state.files} removeFile={this.removeFile} /> 
      {this.props.children} 
     </Input> 
     </div> 
    ) 
    } 
} 

Answer 1

Проверьте мой рабочий пример, который также имеет пример сервера https://github.com/rofrol/react-dropzone-progress-bar

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import Dropzone from 'react-dropzone'; 
import request from 'superagent'; 
import { Line } from 'rc-progress'; 

class App extends Component { 
    state = { 
    percent: 0 
    } 

    onDrop = files => { 
    this.setState({ percent: 0 }); 
    let data = new FormData(); 
    files.forEach(file => { 
     data.append('files[]', file, file.name); 
    }); 

    let req = request.post('http://localhost:3001'); 
    req.on('progress', event => { 
     let percent = Math.floor(event.percent); 
     if (percent >= 100) { 
     this.setState({ percent: 100 }); 
     } else { 
     this.setState({ percent: percent }); 
     } 
    }); 

    const that = this; 
    req.send(data); 
    req.end((err, res) => { 
     console.log('Successfully uploaded'); 
    }); 

    }; 

    render() { 
    const divStyle = { 
     border: '1px solid black' 
    }; 
    return (
     <div style={divStyle}> 
     <Dropzone onDrop={this.onDrop} className='dropzone-box'> 
      <div>Try dropping some files here, or click to select files to upload. {this.state.percent}</div> 
      <Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' /> 
     </Dropzone> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('root'));