How to get progress event of a saving model

Ember Data
1

I have seen various simple examples of how to achieve a file-upload in Ember, but most of them go straight to $.ajax and not via an Adapter.

I have an Attachment model, with these attributes:

progress: DS.attr('number', {defaultValue: 0}),
blob: DS.attr('file')  // An HTML 5 file

This saves to the server OK.

By customising the adapter’s ajaxOptions it doesn’t seem possible to add an upload event listener to the XHR object (to update the model’s progress), without completely overriding the ajax method.

The adapter knows nothing about the model, so is this even possible?

1 Like
2

Did you find a solution for this?

3

@florianguenther Unfortunately not. Had to go with a spinner :confused:

4

Jeez, I cannot get code to appear nicely here anymore. Anyway, you can add an event listener before you make a save request and then remove it afterwards. Excuse the terrible formatting.

$(document).on('ajaxSend', (event, request, settings) => {settings.xhr = () => {var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", (evt) => {if (evt.lengthComputable){var percentComplete = Math.round(evt.loaded / evt.total * 100);// DO SOMETHING (update your model perhaps)}}, false); return xhr;};});

Once your request completes/fails you can remove the listener

$(document).off('ajaxSend')

It’s not ideal but it should work.