Reset fileupload on form reset. Fixed #31

Allow resetting and clearing fileupload using js

docs/assets/js/bootstrap-fileupload.js

@@ -43,6 +43,12 @@
     var height = this.$preview.css('height')
     if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
 
+    this.original = {
+      'exists': this.$element.hasClass('fileupload-exists'),
+      'preview': this.$preview.html(),
+      'hiddenVal': this.$hidden.val()
+    }
+    
     this.$remove = this.$element.find('[data-dismiss="fileupload"]')
 
     this.$element.find('[data-trigger="fileupload"]').on('click.fileupload', $.proxy(this.trigger, this))
@@ -54,6 +60,7 @@
     
     listen: function() {
       this.$input.on('change.fileupload', $.proxy(this.change, this))
+      $(this.$input[0].form).on('reset.fileupload', $.proxy(this.reset, this))
       if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this))
     },
     
@@ -111,6 +118,16 @@
       }
     },
     
+    reset: function(e) {
+      this.clear()
+      
+      this.hidden.val(this.original.hiddenVal)
+      this.$preview.html(this.original.preview)
+      
+      if (this.original.exists) this.$element.addClass('fileupload-new').removeClass('fileupload-exists')
+       else this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
+    },
+    
     trigger: function(e) {
       this.$input.trigger('click')
       e.preventDefault()
@@ -126,6 +143,7 @@
       var $this = $(this)
       , data = $this.data('fileupload')
       if (!data) $this.data('fileupload', (data = new Fileupload(this, options)))
+      if (typeof options == 'string') data[options]()
     })
   }
 

docs/assets/js/bootstrap.js

@@ -2704,6 +2704,12 @@
     var height = this.$preview.css('height')
     if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
 
+    this.original = {
+      'exists': this.$element.hasClass('fileupload-exists'),
+      'preview': this.$preview.html(),
+      'hiddenVal': this.$hidden.val()
+    }
+    
     this.$remove = this.$element.find('[data-dismiss="fileupload"]')
 
     this.$element.find('[data-trigger="fileupload"]').on('click.fileupload', $.proxy(this.trigger, this))
@@ -2715,6 +2721,7 @@
     
     listen: function() {
       this.$input.on('change.fileupload', $.proxy(this.change, this))
+      $(this.$input[0].form).on('reset.fileupload', $.proxy(this.reset, this))
       if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this))
     },
     
@@ -2772,6 +2779,16 @@
       }
     },
     
+    reset: function(e) {
+      this.clear()
+      
+      this.hidden.val(this.original.hiddenVal)
+      this.$preview.html(this.original.preview)
+      
+      if (this.original.exists) this.$element.addClass('fileupload-new').removeClass('fileupload-exists')
+       else this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
+    },
+    
     trigger: function(e) {
       this.$input.trigger('click')
       e.preventDefault()
@@ -2787,6 +2804,7 @@
       var $this = $(this)
       , data = $this.data('fileupload')
       if (!data) $this.data('fileupload', (data = new Fileupload(this, options)))
+      if (typeof options == 'string') data[options]()
     })
   }
 

docs/javascript.html

@@ -2022,6 +2022,10 @@ $('.carousel').carousel({
             <h3>Methods</h3>
             <h4>.fileupload(options)</h4>
             <p>Initializes a file upload widget.</p>
+            <h4>.fileupload('clear')</h4>
+            <p>Clear the selected file.</p>
+            <h4>.fileupload('reset')</h4>
+            <p>Reset the form element to the original value.</p>
           </section>
 
 

docs/templates/pages/javascript.mustache

@@ -1952,6 +1952,10 @@ $('.carousel').carousel({
             <h3>{{_i}}Methods{{/i}}</h3>
             <h4>.fileupload({{_i}}options{{/i}})</h4>
             <p>{{_i}}Initializes a file upload widget.{{/i}}</p>
+            <h4>.fileupload({{_i}}'clear'{{/i}})</h4>
+            <p>{{_i}}Clear the selected file.{{/i}}</p>
+            <h4>.fileupload({{_i}}'reset'{{/i}})</h4>
+            <p>{{_i}}Reset the form element to the original value.{{/i}}</p>
           </section>
 
 

js/bootstrap-fileupload.js

@@ -43,6 +43,12 @@
     var height = this.$preview.css('height')
     if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
 
+    this.original = {
+      'exists': this.$element.hasClass('fileupload-exists'),
+      'preview': this.$preview.html(),
+      'hiddenVal': this.$hidden.val()
+    }
+    
     this.$remove = this.$element.find('[data-dismiss="fileupload"]')
 
     this.$element.find('[data-trigger="fileupload"]').on('click.fileupload', $.proxy(this.trigger, this))
@@ -54,6 +60,7 @@
     
     listen: function() {
       this.$input.on('change.fileupload', $.proxy(this.change, this))
+      $(this.$input[0].form).on('reset.fileupload', $.proxy(this.reset, this))
       if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this))
     },
     
@@ -111,6 +118,16 @@
       }
     },
     
+    reset: function(e) {
+      this.clear()
+      
+      this.$hidden.val(this.original.hiddenVal)
+      this.$preview.html(this.original.preview)
+      
+      if (this.original.exists) this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
+       else this.$element.addClass('fileupload-new').removeClass('fileupload-exists')
+    },
+    
     trigger: function(e) {
       this.$input.trigger('click')
       e.preventDefault()
@@ -126,6 +143,7 @@
       var $this = $(this)
       , data = $this.data('fileupload')
       if (!data) $this.data('fileupload', (data = new Fileupload(this, options)))
+      if (typeof options == 'string') data[options]()
     })
   }