adapter extracting incorrect root

[danjac]

I'm unable to save a model due to ember-cli-form-data extracting the incorrect root.

Model:

export default Model.extend({
  title: attr(),
  image: attr('file'),
  description: attr(),
  thumbnail: attr(),
  createdAt: attr('date')
});

Controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    submit() {

      const model = this.store.createRecord('image', {
        title: this.get('title'),
        description: this.get('description')
      });

      const image = document.getElementById('image').files[0];
      model.set('image', image);
      model.save();

    }
  }
});

This is the resulting payload:

------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[0]"

t
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[1]"

e
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[2]"

s
------WebKitFormBoundarydHjcL7c0dAoCTjNp
Content-Disposition: form-data; name="title[3]"

t
------WebKitFormBoundarydHjcL7c0dAoCTjNp--

Working through the breakpoints I see this in the ember-cli-form-data adapter:

    _getFormData: function _getFormData(data) {
     // data is {title: 'test', description: 'test', image: File}
      var formData = new FormData();
      var root = Object.keys(data)[0]; // root is 'title'

[samujurado]

Hi there,

I think that I have the same problem. I'm using the JSONAPIAdapter, so my app/adapters/application.js is:

# app/adapters/application.js
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

my model user has a photo:

# app/models/user.js
import DS from 'ember-data';
import { alias } from '@ember/object/computed';

export default DS.Model.extend({
  name: DS.attr('string'),
  photo: DS.attr('file'),
  photoUrl: Ember.computed.alias('photo.url')
});

This is de adapter for user:

# app/adapters/user.js
import ApplicationAdapter from './application';
import FormDataAdapterMixin from 'ember-cli-form-data/mixins/form-data-adapter';

export default ApplicationAdapter.extend(FormDataAdapterMixin, {
});

And this is what my backend receives.

{"data"=>{"id"=>"50", "attributes"=>{"name"=>"Kara Howell *"}, "type"=>"users"}, "id"=>"50"}

And this is what my backend expects. This is the standard.

{"_jsonapi"=>{"data"=>{"id"=>"50", "attributes"=>{"name"=>"Kara Howell *"}, "type"=>"users"}}, "id"=>"50"}

 So the adapter extracting incorrect root.

PD. Meanwhile I have added a serializer to my model user.

# app/serializers/user.js
import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  serialize(snapshot, options) {
    let json = this._super(...arguments);
    return {'_jsonapi': json};
  },
});