File Upload from browser

[Greg Miller]

I've successfully uploaded files from my browser to a Node backend using autobahn.  I encode the file to base64, send it, then decode it back and save it. It's fast and   it was pretty simple once I figured out all of the parts.  If anyone wants some code, let me know.

But, I'm curious if there's a better way.  Perhaps one where no encoding/decoding takes place.  But I'm assuming autobahn can only transmit raw data and not things like an array buffer.

[paradox7]

I am facing the same problem, appreciated if you can share your example.

From the WAMP site, it seems possible serializing the image with MsgPack, but I am not sure if it is better than base64 encoding...

[Greg Miller]

I use a small widget to let me drag/drop or select a file, so I don't have a generic example handle for that portion.  But if I recall correctly you just have to have an input='file' element and register a change event on it.  In the change handler you can get a reference to the file(s).  Then you can do.

var filehandle = reference to the file from the change event.
var filereader = new FileReader();

filereader.onload = function(ev) {
    var name = this.name;
    var data = arrayBufferToBase64(this.result);

    session.call(uri, [], {name: name, data: data})....
}

filereader.readAsArrayBuffer(filehandle);

function arrayBufferToBase64(buffer) {
        var b64 = '';
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
 
        for (var i = 0; i < len; i++) {
          b64 += String.fromCharCode(bytes[i] );
        }
 
        return window.btoa(b64);
 },

On the Node side, it's:

var data = new Buffer(kwargs.data, 'base64');

Then save data to disk.

[paradox7]

Thanks Greg.

Just found this earlier thread: Send binary file with WAMP. Sounded like AutobahnJS doesn't support MsgPack but one could use other JS package, such as wampy.js, to transfer binary data without base64 encoding, i.e. using MsgPack binary serialization. Since AutobahnPython does support MsgPack, it should just work without us doing any decoding... I should be able to give that a try in a few days and let yo know how it goes...

[Tobias Oberstein]

Hi,

yes, AutobahnJS does not (yet) support MsgPack serializer, while wampy.js does.

Crossbar.io and AutobahnPython support JSON and MsgPack.

Using MsgPack would allow you to transfer the binary bits without base64 encoding.

Cheers,
/Tobias

[ed...@increasify.com.au]

https://gist.github.com/helambuapps/5f47b538168355fdf4ba

This is my solution, but with the Python backend component instead.

Not sure if it is the best way (uploading one by one in a loop) to handle it when I have a HTML form with other input fields, I mean when file uploading is a part of the HTML form.

[Tobias Oberstein]

Hi Eddie and Greg,

neat!

As this might be a useful thing for others also, would you be interested
in contributing your Python and Node versions of "file upload via WAMP"
as examples to

https://github.com/crossbario/crossbarexamples

? Would be awesome!

E.g. 2 new examples, one with Python and one with Node backend:

https://github.com/crossbario/crossbarexamples/fileupload/python
https://github.com/crossbario/crossbarexamples/fileupload/nodejs

Simply fork the repo and do a PR .. I'll merge.

License should be Apache 2.0 or MIT ..

Cheers,
/Tobias

> --
> You received this message because you are subscribed to the Google
> Groups "Autobahn" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to autobahnws+...@googlegroups.com
> <mailto:autobahnws+...@googlegroups.com>.
> To post to this group, send email to autob...@googlegroups.com
> <mailto:autob...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/autobahnws/6594c85b-1163-4a01-bc5f-1df462d4472c%40googlegroups.com
> <https://groups.google.com/d/msgid/autobahnws/6594c85b-1163-4a01-bc5f-1df462d4472c%40googlegroups.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout.