handle conflicting file names for uploaded files

diff --git a/filex/templates/filex/upload.css.html b/filex/templates/filex/upload.css.html
index 9b1a588..a90ac8c 100644 (file)
--- a/filex/templates/filex/upload.css.html
+++ b/filex/templates/filex/upload.css.html
@@ -66,4 +66,9 @@
     #btn-close {
         margin-right: 15px;
     }
+
+    .modal-footer .checkbox {
+        margin-top: 7px;
+        margin-bottom: 7px;
+    }
 </style>

diff --git a/filex/templates/filex/upload.html b/filex/templates/filex/upload.html
index bf48a96..a25be47 100644 (file)
--- a/filex/templates/filex/upload.html
+++ b/filex/templates/filex/upload.html
@@ -22,3 +22,24 @@
         </div>
     </div>
 </footer>
+
+<div id="conflict" class="modal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="modal-label">Plik już istnieje</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+            <div class="modal-footer">
+                <div class="checkbox pull-left">
+                    <label>
+                        <input id="apply-to-all" type="checkbox" autocomplete="off"> Zastosuj do wszystkich
+                    </label>
+                </div>
+                <button id="btn-skip" type="button" class="btn btn-default">Pomiń</button>
+                <button id="btn-replace" type="button" class="btn btn-default">Zastąp</button>
+            </div>
+        </div>
+    </div>
+</div>

diff --git a/filex/templates/filex/upload.js.html b/filex/templates/filex/upload.js.html
index 603f402..9e661d0 100644 (file)
--- a/filex/templates/filex/upload.js.html
+++ b/filex/templates/filex/upload.js.html
@@ -5,12 +5,24 @@
 <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 src="{% static 'qcg/moment/moment.min.js' %}"></script>
+<script src="{% static 'qcg/moment/pl.js' %}"></script>
 
 <script>
     $(function () {
         'use strict';
 
-        var template = _.template($('#template').html());
+        var host = '{{ host }}',
+            path = '{{ path }}',
+            template = _.template($('#template').html()),
+            conflictTemplate = _.template($('#conflict-template').html()),
+            $conflictStack = $.when(),
+            $conflict = $('#conflict').modal({
+                show: false,
+                keyboard: false,
+                backdrop: 'static'
+            }),
+            applyToAll;
 
         function humanBytes(bytes, no_unit) {
             function format(val, unit) {
@@ -33,13 +45,85 @@
         $('#files').fileupload({
             sequentialUploads: true,
             add: function (e, data) {
-                $.each(data.files, function (index, file) {
-                    data.context = $(template(file));
-                    $('#elements').append(data.context);
-                });
+                var file = data.files[0];
+
+                data.context = $(template(file));
+                $('#elements').append(data.context);
 
                 data.submit();
             },
+            submit: function (e, data) {
+                var file = data.files[0],
+                    $this = $(this);
+
+                data.context.find('.progress-info').text('Przetwarzanie');
+
+                function finish(action) {
+                    if (action == 'replace')
+                        data.jqXHR = $this.fileupload('send', data);
+                    else
+                        data.context.find('.progress-info').text('Pominięto');
+                }
+
+                $.getJSON('{% url 'filex:info' %}', {host: host, path: path + file.name}, function(response) {
+                    if (applyToAll != undefined) {
+                        finish(applyToAll);
+                        return;
+                    }
+
+                    $conflictStack = $conflictStack.then(function() {
+                        if (applyToAll != undefined) {
+                            finish(applyToAll);
+                            return;
+                        }
+
+                        var deferred = $.Deferred();
+
+                        $conflict.one('hidden.bs.modal', function() {
+                            deferred.resolve();
+                        });
+
+                        $('#btn-skip').off().on('click', function() {
+                            if ($('#apply-to-all').prop('checked')) {
+                                applyToAll = 'skip';
+                            }
+
+                            $conflict.modal('hide');
+                            finish('skip');
+                        });
+                        $('#btn-replace').off().on('click', function() {
+                            if ($('#apply-to-all').prop('checked')) {
+                                applyToAll = 'replace';
+                            }
+
+                            $conflict.modal('hide');
+                            finish('replace');
+                        });
+
+                        $conflict.find('.modal-body').html(conflictTemplate({
+                            name: file.name,
+                            srcDate: moment(file.lastModified),
+                            srcSize: humanBytes(file.size),
+                            dstDate: moment(response.date),
+                            dstSize: humanBytes(response.size)
+                        }));
+                        $conflict.modal('show');
+
+                        return deferred.promise();
+                    });
+
+                }).fail(function(xhr, textStatus) {
+                    // if file does not exist we are good to go
+                    if (xhr.status == 404)
+                        finish('replace');
+                    else {
+                        data.context.find('.progress-info').text('Błąd');
+                        console.error("Info query failed: " + textStatus);
+                    }
+                });
+
+                return false;
+            },
             progress: function (e, data) {
                 var progress = parseInt(data.loaded / data.total * 100, 10);
 
@@ -69,8 +153,7 @@
             },
             fail: function (e, data) {
                 data.context.find('.progress-info').text('Błąd');
-                console.log(data.errorThrown);
-                console.log(data.textStatus);
+                console.error(data);
             }
         });
 
@@ -79,7 +162,7 @@
                 return 'Nie zakończono przesyłania wszystkich plików, czy chcesz kontynuować?';
         });
 
-        $(window).on('dragenter dragleave drop', function(e) {
+        $(window).on('dragenter dragleave drop', function() {
             $('#drop-overlay').toggleClass('in');
         })
 
@@ -103,3 +186,29 @@
         </div>
     </div>
 </script>
+
+<script type="text/template" id="conflict-template">
+    <h4>W wybranej lokalizacji plik on nazwie <em><%= name %></em> już istnieje!</h4>
+
+    <table class="table">
+        <thead>
+            <tr>
+                <th></th>
+                <th>Lokalny</th>
+                <th>Zdalny</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th scope="row">Data modyfikacji</th>
+                <td><%= srcDate.format('D MMM YYYY, h:mm') %></td>
+                <td><%= dstDate.format('D MMM YYYY, h:mm') %></td>
+            </tr>
+            <tr>
+                <th scope="row">Rozmiar</th>
+                <td><%= srcSize %></td>
+                <td><%= dstSize %></td>
+            </tr>
+        </tbody>
+    </table>
+</script>