How to I embed image for my blog editor inside the body field of the blog?

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


	<h1>My Blog</h1>
	{{> tmplAddBlog}}
	{{> tmplPostBlog}}

<template name="tmplAddBlog">
	<form class="addBlog">
		<label for="title">Title</label>
		<input type="text" placeholder="Blog Title" name="title">
		<label for="content">Content</label>
		<input type="text" placeholder="Blog Content" name="content">
		<input type="file" value="image" accept="image"/>
		<button type="submit">Post</button>

<template name="tmplPostBlog">
	{{#each blogs}}
		<button class="delete">&times;</button>


import { Template } from 'meteor/templating';
import { Blogs } from '../api/blogs.js';

import './body.html';{
	'click .delete'(e){

		return Blogs.find({});
	'submit form'(e){
		var title =;
		var content =;
		if(title && content){'createBlog',title, content);
		} = ""; = "";


import { Mongo} from 'meteor/mongo';

export const Blogs = new Meteor.Collection('blogs');

	'createBlog'(title, content) {

			title: title,
			content: content
	'deleteBlog'(blogId) {


you can store to S3 but look at services like Cloudinary and they have a lot to offer!

We use this package

1 Like

@maxhodges thank you for recommendation! ill look into that!

maybe useful

Basically, if I understand your issue correctly, I think you need to first allow the user to upload the file and store it somewhere, then you can display it by passing the path down to your template.

  1. present UI for user to upload image
  2. ingest image and put it somewhere (S3, or cloudinary)
  3. return the path to the template for display

Slingshot seems like the most popular option

Or do you simple want to hotlink images already stored somewhere else on the web? Hotlinking is generally considered poor behavior.

1 Like

@maxhodges yes sir you are right. just like the upload image works on normal blogs. i want to mimic that functionality in my blog too. not a link, direct upload from the user

1 Like

@maxhodges this packages can be used if i want to store the images in my PC locally? this blog im creating is for study only. so i dont really need to upload it on 3rd party server


S3 is EXTREMELY inexpensive, so the costs might be pennies per month.

1 Like

ill check into that, you’re so active in this forum :slight_smile: :+1:

what timezone are you in? I’m in Japan so inactive when N. America is
active :slight_smile:

1 Like

from philippines. got 1 hour differential

ah, that explains it!

Max Hodges | Founder at White Rabbit Japan |