ファイルを読む

Question

私は2つの質問があります。私は使用していますreact-dropzone

1. どのように異なる設定を設定しますか？彼らはfile.preview、最大サイズなどを持っています。これを私の反応jsにどのように設定しますか？これはinitや何か？

2. 私はこの例を踏襲し、今ではOnDrop機能を持っていますが、私のjavascriptコードではファイルの内容（csv/textファイルなど）をどのように読むことができますか？この例では、サーバーにアップロードする方法を示しています。

は、今私は

​​

編集

今すぐこれらの "機能"

disableClick [Boolean | **false**] — Clicking the <Dropzone> brings up the browser file picker. 
multiple [Boolean | **true**] — Accept multiple files 
minSize [Number | **0**] — Only accept file(s) larger than minSize bytes. 
maxSize [Number | **Infinity**] — Only accept file(s) smaller than maxSize bytes. 
accept - Accept only specified mime types. Must be a valid MIME type according to input element specification, for example application/pdf, image/*, audio/aiff,audio/midi 

を設定する方法がわからない

onDrop(acceptedFiles, rejectedFiles) { 
     acceptedFiles.forEach((file)=> { 
      var fr = new FileReader(); 
      fr.onload = function(e) { 
       console.log(e.target.result); 
      }; 
     fr.readAsText(file); 
     }); 
    } 

作業アップロードを持っています

Answer 1

<Dropzone>タグをrender() に設定することで、これらの機能を設定できます。同じウィンドウ内に複数のドロップポイントがある場合、各ドロップゾーンをカスタマイズできるように、この方法で作ったと思います。

すなわち：編集 https://gist.github.com/wvance/c052a57654ea943edee113a180598ab8

を：：私が見つけ

<Dropzone disableClick={false} 
    accept={"text/csv"} 
    minSize={23} 
    maxSize={3000}> 
</Dropzone> 

参考/例githubののreadme

render: function() { 
    return (
     <div> 
      <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop}> 
       <div>Try dropping some files here, or click to select files to upload.</div> 
      </Dropzone> 
      <button type="button" onClick={this.onOpenClick}> 
       Open Dropzone 
      </button> 
      {this.state.files.length > 0 ? <div> 
      <h2>Uploading {this.state.files.length} files...</h2> 
      <div>{this.state.files.map((file) => <img src={file.preview} />)}</div> 
      </div> : null} 
     </div> 
    ); 
} 

のプレビューフィールドの 例あなたが見れば例を詳しく見てみましょう（これは全体のちょっとしたことです）、ファイルがから来ていることがわかりますthis.state.files < =これはthis.state.filesはあなたがそこに着いたonDropで受け入れられたファイルである配列 です...

私は本当にあなたがより慎重にREADMEを読むことをお勧めしますサンプルをカスタマイズしてプロジェクトで使用する前に、そのサンプルの各コード行を理解し、ここで質問してください。しかし、うまくいけば、これはいくつかを明確にします