Ember.js: Tải lên thành phần tệp

Question

Tôi cần tạo thành phần Ember để chọn tệp. Trang của tôi sẽ bao gồm nhiều "thành phần tải lên"

Tôi đã đọc một bài đăng cố gắng triển khai: (https://stackoverflow.com/questions/9200000/file-upload-with-ember-data) NHƯNG UploadFileView được liên kết trực tiếp với bộ điều khiển. Tôi muốn có một cái gì đó chung chung hơn ...

Tôi muốn xóa phụ thuộc App.StoreCardController.set ('logoFile' ..) khỏi chế độ xem hoặc chuyển trường (logoFile) khỏi mẫu .. .

Bất kỳ ý tưởng nào để cải thiện mã này?

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]); 
     } 
    } 
}); 

và mẫu:

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

Answer 1

tôi hoàn thành một ví dụ hoàn chỉnh để hiển thị này trong hành động

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

Đây là tay lái cơ bản mẫu

<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> 

Dưới đây là các tập tin tùy chỉnh xem đối tượng

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]); 
     } 
    } 
}); 

Dưới đây là bộ điều khiển

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

Và cuối cùng ở đây là quan điểm w/nộp kiện

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(); 
    } 
}); 

này sẽ giảm xuống 2 tập tin trên hệ thống tệp nếu bạn quay lên ứng dụng django

Answer 2

CHỈNH SỬA (2015.06): Chỉ cần tạo một giải pháp mới dựa trên một thành phần. Giải pháp này cung cấp nút tải lên có biểu tượng xem trước và xóa. P.S. Các fa lớp là Font Awesome

tay lái Component

<script type="text/x-handlebars" data-template-name='components/avatar-picker'> 
     {{#if content}} 
      <img src={{content}}/> <a {{action 'remove'}}><i class="fa fa-close"></i></a> 
     {{else}} 
      <i class="fa fa-picture-o"></i> 
     {{/if}} 

     {{input-image fdata=content}} 
</script> 

Component Javascript

App.AvatarPickerComponent = Ember.Component.extend({ 
    actions: { 
     remove: function() { 
      this.set("content", null); 
     } 
    } 
}); 

App.InputImageComponent = Ember.TextField.extend({ 
    type: 'file', 

    change: function (evt) { 
     var input = evt.target; 
     if (input.files && input.files[0]) { 
      var that = this; 

      var reader = new FileReader(); 
      reader.onload = function (e) { 
       var data = e.target.result; 
       that.set('fdata', data); 
      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
}); 

dụ Cách sử dụng

{{avatar-picker content=model.avatar}} 

---

Câu trả lời cũ

Tôi lấy ví dụ Chris Meyers và tôi làm nhỏ.

Template

{{#view Ember.View contentBinding="foto"}} 
    {{view App.FotoUp}} 
    {{view App.FotoPreview width="200" srcBinding="foto"}} 
{{/view}} 

Javascript

App.FotoPreview= Ember.View.extend({ 
    attributeBindings: ['src'], 
    tagName: 'img', 
}); 


App.FotoUp= Ember.TextField.extend({ 
    type: 'file', 

    change: function(evt) { 
     var input = evt.target; 
     if (input.files && input.files[0]) { 
      var that = this; 

      var reader = new FileReader(); 
      reader.onload = function(e) { 
       var data = e.target.result; 
       that.set('parentView.content', data); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    }, 
}); 

Answer 3

Marek Fajkus bạn không thể sử dụng .serialize JQuery, nó làm cho không đề cập đến quá trình tải lên tập tin trong tài liệu tại JQuery UI docs

Tuy nhiên, bạn có thể sử dụng JQuery Upload Plugin

Trên thực tế nó đề cập đến nó, nó nói: ". Dữ liệu từ tập tin chọn các yếu tố không được đăng."

Answer 4

Trong trường hợp tải nhiều file, bạn có thể muốn sử dụng

{{input type='file' multiple='true' valueBinding='file'}} 
          ^^^^ 

Đây là một giải pháp mà bạn sẽ sử dụng trong upload HTML bình thường.

Ngoài ra, bạn có thể sử dụng 'valueBinding', điều này sẽ cho phép bạn thiết lập người quan sát dựa trên giá trị đó trong thành phần của bạn