Another approach to uploading files is to encode the file into base64. When you encode a binary file to base64, the result is a string that we can use as an attribute in the request object.

Though it can be useful to create objects with the file attached in the resource, or to use it as another resource in the server, this is not a recommended approach. This approach has some limitations:

If you are uploading very small amounts of data and don't have a huge amount of traffic, you can use this technique; otherwise, I encourage you to avoid it. Instead of uploading the file we can encode it:

class ContactEditor {
  // ...

showEditor(contact) {
      // ...
this.listenTo(contactPreview, 'avatar:selected', blob => {
this.setAvatar(contact, blob);
    });
  }

setAvatar(contact, blob) {
varfileReader = new FileReader();

fileReader.onload = event => {
      let parts = event.target.result.split(',');
contact.set('avatarImage', parts[1]);
    };

fileReader.readAsDataURL(blob);
  }
}

Of course the server implementation should be able to decode the avatarImage and store it as an image file.