Ember.js：上传文件组件 [英] Ember.js: Upload file component

问题描述

我需要创建一个Ember组件来选择一个文件。
我的页面将包含多个上传组件

我已经阅读了一个尝试实现的帖子：（ https://stackoverflow.com/questions/9200000/file-upload-with-ember-data ）但是UploadFileView是直接链接的到控制器。
我想要一些更通用的东西...

我想删除App.StoreCardController.set（'logoFile'..）依赖关系视图或通过字段（logoFile）从模板...

任何改进这个代码的想法？

  App.UploadFileView = Ember.TextField.extend（{
 type：'file'，
 attributeBindings：['name']，
 change：函数（evt）{
 var self = this; 
 var input = evt.target; 
 if（input.files&& input.files [0]）{
 App.StoreCardController.set（'logoFile'，input.files [0]）; 
} 
} 
}）; 
  

和模板：

  {{view App.UploadFileView name =icon_image}} 
 {{view App.UploadFileView name =logo_image}} 
  

解决方案

我完成了一个完整的例子来展示这个行动

https://github.com/toranb/ember-file-upload

这是基本的手柄模板

 < script type =text / x-handlebarsdata-template-name =person> 
 {{view PersonApp.UploadFileView name =logocontentBinding =content}} 
 {{view PersonApp.UploadFileView name =othercontentBinding =content}} 
< {{action submitFileUpload content target =parentView}}> Save< / a> 
< / script> 
  

这是自定义文件视图对象

  PersonApp.UploadFileView = Ember.TextField.extend（{
 type：'file'，
 attributeBindings：['name']，
 change：function （evt）{
 var self = this; 
 var input = evt.target; 
 if（input.files&& input.files [0]）{
 var reader = new FileReader（）; 
 var that = this; 
 reader.onload = function（e）{
 var fileToUpload = reader.result; 
 self.get '）.set（self.get（'name'），fileToUpload）; 
} 
 reader.readAsDataURL（input.files [0]）; 
} 
} 
}）; 
  

这是控制器

  PersonApp.PersonController = Ember.ObjectController.extend（{
 content：null，
 logo：null，
 other：null 
}）; 
  

最后这里是w / submit事件的视图

  PersonApp.PersonView = Ember.View.extend（{
 templateName：'person'，
 submitFileUpload：function（event）{
 event .preventDefault（）; 
 var person = PersonApp.Person.createRecord（{username：'heyo'，attachment：this.get（'controller'）。get（'logo'），other：this.get控制器'）get（'other'）}）; 
 this.get（'controller.target'）。get（'store'）。commit（）; 
} 
}） ; 
  

如果您启动django应用程序，这将删除文件系统上的2个文件$ / b $ b

I need to create an Ember component to select a file. My page will include multiple "upload component"

I have read a post trying to implement that: (https://stackoverflow.com/questions/9200000/file-upload-with-ember-data) BUT the UploadFileView is directly linked to the controller. I would like to have something more generic...

I would like to remove the App.StoreCardController.set('logoFile'..) dependency from the view or pass the field (logoFile) from the template...

Any idea to improve this code ?

   App.UploadFileView = Ember.TextField.extend({
    type: 'file',
    attributeBindings: ['name'],
    change: function(evt) {
      var self = this;
      var input = evt.target;
      if (input.files && input.files[0]) {
        App.StoreCardController.set('logoFile', input.files[0]);
      }
    }
});

and the template:

{{view App.UploadFileView name="icon_image"}}
{{view App.UploadFileView name="logo_image"}}

解决方案

I completed a full blown example to show this in action

https://github.com/toranb/ember-file-upload

Here is the basic handlebars template

<script type="text/x-handlebars" data-template-name="person">
{{view PersonApp.UploadFileView name="logo" contentBinding="content"}}
{{view PersonApp.UploadFileView name="other" contentBinding="content"}}
<a {{action submitFileUpload content target="parentView"}}>Save</a>
</script>

Here is the custom file view object

PersonApp.UploadFileView = Ember.TextField.extend({
    type: 'file',
    attributeBindings: ['name'],
    change: function(evt) {
      var self = this;
      var input = evt.target;
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var that = this;
        reader.onload = function(e) {
          var fileToUpload = reader.result;
          self.get('controller').set(self.get('name'), fileToUpload);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
});

Here is the controller

PersonApp.PersonController = Ember.ObjectController.extend({
  content: null,
  logo: null,
  other: null
});

And finally here is the view w/ submit event

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person',
  submitFileUpload: function(event) {
    event.preventDefault();
    var person = PersonApp.Person.createRecord({ username: 'heyo', attachment: this.get('controller').get('logo'), other: this.get('controller').get('other') });
    this.get('controller.target').get('store').commit();
  }
});

This will drop 2 files on the file system if you spin up the django app

这篇关于Ember.js：上传文件组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！