fotostore/templates/includes/images_list.html.ep

<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="progress-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 class="image_title">
                    {{ image.filename }}
                </div>
            </div>
            <div class="foto-notes col-md-3">
                <div class="image-scale image-original">
                    <div class="image-scale-url">
                        <a v-bind:href="image.original_url">Original</a>
                    </div>
                    <div @click="copyText" class="copy-img">
                        &lt;img src={{ hostname+image.original_url }}&gt;
                    </div>
                    <div @click="copyText" class="copy-bb-more">
                        [MORE=&lt;img src={{ hostname+image.thumbnail_url }}&gt;]&lt;img src={{ hostname+image.original_url }}&gt;[/MORE]
                    </div>
                </div>    
                <div class="image-scale" v-for="scale in image.scales">
                    <div class="image-scale-url">
                        <a v-bind:href="scale.url">{{ scale.size }}</a>
                    </div>
                    <div @click="copyText" class="copy-img">
                        &lt;img src={{ hostname+scale.url }}&gt;
                    </div> 
                    <div @click="copyText" class="copy-bb-more">
                        [MORE=&lt;img src={{ hostname+image.thumbnail_url }}&gt;]&lt;img src={{ hostname+scale.url }}&gt;[/MORE]
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var apiURL = '<%= url_for('get_images') %>'
    var hostname = window.location.protocol+"//"+window.location.host;

    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)
            }
            xhr.send()
            },
            copyText(event) {
                //TODO: rewrite it to vue/JS from jquery
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val($(event.target).text().trim()).select();
                document.execCommand("copy");
                $temp.remove();
            },
        }
        
    })
</script>