ember.js - props - ember tutorial

Ember.js: Subir componente de archivo

Question

Necesito crear un componente Ember para seleccionar un archivo. Mi página incluirá múltiples "componentes de carga"

He leído una publicación que intenta implementar eso: ( https://stackoverflow.com/questions/9200000/file-upload-with-ember-data ) PERO UploadFileView está directamente relacionado con el controlador. Me gustaría tener algo más genérico ...

Me gustaría eliminar la dependencia de App.StoreCardController.set (''logoFile'' ..) de la vista o pasar el campo (logoFile) de la plantilla ...

Alguna idea para mejorar este código?

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

y la plantilla:

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

Answer 1

Completé un ejemplo completo para mostrar esto en acción

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

Aquí está la plantilla básica de los manubrios

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

Aquí está el objeto de vista de archivo personalizado

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

Aquí está el controlador

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

Y, finalmente, aquí está la vista w / submit evento

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

Esto hará caer 2 archivos en el sistema de archivos si activa la aplicación django

Answer 2

En caso de cargar varios archivos, es posible que desee utilizar

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

Esta es una solución que usarías en la carga HTML normal.

Además, puede usar ''valueBinding'' que le permitirá configurar un observador contra ese valor en su componente.

Answer 3

Marek Fajkus no puede usar .serialize de JQuery, no menciona las cargas de archivos en la documentación en los documentos JQuery UI

Sin embargo, podría usar el complemento de carga JQuery

En realidad lo menciona, dice: "Los datos de los elementos seleccionados no están serializados".

Answer 4

EDITAR (2015.06): acaba de crear una nueva solución basada en un componente. Esta solución proporciona un botón de carga con una vista previa y un ícono de quitar. PD Las clases fa son Font Awesome

Manillar de componentes

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

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

Ejemplo de uso

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

Vieja respuesta

Tomé el ejemplo de Chris Meyers , y lo hice pequeño.

Modelo

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