2016-10-15 10 views
0

ユーザーのアバター画像を管理するためのアップロードフィールド(dropzone.js)を追加するフォームがあります。ReactとDropzone.js:「挿入モード」で画像をアップロード

フォームが編集モードの場合、私はアバターを管理できるようにユーザーのIDを知っています。しかし、私はユーザーを追加したい場合は、私は新しいユーザーに画像をバインドするIDがありません。

実は、私は挿入モードでは、このアプローチを使用しています:

  1. 私は、サーバー上の画像をアップロードします。
  2. サーバーはファイル名を返します。
  3. 投稿ボタンを押してユーザーを保存すると、投稿要求にファイル名を追加します。

その他のソリューションは次のようになります。

  1. はプレビューを作成して、ドロップゾーンにイメージのBASE64を計算し、それをサーバーに送る(しかし、私はこのソリューションを実装する方法を見つけ出すことはありません)。
  2. を挿入モードにすると、アップロードフィールドが無効になり、 モードでのみ有効になります。

もっと良い解決策はありますか?

EDIT 1: これは私のコードUserコンポーネントで

var ModalAvatar = React.createClass({ 

    propTypes: { 
     isActive  : React.PropTypes.bool.isRequired, 
     onChange  : React.PropTypes.func.isRequired 
    }, 

    componentDidMount: function() { 

     var self = this; 
     Dropzone.autoDiscover = false; 
     this.dropzone = new Dropzone('#demo-upload', { 
      parallelUploads: 1, 
      thumbnailHeight: 120, 
      thumbnailWidth: 120, 
      maxFilesize: 3, 
      filesizeBase: 1000, 
     }); 

     this.dropzone.on("addedfile", function(file){ 

      // How I could read the added file by $_FILES? 
      var url = URL.createObjectURL(file); 
      var formData = new FormData(); 
      formData.append("avatarFile", file); 
      self.props.onChange("avatarFile", formData); 
     }); 

     // Now fake the file upload (I took this from dropzone.js) 

     var minSteps = 6, 
      maxSteps = 60, 
      timeBetweenSteps = 100, 
      bytesPerStep = 100000; 

     this.dropzone.uploadFiles = function(files) { 
      var self = this; 

      for (var i = 0; i < files.length; i++) { 

       var file = files[i]; 
       var totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size/bytesPerStep))); 

       for (var step = 0; step < totalSteps; step++) { 
        var duration = timeBetweenSteps * (step + 1); 
        setTimeout(function(file, totalSteps, step) { 
         return function() { 
          file.upload = { 

           progress: 100 * (step + 1)/totalSteps, 
           total: file.size, 
           bytesSent: (step + 1) * file.size/totalSteps 
          }; 

          self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent); 
          if (file.upload.progress == 100) { 
           file.status = Dropzone.SUCCESS; 
           self.emit("success", file, 'success', null); 
           self.emit("complete", file); 
           self.processQueue(); 
          } 
         }; 
        }(file, totalSteps, step), duration); 
       } 
      } 
     } 




     this.toggle(this.props.isActive); 
    }, 



    render: function(){ 
     return (
      <form action="/upload" className="dropzone needsclick dz-clickable" id="demo-upload"> 
       <div className="dz-message needsclick"> 
        Drop files here or click to upload. 
       </div> 
      </form> 
     ) 

    } 
}); 



var User = React.createClass({ 

    getInitialState: function(){   
     return { 
      isActive : false 
     } 
    }, 

    onChange: function(formData){ 
     this.setState({ 
      avatarImg: formData 
     }); 
    }, 

    openModal: function(){ 
     this.setState({ 
      isActive: true 
     }); 
    }, 
    render: function(){ 

     var model = { 
      id    : this.state.id, 
      avatarImg  : this.state.avatarImg 
     }; 


     return (
      <div className="user"> 
       <div className="user-avatar" onClick={this.openModal}><img src="path"></div> 

        <Form model={model} onSuccess={this.onSuccess}> 
         <FieldName value={name} /> 
         <FieldEmail value={email} /> 
        </Form> 

        <ModalAvatar 
         isActive={this.state.isActive} 
         onChange={this.onChange} /> 
      </div> 

     ) 

    } 
}); 

ですが、私はそれを変更するには、ユーザーのアバターとオープンモーダルを表示するには、名前、電子メールなど、別のdiv .user-avatarを追加するためのフォームを持っています。

私の考えは、私は$ _FILESとPHPで読むことができるものでfile変換パラメータをドロップゾーンにアップロードするためにシミュレートし、「addedfile」イベントであるが、そのコード$ _FILESで空になっています。何が悪いですか?

+0

ユーザー(またはユーザー)がアップロードするイメージを選択するときにbase64でエンコードされたイメージデータを追加する非表示の入力フィールドを作成します。これはJavascriptで行うことができます。 –

+0

@CharlotteDunois私のコードを追加しました。何が間違っていますか? – Webman

答えて

0

まだ登録していない場合は、ユーザーのアップロードイメージを許可しないといけないと思います。あなたは、ユーザーのために画像を割り当て/アップロードする必要があります。

これは、ユーザー自身やユーザーを作成するのに十分なデータがないとサーバーに近づかないということです。 作成時にプレビューを許可することができ、base64を使用する必要はありません。 「Javascript upload image」について読んでください。 あなたは、単にURL.createObjectURL()を使用するか、または単にあなたはできるだけ早く、ユーザーがそれを選択すると、バックアップの理由にイメージを持っていない限りform data

へのファイル参照を渡すことができます。サーバーを使用しないで、ユーザーのクレアチーノをキャンセルしたらどうしますか?誰も使用しない写真がありますか?あなたはTTLを使い始めるでしょうか?ちょうど。サーバーになると怠惰になる。あなたの良いとクライアントのために。 本当に必要なときに使います。

+0

タクに答えてください。私は自分のコードを追加しました。私が間違っていることを知っていますか? – Webman

関連する問題