Meteor-files: How to metadata from option-tag

[TomokoOG]

I'm trying to fill a metadata-field with the value of an option tag. Plan is to fill in the field "category" with the value of the selected option-tag.

<template name="uploadMedia">
        {{#with currentUpload}}
        Uploading <b>{{file.name}}</b>
        <span id="progress">{{progress.get}}%</span>
        {{else}}
        <label class="upload"> <input id="fileInput" type="file"/>Upload</label>
        <select name="character">
                <option value="0">Choose Category</option>
                <option value="1">Category1</option>
                <option value="2">Category2</option>
                <option value="3">Category3</option>
                <option value="4">Category4</option>
        </select>
         {{/with}}
</template>

Template.uploadMedia.events({

 'change #fileInput'(e, template) {
    var galleryCount = mediaImages.find({meta:{owner:Meteor.userId()}}).count();
    if (galleryCount >= 100) {alert("Maximum reached, 100 Pictures"); return;}

    const select = e.currentTarget.character;
    const category = select.options[select.selectedIndex].text;

    if (e.currentTarget.files) {

      const upload = mediaImages.insert({
        file: e.currentTarget.files[0],

        streams: 'dynamic',
        chunkSize: 'dynamic',
        meta: {'owner': Meteor.userId(),
               'category': category},
      }, false );

      upload.on('start', function () {
        template.currentUpload.set(this);
      });

      upload.on('end', function (error, fileObj) {
        if (error) {
          console.log('Error during upload: ' + error);
        } else {
          console.log('File "' + fileObj.name + '" successfully uploaded');
        }
        template.currentUpload.set(false);
      });
      upload.start();
    }
  }, 
});

But I get following error-message.

upload_Image.js:229 Uncaught TypeError: Cannot read property 'options' of undefined
    at Object.change #fileInput (upload_Image.js:229)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3818
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
    at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3817)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2617
    at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
    at Blaze._DOMRange.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2616)
    at HTMLInputElement.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:863)
    at HTMLDivElement.dispatch (modules.js?hash=d9821e47f0ad2429f0a65c7b267781cc99634ab4:198645)
    at HTMLDivElement.elemData.handle (modules.js?hash=d9821e47f0ad2429f0a65c7b267781cc99634ab4:198452)

This method worked fine on other sections where I used it but here it doesn't seem to work.
const select = e.currentTarget.character; const category = select.options[select.selectedIndex].text;
What am I missing? I'll appreciate any help, thank you

[jankapunkt]

Can you elaborate on const select = e.currentTarget.character;?

What is this supposed to do and what is .character representing?

[TomokoOG]

.character is supposed to reference the select tag

       <select name="character">
                <option value="0">Choose Category</option>
                <option value="1">Category1</option>
                <option value="2">Category2</option>
                <option value="3">Category3</option>
                <option value="4">Category4</option>
        </select>

At least that is what I think.

[jankapunkt]

In Blaze you can use the built-in jQuery (which is faster than the global jQuery, because it's lookup is limit to the current template) to get the current category:

const category = template.$('select[name="character"]').val() // 0,1,2,3 or 4

or use .text() instead to get the option's label.

Does this solve your issue?

[TomokoOG]

It does! Thank you, I didn't know about that.