Created
August 28, 2012 12:17
-
-
Save ynonp/3497603 to your computer and use it in GitHub Desktop.
webstagram
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 8/28/12 | |
| * Time: 2:38 PM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| (function() { | |
| function show_all( data ) { | |
| var template = Handlebars.compile( $('#tmpl-gallery').html()); | |
| var result = template( data ); | |
| $('#gallery').html( result ); | |
| } | |
| function upload_complete() { | |
| $.mobile.changePage('#main'); | |
| } | |
| function refresh() { | |
| $.ajax({ | |
| dataType: 'json', | |
| type: 'GET', | |
| url: 'http://localhost:3000/images/gallery.json', | |
| success: show_all | |
| }); | |
| } | |
| $('#refresh').click( refresh ); | |
| $('#hidden_result').load( upload_complete ); | |
| }()); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>Mystagram</title> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> | |
| <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> | |
| <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script> | |
| <meta name="viewport" content="width=device-width" /> | |
| <style> | |
| #hidden_result { display: none; } | |
| img { | |
| max-width:100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div data-role="page" id="main"> | |
| <div data-role="header"> | |
| <h1>Photos</h1> | |
| <a href="#upload" data-role="button">Upload</a> | |
| </div> | |
| <div data-role="content"> | |
| <button id="refresh">Refresh</button> | |
| <div id="gallery"> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-role="page" id="upload"> | |
| <div data-role="header"> | |
| <h1>Upload</h1> | |
| <a href="#main" data-role="button">Cancel</a> | |
| </div> | |
| <div data-role="content"> | |
| <form method="POST" action="http://localhost:3000/upload" | |
| enctype="multipart/form-data" | |
| target="hidden_result"> | |
| <div> | |
| <label>Username</label> | |
| <input type="text" name="username" /> | |
| </div> | |
| <input type="file" accept="images/*" name="imagefile" /> | |
| <input type="submit" value="Submit" /> | |
| </form> | |
| <iframe id="hidden_result"></iframe> | |
| </div> | |
| </div> | |
| <script type="text/template" id="tmpl-gallery"> | |
| {{#each images}} | |
| <div> | |
| <h4>{{this.user}}</h4> | |
| <img src="{{this.img}}" /> | |
| </div> | |
| {{/each}} | |
| </script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package proj; | |
| use Dancer ':syntax'; | |
| use Dancer::Plugin::Mongo; | |
| use URI; | |
| our $VERSION = '0.1'; | |
| before sub { | |
| header 'Access-Control-Allow-Origin' => '*'; | |
| }; | |
| get '/' => sub { | |
| template 'index'; | |
| }; | |
| get '/upload' => sub { | |
| template 'upload'; | |
| }; | |
| post '/upload' => sub { | |
| my $user = param 'username'; | |
| my $desc = param 'desc' || 'Empty Description'; | |
| my $img = upload 'imagefile'; | |
| my $u = URI->new("data:"); | |
| $u->media_type ( $img->type ); | |
| $u->data ( $img->content ); | |
| insert_image($user, $desc, $u); | |
| }; | |
| post '/images/upload' => sub { | |
| my $user = param 'username'; | |
| my $desc = param 'desc'; | |
| my $img = param 'image_data'; | |
| insert_image($user, $desc, $img); | |
| }; | |
| get '/images/gallery/:user.json' => sub { | |
| my $user = param 'user'; | |
| debug 'user = ' . $user; | |
| my @images = get_images_for_user($user); | |
| to_json { images => [@images] }; | |
| }; | |
| get '/images/gallery/:user' => sub { | |
| my $user = param 'user'; | |
| my @images = get_images_for_user($user); | |
| template 'images', { images => [@images], user => $user }; | |
| }; | |
| get '/images/gallery.json' => sub { | |
| my @images = mongo->rdb->images->find()->sort({'$natural' => -1})->limit(10)->all; | |
| to_json { images => [@images] } | |
| }; | |
| sub get_images_for_user { | |
| my $user = shift; | |
| my $cursor = mongo->rdb->images->find({ user => $user }); | |
| my @objects = $cursor->all; | |
| return @objects; | |
| } | |
| sub insert_image { | |
| my ($user, $desc, $img_data) = @_; | |
| my $obj = { | |
| user => $user, | |
| img => $img_data, | |
| desc => $desc, | |
| }; | |
| mongo->rdb->images->insert($obj); | |
| } | |
| true; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment