How can I get an HTML element from a template?

@larryh wrote:

Hi,

This seems like it should be super simple, but for some reason it’s just not working.

I’m trying to upload an image file using ember-cli-form-data. Their doc says to use an input tag with type=file. Then, when the form is submitted, you grab the input element and call element.files[0] to get the specified file. (files is a valid property for a file-type input element).

But for some reason I am unable to get the input element so I can get the file the user specified. Heck, I can’t even get its corresponding label.

I am using a component (don’t know if that makes a difference or not).

Here is what I have in the component’s template:

<label for='456' id='123'>My label</label>
<input type="file" id="456">

Here is what I have in the component’s js file (in the submit action handler):

let  el = document.getElementById('123');
console.log(`getElementById(123): ${JSON.stringify(el)}`);

el = this.$('#123');
console.log(`$(#123): ${JSON.stringify(el)}`);

el = document.getElementById('456');
console.log(`getElementById(456): ${JSON.stringify(el)}`);

el = this.$('#456');
console.log(`$(#456): ${JSON.stringify(el)}`);

As you can see, I have tried two different ways to grab the element.

Here is the output:

getElementById(123): {}
$(#123): {"0":{},"length":1,"prevObject":{"0":{"sizzle1532006154834":{"undefined":{"parentNode":[1027,1,true]}}},"length":1}}
getElementById(456): {} 
$(#456): {"0":{},"length":1,"prevObject":{"0":{"sizzle1532006154834":{"undefined":{"parentNode":[1027,1,true]}}},"length":1}}

As you can see, the document.getElementId() didn’t seem to work at all (this is how the addon’s doc said to do it), and using using a jQuery selector doesn’t give me anything I can call file on. When I tried I got the following error in the console:

TypeError: el.files is undefined

Can someone point out what I am doing wrong, and how I can just grab an element from a component’s template?

Thanks, Larry

Posts: 1

Participants: 1

Read full topic