Add upload method

[RWOverdijk]

It would be really nice to allow users to upload files.

I was thinking of allowing the use of a simple .upload(file), just like any other request. Async uploads ftw!

[AdamWillden]

Yes, this would be good!

I don't know if you read my conversation with @doktordirk just the other day? I had to forcibly remove the Content-Type header after creating the endpoint because the defaults for it kept getting in the way. Any value other than undefined made the upload not work for me, including the correct value of multipart/form-data. I was using .Net though so that might have been the issue.

[RWOverdijk]

I didn't, but fair point! The reason is that uploads look slightly different. I'm thinking about implementing async file uploads (which makes sense seeing how aurelia is all about that space).

[Listu]

This feature would be really cool ! Do you think it could be released in some weeks (or maybe the next months?) or later ?

[doktordirk]

I.ve PRed a fix which respects Blob and formData. Hence upload will be possible by just Posting the respective blob or so

[RWOverdijk]

@doktordirk My proposal uses async uploads. It's slightly different :)

[doktordirk]

yes, before everything got serialized
now follwoing (should) work already

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

endpoint.post('/avatars', data);

hmm, ps isn't that async??

[doktordirk]

@RWOverdijk besides missing progress, that is what you meant, or am i dump?

[RWOverdijk]

@doktordirk It is :)

[doktordirk]

ah ok. you/we/i should add a sample then

[pfurini]

Hi, is that PR already merged or not? I need to POST FormData, and wanted to know if I need to manually tweak the code or it just works OOB.. thanks!

[doktordirk]

it allways worked since you just can upload async with fetch

[pfurini]

Oh my.. I posted in the wrong place, it's an aurelia-orm issue, not an api one! what the ... well I'll delete them, sorry :P

[doktordirk]

we should ad something to the docs for this

[0xSalman]

@doktordirk tried your snippet from earlier but it did not work. It sends the wrong content type in the header. Even after manually setting the content type to multipart/form-data, the server side complains about no multipart boundary was found.

[doktordirk]

@msalman86 i'm bit lost right now (watching chess cup curently), so just a quicky. here are the lines of the karma test: https://github.com/SpoonX/aurelia-api/blob/master/test/rest.spec.js#L397
(i remember having your error though. but not sure why now now)

[jasonhjohnson]

Any updates on this?

let data = new FormData() data.append('Key', 'myvalue');

return this.api.post(this.apiController, data) .then(result => { return result; }) .catch(errorProcessor);

Doesn't work for me. And by doesn't work, I mean the data isn't sent in the request body.

[RWOverdijk]

@jasonhjohnson As far as I know, this hasn't been implemented yet.We're sending files base64 encoded to the server now, but we'll be using this at some point. If you feel like taking a stab at this, feel free. It would help a lot.

[jasonhjohnson]

@RWOverdijk Gotcha. Is there a workaround for this using the aurelia-api plugin? Right now I'm having to revert back to the regular fetch client like this:

       var myHeaders = new Headers();
       myHeaders.append('Authorization', `Bearer ${localStorage.getItem('id_token')}`);
       //myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

        return this.http.fetch(`${this.apiController}`, {
            method: 'post',
            headers: myHeaders, 
            body: data
        })
        .then(response => {
            if (response.status >= 200 && response.status < 400) {
                return response.json().catch(() => null);
            }

            throw response;
        })
        .then(result => { return result; })
        .catch(errorProcessor);

On second thought, I guess I could just do this:

return this.api.client.fetch(`${this.apiController}`, {
            method: 'post',         
            body: data
        })
        .then(result => { return result; })
        .catch(errorProcessor);

[RWOverdijk]

@jasonhjohnson ^ that should work, yes. I remember @doktordirk saying something about this working, but he's currently unavailable.

We'll for sure leave this issue open so we don't forget about it :)

[jamesond]

Any news on this?

[RWOverdijk]

@jamesond Yes and no. It's not part of api, but I have implemented multiple upload methods in my applications. I could port them to api. but they're vastly different. You can send the file contents for xhr uploads for instance. I can dig up the code, if you want, then maybe you can submit a PR?

[swiftanthony]

Are there any plans to implement this ?

[RWOverdijk]

@swiftanthony I don't know, do you feel like you're up to the challenge? I have some pointers for you, but they may be outdated by now.

[RWOverdijk]

Closing this for now. If this is still relevant, feel free to reopen the issue.

Note: this is a copy-paste comment to clean up the issues. It's not personal, and I didn't review the issue before posting this. They're all outdated and I need a way to figure out what's still relevant.

Thank you for understanding :)