file upload to gridftp

[qcg-portal.git] / filex / templates / filex / upload.js.html

diff --git a/filex/templates/filex/upload.js.html b/filex/templates/filex/upload.js.html
new file mode 100644 (file)
index 0000000..1ad049f
--- /dev/null
+++ b/filex/templates/filex/upload.js.html
@@ -0,0 +1,100 @@
+{% load staticfiles %}
+
+<script src="{% static 'filex/fileupload/jquery.ui.widget.js' %}"></script>
+<script src="{% static 'filex/fileupload/jquery.iframe-transport.js' %}"></script>
+<script src="{% static 'filex/fileupload/jquery.fileupload.js' %}"></script>
+<script src="{% static 'filex/underscore/underscore-min.js' %}"></script>
+<script src="{% static 'filex/humanize/humanize-duration.js' %}"></script>
+
+<script>
+    $(function () {
+        'use strict';
+
+        var template = _.template($('#template').html());
+
+        function humanBytes(bytes, no_unit) {
+            function format(val, unit) {
+                if(no_unit)
+                    return val;
+
+                return val + ' ' + unit;
+            }
+
+            if(bytes == 0)
+                return format('0', 'B');
+
+            var k = 1024,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
+
+            return format((bytes / Math.pow(k, i)).toFixed(1), sizes[i]);
+        }
+
+        $('#files').fileupload({
+            sequentialUploads: true,
+            add: function (e, data) {
+                $.each(data.files, function (index, file) {
+                    data.context = $(template(file));
+                    $('#elements').append(data.context);
+                });
+
+                data.submit();
+            },
+            progress: function (e, data) {
+                var progress = parseInt(data.loaded / data.total * 100, 10);
+
+                data.context.find('.progress-bar').css('width', progress+'%').attr('aria-valuenow', data.loaded);
+                data.context.find('.progress-bar span').text(progress+'%');
+
+                if (data.loaded < data.total) {
+                    data.context.find('.bit-rate').text(humanBytes(data.bitrate / 8) + '/s');
+                    data.context.find('.progress-info').text(humanBytes(data.loaded, true) + ' / ' + humanBytes(data.total));
+                }
+            },
+            progressall: function (e, data) {
+                var remaining = (data.total - data.loaded) / (data.bitrate / 8);
+
+                if (remaining) {
+                    $('#btn-close').hide();
+                    $('#status').text('Pozostało ' + (humanizeDuration(remaining * 1000, {language: 'pl', round: true}) || 'kilka sekund'));
+                }
+                else {
+                    $('#btn-close').show();
+                    $('#status').text('');
+                }
+            },
+            done: function (e, data) {
+                data.context.find('.bit-rate').text('');
+                data.context.find('.progress-info').text('Zakończono');
+            },
+            fail: function (e, data) {
+                data.context.find('.progress-info').text('Błąd');
+                console.log(data.errorThrown);
+                console.log(data.textStatus);
+            }
+        });
+
+        $(window).on('beforeunload', function() {
+            if ($('#files').fileupload('active'))
+                return 'Nie zakończono przesyłania wszystkich plików, czy chcesz kontynuować?';
+        });
+    });
+</script>
+
+<script type="text/template" id="template">
+    <div class="item">
+        <div class="text clearfix">
+            <span class="name"><%= name %></span>
+            <span class="status pull-right">
+                <em class="small bit-rate" style="margin-right: 15px"></em>
+                <span class="text-muted progress-info">Oczekiwanie</span>
+            </span>
+        </div>
+
+        <div class="progress">
+            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="<%= size %>" style="width: 0;">
+                <span class="sr-only">0%</span>
+            </div>
+        </div>
+    </div>
+</script>