Image preview

draft/library/wsf_js_widget/kernel/input/wsf_file_control.e

@@ -15,7 +15,7 @@ inherit
 		end
 
 create
-	make
+	make, make_with_image_preview
 
 feature {NONE} -- Initialization
 
@@ -24,6 +24,12 @@ feature {NONE} -- Initialization
 			make_value_control ("input")
 		end
 
+	make_with_image_preview
+		do
+			make
+			image_preview := True
+		end
+
 feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 
 	set_state (new_state: JSON_OBJECT)
@@ -37,6 +43,12 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 				end
 				create file.make (new_name.unescaped_string_32, new_type.unescaped_string_32, new_size.item.to_integer_32, id);
 			end
+			if attached {JSON_BOOLEAN} new_state.item ("disabled") as a_disabled then
+				disabled := a_disabled.item
+			end
+			if attached {JSON_BOOLEAN} new_state.item ("image_preview") as a_image_preview then
+				image_preview := a_image_preview.item
+			end
 		end
 
 	state: WSF_JSON_OBJECT
@@ -52,6 +64,7 @@ feature {WSF_PAGE_CONTROL, WSF_CONTROL} -- State management
 				Result.put_string (f.id, "file_id")
 			end
 			Result.put_boolean (disabled, "disabled")
+			Result.put_boolean (image_preview, "image_preview")
 		end
 
 feature -- Event handling
@@ -115,7 +128,7 @@ feature -- Implementation
 			if disabled then
 				attr.append ("disabled=%"disabled%" ")
 			end
-			Result := render_tag ("", attr)
+			Result := render_tag_with_tagname ("div", render_tag ("", attr), Void, "")
 		end
 
 feature -- Change
@@ -151,11 +164,22 @@ feature -- Change
 			file := v
 		end
 
+	set_image_preview (b: BOOLEAN)
+		do
+			if image_preview /= b then
+				image_preview := b
+				state_changes.replace_with_boolean (image_preview, "image_preview")
+			end
+		end
+
 feature -- Properties
 
 	disabled: BOOLEAN
 			-- Defines if the a file is selectable and if a file can be removed once it is uploaded
 
+	image_preview: BOOLEAN
+			-- Preview uploaded image
+
 	file: detachable WSF_FILE
 			-- Text to be displayed
 

examples/widgetapp/assets/widget.coffee

@@ -385,7 +385,7 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
     @uploading = true
     @$el.hide()
     @progressbar = $ """<div class="progress progress-striped active upload"><div rstyle="width: 10%;" class="progress-bar"></div></div>"""
-    @$el.parent().append(@progressbar)
+    @$el.parent().prepend(@progressbar)
 
     formData = new FormData();
     action = @callback_url
@@ -433,6 +433,15 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
       @state['file_name'] = file.name
       @state['file_type'] = file.type
       @state['file_size'] = file.size
+    if @state['image_preview']
+      reader = new FileReader();
+      reader.readAsDataURL(@$el[0].files[0]);
+      self = @
+      reader.onload = (e)->
+          self.$el.parent().find("img").remove() 
+          preview = $("""<img >""").addClass("media thumbnail")
+          preview[0].src = e.target.result
+          self.$el.parent().append(preview)
     if @state['callback_change']
       @trigger_callback(@control_name, 'change')
     @trigger('change')
@@ -441,6 +450,9 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
     return @$el.val()
 
   update: (state) ->
+    if state.image_preview != undefined
+      @state['image_preview'] = state.image_preview 
+      @refresh()
     if state.disabled != undefined
       @state['disabled'] = state.disabled
       @$el.prop('disabled', state.disabled)
@@ -463,18 +475,21 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
     if @uploading
       return
     @progressbar?.remove()
-    @$el.parent().find("p").remove()
+    @$el.parent().find("p, img").remove() 
     if @state['file_id'] != null
       @$el.hide()
       fname = $("""<p></p>""").addClass("form-control-static").text(@state['file_name'])
       @$el.parent().append(fname)
+      if @state['image_preview']
+        preview = $("""<img >""").attr('src', @state['file_id']).addClass("media thumbnail")
+        @$el.parent().append(preview)
       if not @state['disabled']
         fname.append(" ");
         removebtn = $("<button />").text("Remove").addClass("btn btn-xs btn-danger")
         self = @
         removebtn.click ()->
           self.progressbar?.remove()
-          self.$el.parent().find("p").remove()
+          self.$el.parent().find("p, img").remove()
           self.$el.show()
           self.$el.val('')
           self.change()

examples/widgetapp/assets/widget.js

@@ -628,7 +628,7 @@ WSF_FILE_CONTROL = (function(_super) {
     this.uploading = true;
     this.$el.hide();
     this.progressbar = $("<div class=\"progress progress-striped active upload\"><div rstyle=\"width: 10%;\" class=\"progress-bar\"></div></div>");
-    this.$el.parent().append(this.progressbar);
+    this.$el.parent().prepend(this.progressbar);
     formData = new FormData();
     action = this.callback_url({
       control_name: this.get_full_control_name(),
@@ -674,7 +674,7 @@ WSF_FILE_CONTROL = (function(_super) {
   };
 
   WSF_FILE_CONTROL.prototype.change = function() {
-    var file;
+    var file, reader, self;
     this.state['file_name'] = null;
     this.state['file_type'] = null;
     this.state['file_size'] = null;
@@ -685,6 +685,18 @@ WSF_FILE_CONTROL = (function(_super) {
       this.state['file_type'] = file.type;
       this.state['file_size'] = file.size;
     }
+    if (this.state['image_preview']) {
+      reader = new FileReader();
+      reader.readAsDataURL(this.$el[0].files[0]);
+      self = this;
+      reader.onload = function(e) {
+        var preview;
+        self.$el.parent().find("img").remove();
+        preview = $("<img >").addClass("media thumbnail");
+        preview[0].src = e.target.result;
+        return self.$el.parent().append(preview);
+      };
+    }
     if (this.state['callback_change']) {
       this.trigger_callback(this.control_name, 'change');
     }
@@ -696,6 +708,10 @@ WSF_FILE_CONTROL = (function(_super) {
   };
 
   WSF_FILE_CONTROL.prototype.update = function(state) {
+    if (state.image_preview !== void 0) {
+      this.state['image_preview'] = state.image_preview;
+      this.refresh();
+    }
     if (state.disabled !== void 0) {
       this.state['disabled'] = state.disabled;
       this.$el.prop('disabled', state.disabled);
@@ -723,18 +739,22 @@ WSF_FILE_CONTROL = (function(_super) {
   };
 
   WSF_FILE_CONTROL.prototype.refresh = function() {
-    var fname, removebtn, self, _ref;
+    var fname, preview, removebtn, self, _ref;
     if (this.uploading) {
       return;
     }
     if ((_ref = this.progressbar) != null) {
       _ref.remove();
     }
-    this.$el.parent().find("p").remove();
+    this.$el.parent().find("p, img").remove();
     if (this.state['file_id'] !== null) {
       this.$el.hide();
       fname = $("<p></p>").addClass("form-control-static").text(this.state['file_name']);
       this.$el.parent().append(fname);
+      if (this.state['image_preview']) {
+        preview = $("<img >").attr('src', this.state['file_id']).addClass("media thumbnail");
+        this.$el.parent().append(preview);
+      }
       if (!this.state['disabled']) {
         fname.append(" ");
         removebtn = $("<button />").text("Remove").addClass("btn btn-xs btn-danger");
@@ -744,7 +764,7 @@ WSF_FILE_CONTROL = (function(_super) {
           if ((_ref1 = self.progressbar) != null) {
             _ref1.remove();
           }
-          self.$el.parent().find("p").remove();
+          self.$el.parent().find("p, img").remove();
           self.$el.show();
           self.$el.val('');
           return self.change();