File Upload from browser

#1

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.

0 Likes

#2

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…

···

On Monday, December 8, 2014 12:40:51 PM UTC-5, Greg Miller wrote:

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.

0 Likes

#3

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.

0 Likes

#4

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…

···

On Monday, December 22, 2014 6:36:35 PM UTC-5, Greg Miller wrote:

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.

0 Likes

#5

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

···

Am Dienstag, 23. Dezember 2014 21:26:16 UTC+1 schrieb 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…

On Monday, December 22, 2014 6:36:35 PM UTC-5, Greg Miller wrote:

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.

0 Likes

#6

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.

···

On Tuesday, December 9, 2014 4:40:51 AM UTC+11, Greg Miller wrote:

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.

0 Likes

#7

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

···

Am 05.01.2015 um 03:36 schrieb 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.

On Tuesday, December 9, 2014 4:40:51 AM UTC+11, Greg Miller wrote:

    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.

--
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.

0 Likes