Нужно включить опцию загрузки PDF в мою форму, которая будет храниться непосредственно в mongodb через приложение стека MERN

Question

Я создал базовое приложение стека MERN, довольно стандартное, включая маршруты, схему модели (мангуста) и форму реакции. Мне нужно загрузить PDF-файл (менее 16 МБ) через форму, но форма также имеет 7 других стандартных текстовых вводов, которые хранятся как обычный JSON. У меня установлены все обычные поля ввода, но я теряюсь, когда пытаюсь прикрепить PDF-файл. PDF-файл должен быть связан с этой вставкой напоминания.

Я использую схему Мангуста (тип для файла)

Какой самый лучший / самый простой способ сделать это.

Я не ожидаю, что кто-то решит это точно, мне просто нужен толчок в правильном направлении. Я думаю, потому что мои pdf-файлы никогда не будут превышать 16 МБ, мне не нужно использовать действительно сложные вещи, такие как пакеты Gridfs-storage и т. Д.

Я исследовал Multer / gridfs и экспресс-загрузку и, похоже, не смог интегрировать его.

  const newReminder = new Reminders({
    category: req.body.category,
    name: req.body.name,
    exdate: req.body.exdate,
    assignedTo: req.body.assignedTo,
    type: req.body.type,
    location: req.body.location,
    notes: req.body.notes,
    file:req.body.file
  });

  newReminder.save().then(reminders => {res.json(reminders)})
}

 )




const reminderSchema = new Schema({
  category:{
    type:String,
    required:true
  },
  name:{
    type:String,
    required:true
  },
  exdate:{
    type:Date,
    required:true,
  },
  assignedTo:{
    type:String,
    required:true
  },
  type:{
    type:String
  },
  location:{
    type:String,
    required:true
  },
  file:{
    type:Array,
  },
  notes:{
    type:String,
  },
  date:{
    type:Date,
    default:Date.now
  }
})

Внешний интерфейс React / redux

  onSubmit = e => {
    e.preventDefault();

    const newReminder = {
      category: this.state.category,
      name: this.state.name,
      exdate: this.state.exdate,
      assignedTo: this.state.assignedTo,
      type: this.state.type,
      location: this.state.location,
      notes:this.state.notes,
      file:this.state.file
    }

The form i am using
<Form
              onSubmit={this.onSubmit}>
                <FormGroup>
                  <Label for="category">Category</Label>
                  <Input
                    type="select"
                    name="category"
                    id="category"
                    onChange={this.onChange}
                    multiple>
                    <option>Generic</option>
                    <option>Hardware</option>
                    <option>Misc.</option>
                    <option>Service Contract</option>
                    <option>Software</option>
                    <option>Telco</option>
                  </Input>
                </FormGroup>
                <FormGroup>
                  <Label for="name">Name</Label>
                  <Input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="Name of Contract"
                    onChange={this.onChange}
                    />
                </FormGroup>
                <FormGroup>
                  <Label for="exdate">Contract Expiration Date:</Label>
                  <Input
                    type="date"
                    name="exdate"
                    id="exdate"
                    placeholder="date placeholder"
                    onChange={this.onChange}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="assignedTo">Assign To:</Label>
                  <Input
                    type="select"
                    name="assignedTo"
                    id="assignedTo"
                    onChange={this.onChange}
                    multiple>
                    <option>Ron Pilla</option>
                    <option>Joe Torrieri</option>
                  </Input>
                </FormGroup>
                <FormGroup>
                  <Label for="type">Type</Label>
                  <Input
                    type="select"
                    name="type"
                    id="type"
                    onChange={this.onChange}
                    multiple>
                    <option>Customer</option>
                    <option>Employee</option>
                    <option>Vendor</option>
                    <option>Other</option>
                  </Input>
                </FormGroup>
                <FormGroup>
                  <Label for="location">Location</Label>
                  <Input
                    type="select"
                    name="location"
                    id="location"
                    onChange={this.onChange}
                    multiple>
                    <option>CCHS</option>
                    <option>DOC</option>
                  </Input>
                </FormGroup>
                <FormGroup>
                  <Label for="notes">Notes<FormText color="muted">
                    Optional
                  </FormText>
                  </Label>
                  <Input
                    type="textarea"
                    name="notes"
                    id="notes"
                    onChange={this.onChange}  />
                </FormGroup>
                <FormGroup>
                  <Label for="file">File</Label>
                  <Input
                    type="file"
                    name="file"
                    id="file"
                    onChange={this.onChange}  />
                </FormGroup>
              </Form>
            </ModalBody>
              <ModalFooter>
                <Button
                  color="danger"
                  onClick={this.onSubmit}
                  block
                  >
                  Submit</Button>{' '}
              </ModalFooter>
        </Modal>