Saving attachment data & retrieving.

[hashg]

I'm trying to attach and retrieve the data back using ember-pouch "attachment". But after saving the data, there are issues reading the attachment data which is returned as "undefined".

Repo

Issue is reproducing using my repo - empouch-attach

Currently my repo implements :

1. Save model without any attachments
2. Add single file to attachment

Code

Using ember-cli-file-picker addon to "Upload files"

.hbs

{{#file-picker fileLoaded="photoAdded" readAs="readAsFile" accept="image/*"}}
  <button type="button" name="button">Click to upload a photo</button>
{{/file-picker}}

route/actions

    photoAdded(file) {
      const profile = this.controller.get('model');
      const selections = Ember.get(profile, 'photo');
      Ember.Logger.debug(file);

      selections.addObject(Ember.Object.create({
        'name' : file.name,
        'content_type' : file.type,
        'data' : file
      }));
      Ember.Logger.debug(profile);
      profile.save();
   }

Scenarios I'm trying to understand :

1. Save model without any attachments
2. Add single file to attachment
3. Add mutiple files to attachment
4. Edit model & add more files to attachment
5. Remove file/s from attachment
6. Retrieve file/s from attachment

I'm stuck @ Retrieve file/s from attachment. I've a doubt my save mechanism scrambles the model data.

[Edit: More info + format]

[srsgores]

Hi @hashg.

I have gotten attachments to work. It turns out there is a typo in the readme. In order to get attachments working properly, you have to rename your DS.attr("attachment" to DS.attr("attachments". When using the former, you will see that defaultValue has no effect; but if you use the latter, the defaultValue will work:

import Model from "ember-pouch/model";
const {attr, hasMany, belongsTo} = DS;

export default Model.extend({
    photos: attr("attachments", {defaultValue: []}), // note the "s" here
    // ...
});

To add attachments, the process is as described in the readme (just note the "s" in the DS.attr call). You can call model.get("photos").addObject();. Of note, however: I was not able to save Files directly in the data field; I had to base64-encode the data.

Now, to answer your question regarding the displaying and retrieving said attachments: you can accomplish this with an {{each}} statement:

<figure class="images-container">
	{{#each model.photos as |photo|}}
		<img src="{{photo.data}}" alt="{model.post.name}}">
	{{/each}}
	<figcaption class="post-image-description">
		{{model.post.name}}
	</figcaption>
</figure>

Of note, this works because a base64-encoded string is a valid value for src.

I hope that helps!

[broerse]

@srsgores Super! Can you make a PR for the readme? I will merge it.

[ntodd]

@broerse I updated the readme in #170

[broerse]

@ntodd Thanks