Ember File Uploads

by hamzeen hameem

HTML

<script type="text/x-handlebars" data-template-name='application'>
{{outlet}}

<h2>Upload Documents</h2>
<hr/>


    {{#each attachments as |uploadRow index|}}
    	
    	<div id={{uploadRow.id}}>
    		{{uploadRow.id}}. 
    		<input style="opacity:0" onchange={{action "upload"}} accept="image/png,image/jpeg,application/pdf" type="file"/>
    		{{uploadRow.fileName}}
    		<input type=checkbox checked={{uploadRow.isOn}}><br/>
    	</div>
    {{/each}}

    <button {{action "moreFields"}}> More Files </button>
</script>

JavaScript

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
    attachments: [{
        id: '1', fileName:'filename', isOn: true
    }],

    actions: {
        moreFields: function() {
            if(this.get('attachments').length > 4) {
                alert('Maximum 5 Rows only');
            } else {
                var rowNum = this.get('attachments').length+1;

                this.get('attachments').pushObject({
                    id: rowNum,fileName:'filename',isOn: true
                });
            }
        },

        upload: function(event) {
            const reader = new FileReader();
            const file = event.target.files[0];
            let fileData;

            var temp = this.get('attachments').objectAt(event.target.parentNode.id - 1);
            Ember.set(temp, "fileName", file.name);

            reader.onload = () => {
                fileData = reader.result;
                debugger;
                // this.set('data.image', imageData);
            };
            /*if (file) {
                reader.readAsDataURL(file);
            }*/
        }
    }
    
});