Render image list on client
This commit is contained in:
parent
3bb9ef5b55
commit
ec32870b98
4 changed files with 36 additions and 55 deletions
31
fotostore.pl
31
fotostore.pl
|
@ -144,6 +144,37 @@ get '/' => sub {
|
|||
|
||||
} => 'index';
|
||||
|
||||
get '/get_images' => ( authenticated => 1 ) => sub {
|
||||
my $self = shift;
|
||||
|
||||
my $current_user = $self->current_user;
|
||||
|
||||
my $files_list = $db->get_files($current_user->{'user_id'}, 20);
|
||||
|
||||
my $thumbs_dir = File::Spec->catfile( $IMAGE_DIR, $current_user->{'user_id'}, $thumbs_size );
|
||||
|
||||
my @images = map { $_->{'file_name'} } @$files_list;
|
||||
|
||||
my $images = [];
|
||||
|
||||
for my $img_item (@$files_list) {
|
||||
my $file = $img_item->{'file_name'};
|
||||
my $img_hash = {};
|
||||
$img_hash->{'original_url'} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $ORIG_DIR, $file );
|
||||
$img_hash->{'thumbnail_url'} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $thumbs_size, $file );
|
||||
|
||||
for my $scale (@scale_width) {
|
||||
$img_hash->{$scale} = File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, $scale, $file );
|
||||
}
|
||||
|
||||
push(@$images, $img_hash);
|
||||
}
|
||||
|
||||
|
||||
# Render
|
||||
return $self->render( json => $images );
|
||||
};
|
||||
|
||||
# Upload image file
|
||||
# There is no restriction for file size in app because restriction is present in nginx configuration
|
||||
post '/upload' => ( authenticated => 1 ) => sub {
|
||||
|
|
|
@ -1,54 +0,0 @@
|
|||
<div class="container">
|
||||
<div class="logout"><a href="/logout">Logout</a></div>
|
||||
<div class"upload-form">
|
||||
<input id="fileupload" type="file" name="image" data-url="/upload" multiple>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="/file_uploader/js/vendor/jquery.ui.widget.js"></script>
|
||||
<script src="/file_uploader/js/jquery.iframe-transport.js"></script>
|
||||
<script src="/file_uploader/js/jquery.fileupload.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('#fileupload').fileupload({
|
||||
dataType: 'json',
|
||||
done: function (e, data) {
|
||||
$.each(data.result.files, function (index, file) {
|
||||
$('<p/>').text(file.name).appendTo('#lastUploadLog');
|
||||
});
|
||||
},
|
||||
sequentialUploads: true,
|
||||
progressall: function (e, data) {
|
||||
var progress = parseInt(data.loaded / data.total * 100, 10);
|
||||
$('#progress .bar').css(
|
||||
'width',
|
||||
progress + '%'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="progress">
|
||||
<div class="bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div id="lastUploadLog"></div>
|
||||
</div>
|
||||
|
||||
<!-- display images from server -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<% foreach my $image (@$images) { %>
|
||||
<div class="foto-block col-md-3">
|
||||
<div class="image">
|
||||
<img src="<%= "/$image_base/$user_id/$thumbs_size/$image" %>">
|
||||
</div>
|
||||
<div class="foto-notes">
|
||||
<a href='<%= "/$image_base/$user_id/$orig/$image" %>'>Image original</a>
|
||||
<% for my $scale (@$scales) { %>
|
||||
<a href='<%= "/$image_base/$user_id/$scale/$image" %>'><%= $scale %></a>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
|
@ -2,7 +2,7 @@
|
|||
<h1>Rough, Slow, Stupid, Contrary Photohosting</h1>
|
||||
|
||||
<% if (is_user_authenticated()) { %>
|
||||
%= include 'images_list'
|
||||
%= include 'includes/images_list'
|
||||
<% } else { %>
|
||||
|
||||
<div class="login-form">
|
||||
|
|
|
@ -13,6 +13,9 @@
|
|||
<link rel="stylesheet" href="/file_uploader/css/jquery.fileupload.css">
|
||||
<link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
|
||||
<script src="https://vuejs.org/js/vue.min.js"></script>
|
||||
|
||||
<!-- CSS adjustments for browsers with JavaScript disabled -->
|
||||
<noscript><link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-noscript.css"></noscript>
|
||||
<noscript><link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui-noscript.css"></noscript>
|
||||
|
@ -26,4 +29,5 @@
|
|||
<body>
|
||||
<%= content %>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in a new issue