React从dropZone

时间:2018-01-26 10:00:45

标签: reactjs drag-and-drop unzip

我想拖动n drop并上传zip文件,然后将该文件解压缩到特定文件夹中,如果该文件夹不存在则应创建它。到目前为止,我已经在这个阶段使用了反应DropZone和im。任何想法如何继续只接受zip文件并上传到某个文件夹?

import React, { Component } from 'react';
import Link from 'next/link'
import Head from '../components/head'
import Nav from '../components/nav'
import Dropzone from 'react-dropzone'

export default class DnD extends Component {
  constructor() {
    super()
    this.state = {
      accepted: [],
      rejected: []
    }
  }

  render() {
    return (
      <section>
        <div className="dropzone">
          <Dropzone
            accept="image/jpeg, image/png"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >
            <p>Try dropping some files here, or click to select files to upload.</p>
            <p>Only *.jpg and *.png images will be accepted</p>
          </Dropzone>
        </div>
        <aside>
          <h2>Accepted files</h2>
          <ul>
            {
              this.state.accepted.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
          <h2>Rejected files</h2>
          <ul>
            {
              this.state.rejected.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
        </aside>
      </section>
    );
  }
}
<DnD />

0 个答案:

没有答案