एम्बर डेटा

Question

के साथ फ़ाइल अपलोड करें क्या कोई एम्बरजेएस और एम्बर डेटा का उपयोग कर फ़ाइल फ़ील्ड के साथ फॉर्म को लागू करने के लिए कोड उदाहरण या दस्तावेज़ीकरण प्रदान कर सकता है?

मैं पहले से एम्बर डेटा से परिचित हूं लेकिन मुझे यकीन नहीं है कि फ़ाइल अपलोड को सही तरीके से कैसे कार्यान्वित किया जाए।

Answer 1

यहाँ एक एंबर-डेटा अनुकूलक मैं करने के लिए लिखा था का हिस्सा है

फ़ाइलों के लिए क्लाइंट-साइड में गड़बड़ी के बारे में यहाँ और अधिक पढ़ें (-not क्रॉस डोमेन एक ही सर्वर) फ़ाइल अपलोड कर

DS.DjangoRESTAdapter = DS.RESTAdapter.extend({ 
     bulkCommit: false, 

     createRecord: function(store, type, record) { 
      var root = this.rootForType(type), json = {}; 

      var data = new FormData(); 
      data.append('username', record.get('username')); 
      data.append('attachment', record.get('attachment')); 

      this.django_file_ajax('http://localhost:8000/people/new/', "POST", { 
       data: data, 
       context: this, 
       success: function(pre_json) { 
        json[root] = pre_json; 
        this.didCreateRecord(store, type, record, json); 
       } 
      }); 
     }, 

     django_file_ajax: function(url, type, hash) { 
      hash.url = url; 
      hash.type = type; 
      hash.contentType = false; 
      hash.processData = false; 
      hash.context = this; 

      jQuery.ajax(hash); 
     } 

    }); 

})(); 

यह अनुकूल IE8 नहीं कर रहा है के रूप में है, क्योंकि मैं बहुखण्डीय च करने के लिए "FormData" सहायक उपयोग कर रहा हूँ ile अपलोड करें लेकिन यह अवधारणा का एक अच्छा सबूत है।

यहाँ डब्ल्यू/ऊपर अनुकूलक

PersonApp.Person = DS.Model.extend({ 
    id: DS.attr('number'), 
    username: DS.attr('string'), 
    attachment: DS.attr('string') 
}); 

यहाँ जाना एंबर-डेटा मॉडल है हैंडल टेम्पलेट

<script type="text/x-handlebars" data-template-name="person"> 
{{view PersonApp.UploadFileView name="logo_image" contentBinding="content"}} 
</script> 

यहां कस्टम एंबर दृश्य

PersonApp.PersonView = Ember.View.extend({ 
    templateName: 'person' 
}); 

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 = e.srcElement.result; 
      var person = PersonApp.Person.createRecord({ username: 'heyo', attachment: fileToUpload }); 
      self.get('controller.target').get('store').commit(); 
     } 
     reader.readAsDataURL(input.files[0]); 
     } 
    } 
}); 

है यदि आप एक्शन चेकआउट में इस के साथ एक पूर्ण उड़ा हुआ स्पाइक देखना चाहते हैं तो एक बहु फ़ाइल अपलोड उदाहरण मैंने हाल ही में किया था y। नीचे दिए गए लिंक पर

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

Answer 2

यह काफी आसान है, सामान्य चरण होते हैं:

1. एंबर भीतर एक इनपुट ऊपर हुक।
2. इनपुट तत्व में निर्दिष्ट स्थानीय फ़ाइल से डेटा पढ़ें।
3. डेटा को बेस 64 के रूप में एन्कोड किया गया।
4. अपने एम्बर-डेटा मॉडल का मान बेस 64 स्ट्रिंग पर सेट करें।
5. सर्वर पर, बेस 64 स्ट्रिंग और वॉयला डीकोड करें, आपका बाइनरी फ़ाइल डेटा सर्वर पर है।

यह ध्यान दिया जाना चाहिए कि बेस 64 एन्कोडिंग बड़ी फ़ाइलों में प्रदर्शन समस्याएं हैं, लेकिन छोटी छवियों या पाठ के लिए यह कोई समस्या नहीं होगी।

---

तुम भी फ़ाइल एंबर डाटा का 'बाहर' भेज सकता है, और pushPayload के माध्यम से दुकान में (जैसे एक JSON पेलोड एक मॉडल प्रतिनिधित्व के रूप में) प्रतिक्रिया धक्का। यदि ऐसा है, तो FormData या XHR2 में अन्य विधियों का उपयोग किया जा सकता है। http://www.html5rocks.com/en/tutorials/file/dndfiles/

XHR2 और FormData बारे में अधिक पढ़ें फ़ाइल अपलोड यहाँ: http://www.html5rocks.com/en/tutorials/file/xhr2/

Answer 3

देखो। पहले लिंक या ब्लॉग पोस्ट में एक काम करने वाले jsfiddle का एक लिंक होता है जो एम्बरजेस के साथ अपलोड करता है। नोट मैंने ब्लॉग नहीं लिखा या बेवकूफ बना दिया। लेकिन यह आपके मुद्दे को हल करना चाहिए।

http://chrismeyers.org/2012/06/12/ember-js-handlebars-view-content-inheritance-image-upload-preview-view-object-binding/ - मृत लिंक

http://devblog.hedtek.com/2012/04/brief-foray-into-html5-file-apis.html

Answer 4

मैं कुछ अलग समाधान की कोशिश की और एक FormData एडाप्टर और एक फ़ाइल को बदलने लेखन समाप्त हो गया। तब किसी भी मॉडल फ़ाइल डेटा अपलोड करने के लिए सिर्फ FormDataAdapter का उपयोग करें और फ़ाइल के रूप में प्रकार "फ़ाइल" विशेषताओं का परिभाषित कर सकते हैं की जरूरत है:

एप्लिकेशन/बदल देती है/file.coffee

FileTransform = DS.Transform.extend 
    serialize: (jsonData) -> 
    jsonData 

    deserialize: (externalData) -> 
    externalData 

एप्लिकेशन/मॉडल/user.coffee

User = DS.Model.extend 
    avatar: DS.attr('file') 

एप्लिकेशन/एडाप्टर/form_data.coffee

get = Ember.get; 

App.FormDataAdapter = ApplicationAdapter.extend 
    ajaxOptions: (url, type, hash) -> 
    hash = hash || {} 
    hash.url = url 
    hash.type = type 
    hash.dataType = 'json' 
    hash.context = @ 

    if hash.data and type != 'GET' and type != 'DELETE' 
     hash.processData = false 
     hash.contentType = false 
     fd = new FormData() 
     root = Object.keys(hash.data)[0] 
     for key in Object.keys(hash.data[root]) 
     if hash.data[root][key] 
      fd.append("#{root}[#{key}]", hash.data[root][key]) 

     hash.data = fd 

    headers = get(@, 'headers') 
    if headers != undefined 
     hash.beforeSend = (xhr) -> 
     for key in Ember.keys(headers) 
      xhr.setRequestHeader(key, headers[key]) 

    hash 

एप्लिकेशन/एडाप्टर/user.coffee

UserAdapter = FormDataAdapter.extend() 

CoffeeScript बारे में खेद है, लेकिन यह इस ब्लॉग पोस्ट से चिपकाया है: http://blog.mattbeedle.name/posts/file-uploads-in-ember-data/। आप वहां एक और विस्तृत विवरण पढ़ सकते हैं। छवि समाधान और क्लाइंट साइड फ़ाइल प्रकार सत्यापन सक्षम करने के लिए यह समाधान शायद एक HTML5 फ़ाइल रीडर इनपुट के साथ जोड़ा जाना चाहिए।