如何设置自定义DropzoneJS进度值?

时间:2017-01-23 17:41:27

标签: reactjs meteor dropzone.js

我正在使用dropzone-react-component,这只是DropzoneJS的反应包装。

我添加了一个处理上传的事件:

addedfile: file => handleFileUpload(file),

然而,上传进度条只会上升并验证上传,而我可以看到上传仍在进行。

所以我的问题是,我应该如何为上传百分比设置自己的值,并使其与dropzone自己的样式一起使用?

这是React组件:

constructor(props) {
  super(props);

  this.componentConfig = {
    iconFiletypes: ['.jpg', '.png', '.gif', '.pdf'],
    showFiletypeIcon: true,
    postUrl: 'no-url',
  };
  this.eventHandlers = {
    addedfile: file => handleFileUpload(file),
  };
  this.djsConfig = {
    autoProcessQueue: false,
    dictDefaultMessage: 'Déposez un fichier ici ou cliquez pour en choisir un',
    maxFilesize: 200, // MB
    clickable: true, // Lets you click the dropzone
    acceptedFiles: 'image/*,application/pdf',
    renameFileName: this.props.fileRename || 'myFile',
    parallelUploads: 1,
    uploadMultiple: false,
  };
}

render() {
  return (
    <DropzoneComponent
      config={this.componentConfig}
      eventHandlers={this.eventHandlers}
      djsConfig={this.djsConfig}
    />
}

这是用于上传文件的代码,该文件使用包Meteor Slingshot

const handleFileUpload = (file) => {
  var uploader = new Slingshot.Upload("myFileUploads");

  uploader.send(file, function (error, downloadUrl) {
    if (error) {
      // Log service detailed response.
      console.log(error);
    } else {
      console.log(downloadUrl);
    }
  });

  let computation = Tracker.autorun(() => {
    if (!isNaN(uploader.progress())) {
      console.log(uploader.progress());
    }
  });
};

0 个答案:

没有答案