Skip to content

Instantly share code, notes, and snippets.

@helambuapps helambuapps/. read first
Last active Aug 29, 2015

What would you like to do?
File Upload from browser using WAMP (Web Apps Messaging Protocol)
Create a folder .crossbar and put the file ".config.yaml" inside it. Unfortunately Github doesn't let me create a folder :(
Run the crossbar router before running and index.html
controller: {}
- realms:
- name: realm1
- name: anonymous
- {call: true, publish: true, register: true, subscribe: true, uri: '*'}
- endpoint: {port: 8080, type: tcp}
/: {directory: .., type: static}
ws: {type: websocket}
type: web
type: router
from autobahn.asyncio.wamp import ApplicationSession
from autobahn import wamp
from asyncio import coroutine
import base64
class MyComponent(ApplicationSession):
def upload(self, imagename, image):
imgdata = base64.b64decode(image)
with open(imagename, 'wb') as file:
def onJoin(self, details):
res = yield from self.register(self)
print("{} procedures registered.".format(len(res)))
if __name__ == '__main__':
from autobahn.asyncio.wamp import ApplicationRunner
runner = ApplicationRunner(url="ws://localhost:8080/ws", realm="realm1")
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<input type="file" multiple="true" id="files" accept="image/*">
<script>AUTOBAHN_DEBUG = false;</script>
<script src=""></script>
var connection = new autobahn.Connection({
url: "ws://localhost:8080/ws",
realm: "realm1"
connection.onopen = function (session, details) {
function handleFileUpload(event) {
var files =;
for(var i=0; i<files.length; ++i) {
var file = files[i];
// Ignore the non image types
if (!file.type.match('image.*')) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(event) {
var base64_str =";base64,")[1];"com.myapp.upload", [, base64_str]);
handleFileUpload, false);
connection.onclose = function (reason, details) {
console.log("Connection lost: " + reason);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.