template logger ember ember.js

ember.js - logger - helpers ember



Carga de archivo con datos de Ember (4)

Aquí hay una parte de un adaptador de datos de ember que escribí para subir los archivos (el mismo servidor, sin dominio cruzado)

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

No es tan fácil para IE8 porque utilizo el ayudante "FormData" para hacer una carga de archivos de varias partes, pero es una buena prueba de concepto.

Aquí está el modelo de datos ámbar para ir con el adaptador anterior

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

Aquí está la plantilla de manubrios

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

Aquí está la vista de la brasa personalizada

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

Si desea ver un pico completo con este en proceso de pago, un ejemplo de carga de archivos múltiples que hice recientemente.

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

¿Puede alguien proporcionar ejemplos de código o documentación sobre la implementación de un formulario con un campo de archivo usando EmberJS y Ember Data?

Ya estoy familiarizado con Ember Data, pero no estoy seguro de cómo implementar cargas de archivos correctamente.

Es bastante simple, los pasos generales son:

  1. Conecte una entrada dentro de Ember.
  2. Lea los datos del archivo local especificado en el elemento de entrada.
  3. Codificó los datos como base64.
  4. Establezca el valor de su modelo de datos ámbar en la cadena base64.
  5. En el servidor, decodifique la cadena base64 y listo, los datos de su archivo binario estarán en el servidor.

Sin embargo, debe tenerse en cuenta que la codificación de bases64 de archivos grandes tiene problemas de rendimiento, pero para imágenes más pequeñas o texto no será un problema.

También puede enviar el archivo ''afuera'' de Ember Data y enviar la respuesta (como una carga útil JSON que representa un modelo) a la tienda a través de pushPayload . Si es así, se pueden usar FormData u otros métodos en XHR2.

Lea más sobre la manipulación de archivos en el lado del cliente aquí: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Obtenga más información sobre XHR2 y FormData para subir archivos aquí: http://www.html5rocks.com/en/tutorials/file/xhr2/

Intenté algunas soluciones diferentes y terminé escribiendo un adaptador de FormData y una transformación de archivo. Entonces, cualquier modelo que necesite cargar datos de archivos puede usar FormDataAdapter y definir los atributos del archivo como tipo "archivo":

aplicación / transformaciones / archivo.coffee

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

app / models / user.coffee

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

aplicación / adaptadores / 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

app / adapters / user.coffee

UserAdapter = FormDataAdapter.extend()

Perdón por el CoffeeScript, pero está pegado en esta publicación del blog: http://blog.mattbeedle.name/posts/file-uploads-in-ember-data/ . Puedes leer una descripción más detallada allí. Esta solución probablemente debería combinarse con una entrada HTML5 FileReader para habilitar las vistas previas de imágenes y la validación del tipo de archivo del lado del cliente.