configuring more than one {{> uploader}} in one page - meteor

Question

I have an {{> uploader}} to get the user selected image. the problem is i want to add another {{> uploader}} with different configuration to get another input from user ".zip format". using {{> uploader}} twice, the same code will function for both of them.
is it possible to use {{> uploader}} twice and give each one its different configuration?
this is the code to configure the type of images the user can upload, how can i set this restriction to {{>uploader config="1"}}
Slingshot.fileRestrictions( "string", {
allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ],
maxSize: null
});
This is how i did it
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
});
}
}
but i get this error
TypeError: Cannot set property 'rendered' of undefined
at server/fileName.js

Answer 1

Update: look like you are using the code from here as an example
You can pass the flag to the template in order to brach the configuration inside the uploader
{{> uploader config="1"}}
{{> uploader config="2"}}
Then inside the template, depending on the flag, you can do
// uploader.js
Template.uploader.events({
'change input[type="file"]' ( event, template ) {
Modules.client.uploadToAmazonS3( { event: event, template: template, config: Template.instance().data['config'] } );
}
});
Now, change the 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 );
};
And finally change the server/slingshot.js
Slingshot.fileRestrictions( "uploadToAmazonS3Cg1", {
....
});
Slingshot.fileRestrictions( "uploadToAmazonS3Cg2", {
....
});
Slingshot.createDirective( "uploadToAmazonS3Cg1", Slingshot.S3Storage, {
...
});
Slingshot.createDirective( "uploadToAmazonS3Cg2", Slingshot.S3Storage, {
...
});