From 75bb88d52d50308b230008b15b56c1ee7577a6d6 Mon Sep 17 00:00:00 2001
From: Jim Driessen <jim@driessen.li>
Date: Wed, 1 Feb 2017 00:22:48 +0100
Subject: [PATCH] Possibility to clear upload form.

---
 marietje/marietje/static/js/upload.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/marietje/marietje/static/js/upload.js b/marietje/marietje/static/js/upload.js
index 107d85a..6d50054 100644
--- a/marietje/marietje/static/js/upload.js
+++ b/marietje/marietje/static/js/upload.js
@@ -14,8 +14,17 @@ function parseSong(file, form) {
     });
 }
 
+function clearForm() {
+    $('.uploadform form').find('input').prop('disabled', false);
+    $('.song-container').remove();
+    $('.result-message').text('');
+    $('#upload').text('Upload');
+    $('.progress-bar').css('width', '0%').removeClass('progress-bar-success progress-bar-danger active').addClass('progress-bar-info');
+}
+
 $(function () {
     $(document).on('change', '.filefield', function () {
+        clearForm();
         for(var i = 0; i < this.files.length; i++) {
             var form = songContainer.clone().appendTo('.uploadform form');
             var file = this.files[i];
@@ -26,13 +35,20 @@ $(function () {
     $('.song-container').remove();
     
     $('#upload').click(function() {
+        var button = $(this);
+        if(button.text() == 'Clear') {
+            $('.uploadform form')[0].reset();
+            clearForm();
+            return;
+        }
+        button.prop('disabled', true);
         var progressBar = $('.progress-bar');
         var resultMessage = $('.result-message');
         var form = $('.uploadform form');
         progressBar.addClass('active')
         form.ajaxSubmit({
             uploadProgress: function(event, position, total, percentComplete) {
-                form.find('input').attr('disabled', true);
+                form.find('input').prop('disabled', true);
                 progressBar.css('width', percentComplete + '%');
             },
             success: function(result) {
@@ -49,11 +65,15 @@ $(function () {
                     progressBar.addClass('progress-bar-success');
                     resultMessage.text('Uploaded sucessfully.');
                 }
+                button.text('Clear');
+                button.prop('disabled', false);
             },
             error: function() {
                 progressBar.removeClass('progress-bar-info active');
                 progressBar.addClass('progress-bar-danger');
                 progressBar.css('width', '100%');
+                button.text('Clear');
+                button.prop('disabled', false);
             }
         });
     });