反应添加图像字段并保存在pouchdb中

Question

I want to add a file/image field to my current field and save in pouchdb. Is there any cool way to handle this?

Here's what I have currently:

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

this.state = {
    doc: this.newInfo
  }

In another file:

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)
      }
    })
  }

The form:

<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>

I want to add one more field for saving images. Maybe call it picture. Sorry, I can't put the entire code but everything else is working fine. I just need to add a field that will browse for image or file and save it with the existing ones.

Answer 1

I've got a good sample on jsbin that should help you to sort through this. There is an input button that let's you select an image and then submit this to PouchDB. If you are using CouchDB the code is also there to replicate the data to CouchDb. The general idea is to use something like this:

<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()

I have not been able to get to work. I have asked on stackoverflow and the PouchDB Slack channel. Some suggestions have been made but so far I haven't gotten it working.

The PouchDB documentation is very good. PouchDB Attachments Guide