dmr3/Websocket drag and drop upload

## Websocket drag and drop upload
#!/usr/bin/env perl
use Mojolicious::Lite;

any '/' => sub {
    my $c = shift;
} => 'index' ;

websocket '/uploads' => sub {
    my $c = shift;
    $c->on( json => sub {
        my ($ws,$file_rh) = @_;
        my $file = Mojo::Asset::File->new();
        $file->add_chunk($file_rh->{contents})->move_to($file_rh->{name});
        say "hello ", $file_rh->{name};

        #print $c->dumper($contents);
        sleep 3;
        $ws->send({json => {data => $file_rh->{name}}});
    });
    $c->on(finish => sub {
        my ($ws,$code,$reason) = @_;
        say "WebSocket closed with status $code.";
    });

} => 'save';

app->start;

__DATA__
@@ index.html.ep
% layout 'default';

%= stylesheet begin

    table#holder {
        border: 5px dashed #CCC;
        width:400px;
        font-family:Verdana;
    }
    table#holder tr:first-child {
        height:50px;
        text-align:center;
    }
    table#holder tr:last-child {
        height:300px;
        line-height: 50px;
    }
    table#holder li img {
        height: 30px;
    }

% end

%= javascript begin

function transViaWS (url,files) {

      console.log("inside the websocket block: ", url);

      var ws     = new WebSocket(url);
      var reader = new FileReader();
      reader.fileName =  files.item(0).name;

      var i = 0;

      reader.onloadend = function(event) {
          var contents = event.target.result;
          var name     = event.target.fileName;
          $('#fileList').text('Tranforming ' + name)
          ws.send(
                JSON.stringify( {'contents':contents, 'name': name} )
          );
          console.log(event.target.fileName);
          i++;
      };

      reader.onprogress = function(data) {
        if (data.lengthComputable){
            var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
            console.log(progress);
        }
      }

      ws.onopen = function () {
          reader.readAsText( files.item(0) );
      };

      ws.onmessage = function (evt) {
          var data = JSON.parse(evt.data);
          console.log(i);
          console.log(data);
          if (i < files.length){
            reader.fileName = files.item(i).name;
            reader.readAsText( files.item(i) );
          }
          else {
            ws.close();
          }
      };
}


% end

%= javascript begin

$(document).ready ( function () {
    $('#holder').on({
        'dragover dragenter': function(e) {
            e.preventDefault();
            e.stopPropagation();
        },
        'drop': function(e) {
            // console.log(e.originalEvent, instanceof, DragEvent);
            var dataTransfer = e.originalEvent.dataTransfer;
            if (dataTransfer && dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                files  = dataTransfer.files;
                transViaWS("<%= url_for('save')->to_abs %>", files);
            }
        }
    });
});

% end

<table id="holder">
  <tr>
    <td>Drop files here</td>
  </tr>
  <tr>
    <td><ul id="fileList"></ul></td>
  </tr>
</table>

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <title><%= title %></title>
    </head>
    <body><%= content %></body>
</html>
	#!/usr/bin/env perl
	use Mojolicious::Lite;

	any '/' => sub {
	my $c = shift;
	} => 'index' ;

	websocket '/uploads' => sub {
	my $c = shift;
	$c->on( json => sub {
	my ($ws,$file_rh) = @_;
	my $file = Mojo::Asset::File->new();
	$file->add_chunk($file_rh->{contents})->move_to($file_rh->{name});
	say "hello ", $file_rh->{name};

	#print $c->dumper($contents);
	sleep 3;
	$ws->send({json => {data => $file_rh->{name}}});
	});
	$c->on(finish => sub {
	my ($ws,$code,$reason) = @_;
	say "WebSocket closed with status $code.";
	});

	} => 'save';

	app->start;

	__DATA__
	@@ index.html.ep
	% layout 'default';

	%= stylesheet begin

	table#holder {
	border: 5px dashed #CCC;
	width:400px;
	font-family:Verdana;
	}
	table#holder tr:first-child {
	height:50px;
	text-align:center;
	}
	table#holder tr:last-child {
	height:300px;
	line-height: 50px;
	}
	table#holder li img {
	height: 30px;
	}

	% end

	%= javascript begin

	function transViaWS (url,files) {

	console.log("inside the websocket block: ", url);

	var ws = new WebSocket(url);
	var reader = new FileReader();
	reader.fileName = files.item(0).name;

	var i = 0;

	reader.onloadend = function(event) {
	var contents = event.target.result;
	var name = event.target.fileName;
	$('#fileList').text('Tranforming ' + name)
	ws.send(
	JSON.stringify( {'contents':contents, 'name': name} )
	);
	console.log(event.target.fileName);
	i++;
	};

	reader.onprogress = function(data) {
	if (data.lengthComputable){
	var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
	console.log(progress);
	}
	}

	ws.onopen = function () {
	reader.readAsText( files.item(0) );
	};

	ws.onmessage = function (evt) {
	var data = JSON.parse(evt.data);
	console.log(i);
	console.log(data);
	if (i < files.length){
	reader.fileName = files.item(i).name;
	reader.readAsText( files.item(i) );
	}
	else {
	ws.close();
	}
	};
	}


	% end

	%= javascript begin

	$(document).ready ( function () {
	$('#holder').on({
	'dragover dragenter': function(e) {
	e.preventDefault();
	e.stopPropagation();
	},
	'drop': function(e) {
	// console.log(e.originalEvent, instanceof, DragEvent);
	var dataTransfer = e.originalEvent.dataTransfer;
	if (dataTransfer && dataTransfer.files.length) {
	e.preventDefault();
	e.stopPropagation();
	files = dataTransfer.files;
	transViaWS("<%= url_for('save')->to_abs %>", files);
	}
	}
	});
	});

	% end

	<table id="holder">
	<tr>
	<td>Drop files here</td>
	</tr>
	<tr>
	<td><ul id="fileList"></ul></td>
	</tr>
	</table>

	@@ layouts/default.html.ep
	<!DOCTYPE html>
	<html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<title><%= title %></title>
	</head>
	<body><%= content %></body>
	</html>