forgot template
This commit is contained in:
parent
c9a3f580e0
commit
2c7ca48d52
1 changed files with 83 additions and 0 deletions
83
templates/includes/images_list.html.ep
Normal file
83
templates/includes/images_list.html.ep
Normal file
|
@ -0,0 +1,83 @@
|
|||
<div class="container">
|
||||
<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 id="images_list">
|
||||
<div class="foto-block row" v-for="image in imagesList">
|
||||
<div class="image col-md-3">
|
||||
<img v-bind:src="image.thumbnail_url">
|
||||
</div>
|
||||
<div class="foto-notes col-md-3">
|
||||
<ul>
|
||||
<li><a v-bind:href="image.thumbnail_url">Original</a></li>
|
||||
<li v-for="scale in image.scales">
|
||||
<a v-bind:href="scale.url">{{ scale.size }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var apiURL = '<%= url_for('get_images') %>'
|
||||
|
||||
var demo = new Vue({
|
||||
|
||||
el: '#images_list',
|
||||
|
||||
data: {
|
||||
imagesList: null
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData: function () {
|
||||
var xhr = new XMLHttpRequest()
|
||||
var self = this
|
||||
xhr.open('GET', apiURL)
|
||||
xhr.onload = function () {
|
||||
self.imagesList = JSON.parse(xhr.responseText)
|
||||
console.log(self.imagesList[0].thumbnail_url)
|
||||
}
|
||||
xhr.send()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
Loading…
Reference in a new issue