CODEWITHSUNDEEP
mongodburlmeteorreactjsnull
volna
volna

Reputation: 2610

Meteor-react inserting url into mongodb stores 'null'

I am using form component to insert data into the Mongo-Collection. When I check in terminal for stored information I do successfuly store Title and data from Select input, but have value of null for both url and file inputs.

Here is the code for handling insert method on import folder:

Meteor.methods({

 'posts.insert' : function(post) {

    return Posts.insert({
      createdAt: new Date(),
      title: post.title,
      social: post.social,
      link: this.link,
      file: this.file
    });
  }
});

Here is the component code for handling form submit:

import React, { Component } from 'react';

class AddPost extends Component {

  constructor(props) {
    super(props);

    this.state = {error: ''};
  }

  handleSubmit(event) {
    event.preventDefault();

    const title = this.refs.title.value;
    const social = this.refs.social.value;
    const link = this.refs.link.value;
    const file = this.refs.file.value;

    Meteor.call('posts.insert', {title, social, link, file});
  }

  render() {
    return (
        <div className="modal fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div className="form-outer">
            <form id='add_post' onSubmit={this.handleSubmit.bind(this)}>
                <div className='form-text form-header'>
                  <p><strong>Hey</strong>, master<span className='error'>{this.state.error}</span></p>
                  <p>Lets share something new today?</p>
                </div>
                <input ref="title" type="text" className="form-input" placeholder="What about the title?" />
                <div className='form-text form-header form-header-distance'>
                  <p>Where should I point the way?</p>
                </div>
                <select ref="social" className="form-select">
                  <option>Select</option>
                  <option>Instagram</option>
                  <option>Twitter</option>
                </select>
                <input ref="link" type="url" className="form-input" placeholder="Point the way" />
                <div className='form-text form-header form-header-distance'>
                  <p>And what about the image?</p>
                </div>
                <label className="file form-file">
                  <input ref='file' className='form-input' type="file" id="file" />
                  <span className="file-custom"></span>
                </label>
                <button type="button" className="form-button" data-dismiss="modal">Close</button>
                <button type="sumbit" className="form-button" >Save</button>
            </form>
          </div>
        </div>
    );
  }
}

export default AddPost;

P.S: It's out of topic of these question, but I will do appreciate a lot if you could point me to some external resource or explain if it's possible to upload/store new images (not static from public folder) from local machine and serve them to front-end view?

Upvotes: 0

Views: 65

Answers (1)

hafiz ali
hafiz ali

Reputation: 1466

Make your meteor method as below: 

Meteor.methods({
  'posts.insert'(post){
    post.createdAt: new Date();
    Posts.insert(post);
  }
})

Upvotes: 1

Related Questions