I can upload to it no problem and all the images are there. I just want to be able to display a thumbnail…
server/main.js
import { AdvisorLogos, AdvisorLogosStore } from '../imports/collections/advisorLogos';
Meteor.startup(() => {
Meteor.publish('advisorLogos', function() {
return AdvisorsLogos.find({});
});
Meteor.publish('advisorLogosStore', function() {
return AdvisorsLogosStore.find({});
});
});
imports/collections/advisorLogos.js
import { Mongo } from 'meteor/mongo';
import { UploadFS } from 'meteor/jalik:ufs';
Meteor.methods({
});
export const AdvisorLogos = new Mongo.Collection('advisorLogos');
export const Thumbnails128 = new Mongo.Collection('thumbnails-128');
export const Thumbnails64 = new Mongo.Collection('thumbnails-64');
export const AdvisorLogosStore = new UploadFS.store.GridFS({
collection: AdvisorLogos,
name: 'advisorLogos',
chunkSize: 1024 * 255,
filter: new UploadFS.Filter({
minSize: 1,
maxSize: 1024 * 1000,
contentTypes: ['image/*'],
extensions: ['jpg', 'png']
})
,
copyTo: [
Thumbnail128Store,
Thumbnail64Store
]
});
export const Thumbnail128Store = new UploadFS.store.GridFS({
collection: Thumbnails128,
name: 'thumbnails-128',
chunkSize: 1024 * 255,
filter: new UploadFS.Filter({
minSize: 1,
maxSize: 1024 * 1000,
contentTypes: ['image/*'],
extensions: ['jpg', 'png']
}),
transformWrite: function(readStream, writeStream, fileId, file) {
let gm = Npm.require('gm');
if (gm) {
gm(from)
.resize(128, 128)
.gravity('Center')
.extent(128, 128)
.quality(75)
.stream().pipe(to);
} else {
console.error("gm is not available", file);
}
}
});
export const Thumbnail64Store = new UploadFS.store.GridFS({
collection: Thumbnails64,
name: 'thumbnails-64',
chunkSize: 1024 * 255,
filter: new UploadFS.Filter({
minSize: 1,
maxSize: 1024 * 1000,
contentTypes: ['image/*'],
extensions: ['jpg', 'png']
}),
transformWrite: function(readStream, writeStream, fileId, file) {
let gm = Npm.require('gm');
if (gm) {
gm(from)
.resize(64, 64)
.gravity('Center')
.extent(64, 64)
.quality(75)
.stream().pipe(to);
} else {
console.error("gm is not available", file);
}
}
});
client/component/logoUpload.jsx
import React, { Component } from 'react';
import { UploadFS } from 'meteor/jalik:ufs';
import { Button } from 'react-materialize';
import { createContainer } from 'meteor/react-meteor-data';
import { AdvisorLogos, AdvisorLogosStore } from '../../../imports/collections/advisorLogos';
class LogoUpload extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<div>
<Button waves='light' onClick={this.handleClick}>Upload a Logo</Button>
// Create image of thumbnail
</div>
);
}
handleClick(event) {
event.preventDefault();
UploadFS.selectFiles(function(file) {
let photo = {
name: file.name,
size: file.size,
type: file.type
};
let worker = new UploadFS.Uploader({
store: 'advisorLogos',
data: file,
file: photo,
onError: function(err) {
console.log(err);
},
onComplete: function(file) {
console.log(file.name + ' has been uploaded');
},
onProgress: function(file, progress) {
console.log(file.name + ' ' + (progress * 100) + '% uploaded');
},
onStart: function(file) {
console.log(file.name + ' started');
},
onStop: function(file) {
console.log(file.name + ' stopped');
}
});
worker.start();
});
}
}
export default createContainer(() => {
const logosHandler = Meteor.subscribe("advisorLogos");
const loading = !(logosHandler.ready());
const logos = AdvisorLogos.findOne({ ownedBy: Meteor.userId() });
const exists = !loading && !!logos;
}, LogoUpload);