ユーザーのアバター画像を管理するためのアップロードフィールド(dropzone.js)を追加するフォームがあります。ReactとDropzone.js:「挿入モード」で画像をアップロード
フォームが編集モードの場合、私はアバターを管理できるようにユーザーのIDを知っています。しかし、私はユーザーを追加したい場合は、私は新しいユーザーに画像をバインドするIDがありません。
実は、私は挿入モードでは、このアプローチを使用しています:
- 私は、サーバー上の画像をアップロードします。
- サーバーはファイル名を返します。
- 投稿ボタンを押してユーザーを保存すると、投稿要求にファイル名を追加します。
その他のソリューションは次のようになります。
- はプレビューを作成して、ドロップゾーンにイメージのBASE64を計算し、それをサーバーに送る(しかし、私はこのソリューションを実装する方法を見つけ出すことはありません)。
- を挿入モードにすると、アップロードフィールドが無効になり、 モードでのみ有効になります。
もっと良い解決策はありますか?
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で空になっています。何が悪いですか?
ユーザー(またはユーザー)がアップロードするイメージを選択するときにbase64でエンコードされたイメージデータを追加する非表示の入力フィールドを作成します。これはJavascriptで行うことができます。 –
@CharlotteDunois私のコードを追加しました。何が間違っていますか? – Webman