画像フィールドを追加してpouchdbに保存

Question

現在のフィールドにファイル/画像フィールドを追加してpouchdbに保存します。これを処理するためのクールな方法はありますか？

は、ここで私は、現在持っているものです。

submitInfo (event) { 
    event.preventDefault() 

    let Info = Object.assign({}, this.props.doc) 

    if (!Info._id) { 
     Info._id = Info.id 
    } 

    console.log('About to post to pouch...', Info._id) 

    // Save to pouchdb 
    this.db.put(Info , (err, result) => { 
     if (!err) { 
     console.log('Successfully posted to pouchdb!') 
     this.props.clearCurrentDoc() 
     } else { 
     console.log('Error saving to pouch...') 
     console.log(err) 
     } 
    }) 
    } 

形式：別のファイルで

this.newInfo = { 
     id: uuid(), 
     createdAt: toDate(), 
     Info: { 
     name: '', 
     dob: '', 
     designation: '' 
     } 
    } 

this.state = { 
    doc: this.newInfo 
    } 

<fieldset> 
    <legend>Info</legend> 

      <input name='name' 
       value={props['name']} 
       type='text' 
       placeholder='Enter Name' 
       onChange={handleChange} 
      /> 
      <input name='dob' 
       value={props['dob']} 
       type='date' 
       placeholder='Date of Birth' 
       onChange={handleChange} 
      /> 
      <input name='designation' 
       value={props['designation']} 
       type='text' 
       placeholder='Designation' 
       onChange={handleChange} 
      /> 
      </fieldset> 

私は、画像を保存するための1つの以上のフィールドを追加します。たぶんそれを写真と呼んでください。申し訳ありませんが、私はコード全体を置くことはできませんが、他のすべては正常に動作しています。私は、画像やファイルを参照するフィールドを追加し、既存のフィールドとファイルを保存する必要があります。

Answer 1

jsbinには、これを並べ替えるのに役立つ良いサンプルがあります。画像を選択してPouchDBに送信する入力ボタンがあります。 CouchDBを使用している場合は、CouchDbにデータを複製するコードもあります。

<input type="text" name="field1" /> 
<input type="text" name="field2" /> 
<input type="file" name="file" /> 
<script>   
var field1= window.document.reportform.field1.value; 
var field2= window.document.reportform.field2.value; 
var inputFile = document.querySelector("#file"); 
getFile = inputFile.files[0]; 

var myDoc = { 
    _id: new Date().toISOString(), 
    field1: field1, 
    field2: field2, 
    _attachments: { 
    "file": { 
     content_type: getFile.type, 
     data: getFile 
    } 
    } 
} 

db.put(myDoc, function(err, response) { 
    if (err) { 
    return console.log(err); 
    } else { 
    console.log("Document created Successfully"); 
    } 
}); 
    db.replicate.to(remote); 
} 
</script> 

JSbin：：私は仕事を得ることができていないPouchDB image select and put()

一般的な考え方は、このようなものを使用することです。私はstackoverflowとPouchDB Slackチャンネルについて尋ねました。いくつかの提案はされているが、これまで私はそれを働かせていない。

PouchDBのマニュアルは、非常にです。 PouchDB Attachments Guide