manul-files

This package provides services and HOCs for file uploads using Slingshot in mantra-apps.
It's currently only working for amazon-s3.

Usage

$3

In a common-directory (client & server) you can place directives.
Each one has a name (here userProfileImages):

``

import { Meteor } from 'meteor/meteor';
import { Random } from 'meteor/random';

// see also server/slingshot
// authorize and key are run on the server
export default {
userProfileImages: {
fileRestrictions: {
allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'],
maxSizeClient: 10 1024 1024, // we resize
resizeToMaxDimension: 720, // width or height in pixels
maxSize: 200 * 1024, // on server, this is also limit where compression starts
},
server: {
authorize() {
// for logged in users
if (
!this.userId
) {
const message = 'Not authorized';
throw new Meteor.Error('not allowed', message);
}

return true;
},
key(file) {
if (!this.userId) {
throw new Meteor.Error('only allowed when user already exists');
}
const randomId = Random.id();
const extension = require('/server/get_file_extension').default(file);

return user_profile_images/${this.userId}/${randomId}.${extension};
},
},
},
};
`

$3

on server, call this on startup:

`
import { initServer } from '@panter/manul-files';

import Directives from '/lib/slingshot_directives';


Meteor.startup(() => {
initServer({ Slingshot, Directives, bucket: 'your-amazon-bucket' });
})
`

$3

In your context.js, instantiate a new upload instance and add it to the context:

`
import { Slingshot } from 'meteor/edgee:slingshot';
import Directives from '/lib/slingshot_directives';

// ...
const context = {
// ...
uploadService: new UploadClient({ Slingshot, Directives })
};
`

You can now use this hoc to compose a file field:

`

import { withUploader } from '@panter/manul-files';

const FileField = withUploader(({
fileRestrictions,
upload, // upload function: upload(file, callback)
progress, // progress in percent
value,
onChange
}) => (
upload(file, (error, url) => {
if(error) {
console.log(error);
else {
onChange(url)
}
}} />
))

`

You have now a FileField which can receive a directiveName like this:

`

``