配置多个{{>上传者}}在一个页面中

时间:2016-02-12 05:57:21

标签: meteor

我有{{> uploader}}获取用户选择的图像。问题是我想添加另一个{{> uploader}}具有不同的配置以从用户获得另一个输入" .zip格式"。使用{{> uploader}}两次,相同的代码将同时适用于它们。

是否可以使用{{> uploader}}两次并给每个人配置不同的配置?

这是用于配置用户可以上传的图片类型的代码,如何将此限制设置为{{> uploader config =" 1"}}

   Slingshot.fileRestrictions( "string", {
  allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ],
maxSize: null
});

我就这样做了

Template.upload.rendered = function(){
  if (upload.instance().data['config'] === '1') { 
        Slingshot.fileRestrictions( "string", {
    allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ],
    maxSize: null
  });
    } else if (upload.instance().data['config'] === '2') { 
      Slingshot.fileRestrictions( "string", {
    allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ],
    maxSize: null
  });

    }
}

但我收到此错误

TypeError: Cannot set property 'rendered' of undefined
    at server/fileName.js

1 个答案:

答案 0 :(得分:1)

更新:看起来您使用here中的代码作为示例

您可以将标志传递给模板,以便在上传器中进行配置

{{> uploader config="1"}} 
{{> uploader config="2"}} 

然后在模板内部,根据标志,你可以做

    // uploader.js
    Template.uploader.events({
        'change input[type="file"]' ( event, template ) {
            Modules.client.uploadToAmazonS3( { event: event, template: template, config: Template.instance().data['config'] } );
        }
    });

现在,将upload-to-amazon.js更改为

let _uploadFileToAmazon = ( file, config ) => {
  var uploader;
  if (config === '1') {
      uploader = new Slingshot.Upload( "uploadToAmazonS3Cg1" );
  } else {
      uploader = new Slingshot.Upload( "uploadToAmazonS3Cg2" );
  }

  uploader.send( file, ( error, url ) => {
    if ( error ) {
      Bert.alert( error.message, "warning" );
      _setPlaceholderText();
    } else {
      _addUrlToDatabase( url );
    }
  });
};

let upload = ( options ) => {
  template = options.template;
  let file = _getFileFromInput( options.event );
  let config = options.config;

  _setPlaceholderText( `Uploading ${file.name}...` );
  _uploadFileToAmazon( file, config );
};

最后更改服务器/ slingshot.js

Slingshot.fileRestrictions( "uploadToAmazonS3Cg1", {
  ....
});

Slingshot.fileRestrictions( "uploadToAmazonS3Cg2", {
  .... 
});

Slingshot.createDirective( "uploadToAmazonS3Cg1", Slingshot.S3Storage, {
   ...
});

Slingshot.createDirective( "uploadToAmazonS3Cg2", Slingshot.S3Storage, {
   ...
});