Im creating a blog and i already have the basic structure but I want to add additional button for inserting an image for the body of the blog. but I dont know how to start or attack this specification. the current form consist of field for title and field for body. I will add a button for inserting the image and i want the image to inserted after the last text written on the body field and the image should instantly show in the body field. here is the current code. the source of the image should be a link image from the web
body.html
<body>
<h1>My Blog</h1>
{{> tmplAddBlog}}
<hr>
{{> tmplPostBlog}}
</body>
<template name="tmplAddBlog">
<form class="addBlog">
<label for="title">Title</label>
<input type="text" placeholder="Blog Title" name="title">
<br>
<label for="content">Content</label>
<input type="text" placeholder="Blog Content" name="content">
<input type="file" value="image" accept="image"/>
<br>
<button type="submit">Post</button>
</form>
</template>
<template name="tmplPostBlog">
{{#each blogs}}
<h1>{{title}}</h1>
<p>{{content}}</p>
<button class="delete">×</button>
{{/each}}
</template>
body.js
import { Template } from 'meteor/templating';
import { Blogs } from '../api/blogs.js';
import './body.html';
Template.tmplPostBlog.events({
'click .delete'(e){
e.preventDefault();
Meteor.call('deleteBlog',this._id);
}
});
Template.tmplPostBlog.helpers({
blogs(){
return Blogs.find({});
}
});
Template.tmplAddBlog.events({
'submit form'(e){
e.preventDefault();
var title = e.target.title.value;
var content = e.target.content.value;
if(title && content){
Meteor.call('createBlog',title, content);
}
e.target.title.value = "";
e.target.content.value = "";
},
});
/imports/api/blogs.js
import { Mongo} from 'meteor/mongo';
export const Blogs = new Meteor.Collection('blogs');
Meteor.methods({
'createBlog'(title, content) {
Blogs.insert({
title: title,
content: content
});
},
'deleteBlog'(blogId) {
Blogs.remove(blogId);
console.log("deleted");
},
});
