Upload Image in Meteor
Hi, Check this post, if you want to know how to upload image in metoer...
JS On Client
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import Images from '/lib/images.collection.js';
import './main.html';
Template.uploadedFiles.helpers({
uploadedFiles: function () {
return Images.find();
}
});
Template.uploadForm.onCreated(function () {
this.currentUpload = new ReactiveVar(false);
});
Template.uploadForm.helpers({
currentUpload: function () {
return Template.instance().currentUpload.get();
}
});
Template.uploadForm.events({
'change #fileInput': function (e, template) {
if (e.currentTarget.files && e.currentTarget.files[0]) {
// We upload only one file, in case
// there was multiple files selected
var file = e.currentTarget.files[0];
if (file) {
var uploadInstance = Images.insert({
file: file,
streams: 'dynamic',
chunkSize: 'dynamic'
});
uploadInstance.on('start', function() {
template.currentUpload.set(this);
});
uploadInstance.on('end', function(error, fileObj) {
if (error) {
window.alert('Error during upload: ' + error.reason);
} else {
window.alert('File "' + fileObj._id + '" successfully uploaded');
}
template.currentUpload.set(false);
});
uploadInstance.start();
}
}
}
});
This is your Html on Client.
<head>
<title>Simplest upload form</title>
</head>
<body>
<h1>Simplest upload form!</h1>
<p>See <a href="https://github.com/VeliovGroup/Meteor-Files">ostrio:files</a></p>
{{> uploadForm}}
{{> uploadedFiles}}
</body>
<template name="uploadForm">
{{#with currentUpload}}
Uploading <b>{{file.name}}</b>:
<span id="progress">{{progress.get}}%</span>
{{else}}
<input id="fileInput" type="file" />
<p><small>Upload file in <code>jpeg</code> or <code>png</code> format, with size less or equal to 10MB</small></p>
{{/with}}
</template>
<template name="uploadedFiles">
{{#if uploadedFiles.count}}
<ul>
{{#each file in uploadedFiles.each}}
<li>
<a href="{{file.link}}?download=true" download="{{file.name}}">{{file.name}}</a>
</li>
{{/each}}
</ul>
{{else}}
<div>No files uploaded, yet</div>
{{/if}}
</template>
JS On Client
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import Images from '/lib/images.collection.js';
import './main.html';
Template.uploadedFiles.helpers({
uploadedFiles: function () {
return Images.find();
}
});
Template.uploadForm.onCreated(function () {
this.currentUpload = new ReactiveVar(false);
});
Template.uploadForm.helpers({
currentUpload: function () {
return Template.instance().currentUpload.get();
}
});
Template.uploadForm.events({
'change #fileInput': function (e, template) {
if (e.currentTarget.files && e.currentTarget.files[0]) {
// We upload only one file, in case
// there was multiple files selected
var file = e.currentTarget.files[0];
if (file) {
var uploadInstance = Images.insert({
file: file,
streams: 'dynamic',
chunkSize: 'dynamic'
});
uploadInstance.on('start', function() {
template.currentUpload.set(this);
});
uploadInstance.on('end', function(error, fileObj) {
if (error) {
window.alert('Error during upload: ' + error.reason);
} else {
window.alert('File "' + fileObj._id + '" successfully uploaded');
}
template.currentUpload.set(false);
});
uploadInstance.start();
}
}
}
});
This is your Html on Client.
<head>
<title>Simplest upload form</title>
</head>
<body>
<h1>Simplest upload form!</h1>
<p>See <a href="https://github.com/VeliovGroup/Meteor-Files">ostrio:files</a></p>
{{> uploadForm}}
{{> uploadedFiles}}
</body>
<template name="uploadForm">
{{#with currentUpload}}
Uploading <b>{{file.name}}</b>:
<span id="progress">{{progress.get}}%</span>
{{else}}
<input id="fileInput" type="file" />
<p><small>Upload file in <code>jpeg</code> or <code>png</code> format, with size less or equal to 10MB</small></p>
{{/with}}
</template>
<template name="uploadedFiles">
{{#if uploadedFiles.count}}
<ul>
{{#each file in uploadedFiles.each}}
<li>
<a href="{{file.link}}?download=true" download="{{file.name}}">{{file.name}}</a>
</li>
{{/each}}
</ul>
{{else}}
<div>No files uploaded, yet</div>
{{/if}}
</template>
For More Information : https://github.com/VeliovGroup/Meteor-Files
Comments
Post a Comment