Nuclear Power Manager

    @panter/manul-files

    0.2.0 • Public • Published

    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

    configure directives

    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}`;
          },
        },
      },
    };
    

    init server

    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' });
    })
    

    client

    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
    }) => (
      <input type="file" onChange={file => upload(file, (error, url) => {
        if(error) {
          console.log(error);
        else {
          onChange(url)
        }
      }} />
    ))
    
    

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

    <FileField directiveName="userProfileImages" value={...} onChange={...} />
    

    Keywords

    none

    Install

    npm i @panter/manul-files

    DownloadsWeekly Downloads

    3

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    195 kB

    Total Files

    36

    Last publish

    Collaborators

    • blurri
    • claudiocro
    • macrozone
    • remolueoend