Workin file upload

This commit is contained in:
YNH Webdev
2014-01-01 01:35:43 +01:00
parent b39dd5c40d
commit 29356c0b61
6 changed files with 116 additions and 60 deletions

View File

@@ -370,21 +370,22 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
constructor: ()->
super
@uploading = false
start_upload: ()->
if @uploading
return
@uploading = true
@$el.hide()
@progressbar = $ """<div class="progress"><div rstyle="width: 10%;" class="progress-bar"></div></div>"""
@progressbar = $ """<div class="progress progress-striped active upload"><div rstyle="width: 10%;" class="progress-bar"></div></div>"""
@$el.parent().append(@progressbar)
formData = new FormData();
action = @callback_url
control_name: @control_name
control_name: @get_full_control_name()
event: "uploadfile"
event_parameter: ""
file = @$el[0].files[0];
formData.append('our-file', file)
formData.append('file', file)
formData.append('state', JSON.stringify(@get_context_state()))
@sendXHRequest(formData, action)
@@ -395,20 +396,15 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
onprogressHandler = (evt)->
percent = evt.loaded/evt.total*100
self.progressbar.find('.progress-bar').css {'width':percent+"%"}
onloadHandler = (evt)->
alert "DONE"
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.upload.addEventListener('load', onloadHandler, false);
onstatechange = (evt)->
if xhr.readyState==4 && xhr.status==200
self.get_page().process_update(JSON.parse(xhr.responseText))
xhr.upload.addEventListener('progress', onprogressHandler, false);
###Set up events
xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
###
#Set up request
xhr.addEventListener('readystatechange', onstatechange, false);
xhr.open('POST', uri, true);
#Fire!
xhr.send(formData);
attach_events: ()->
@@ -435,9 +431,10 @@ class WSF_FILE_CONTROL extends WSF_CONTROL
return @$el.val()
update: (state) ->
if state.text?
@state['text'] = state.text
@$el.val(state.text)
if state.upload_file?
@progressbar.hide()
@$el.parent().append($("""<p></p>""").addClass("form-control-static").text(@state['file']))
@state['upload_file'] = state.upload_file
class WSF_PASSWORD_CONTROL extends WSF_INPUT_CONTROL

View File

@@ -97,4 +97,9 @@ body {
.CodeMirror-code{
line-height: 1.4em;
}
.upload.progress{
margin-top: 7px;
margin-bottom: 0px;
}

View File

@@ -618,22 +618,22 @@ WSF_FILE_CONTROL = (function(_super) {
}
this.uploading = true;
this.$el.hide();
this.progressbar = $("<div class=\"progress\"><div rstyle=\"width: 10%;\" class=\"progress-bar\"></div></div>");
this.progressbar = $("<div class=\"progress progress-striped active upload\"><div rstyle=\"width: 10%;\" class=\"progress-bar\"></div></div>");
this.$el.parent().append(this.progressbar);
formData = new FormData();
action = this.callback_url({
control_name: this.control_name,
control_name: this.get_full_control_name(),
event: "uploadfile",
event_parameter: ""
});
file = this.$el[0].files[0];
formData.append('our-file', file);
formData.append('file', file);
formData.append('state', JSON.stringify(this.get_context_state()));
return this.sendXHRequest(formData, action);
};
WSF_FILE_CONTROL.prototype.sendXHRequest = function(formData, uri) {
var onloadHandler, onprogressHandler, self, xhr;
var onprogressHandler, onstatechange, self, xhr;
xhr = new XMLHttpRequest();
self = this;
onprogressHandler = function(evt) {
@@ -643,18 +643,13 @@ WSF_FILE_CONTROL = (function(_super) {
'width': percent + "%"
});
};
onloadHandler = function(evt) {
return alert("DONE");
onstatechange = function(evt) {
if (xhr.readyState === 4 && xhr.status === 200) {
return self.get_page().process_update(JSON.parse(xhr.responseText));
}
};
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.upload.addEventListener('load', onloadHandler, false);
/*Set up events
xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
*/
xhr.addEventListener('readystatechange', onstatechange, false);
xhr.open('POST', uri, true);
return xhr.send(formData);
};
@@ -690,9 +685,10 @@ WSF_FILE_CONTROL = (function(_super) {
};
WSF_FILE_CONTROL.prototype.update = function(state) {
if (state.text != null) {
this.state['text'] = state.text;
return this.$el.val(state.text);
if (state.upload_file != null) {
this.progressbar.hide();
this.$el.parent().append($("<p></p>").addClass("form-control-static").text(this.state['file']));
return this.state['upload_file'] = state.upload_file;
}
};

View File

@@ -21,23 +21,19 @@ feature
initialize_controls
local
n0_container: WSF_FORM_ELEMENT_CONTROL [detachable WSF_PENDING_FILE]
n1_container: WSF_FORM_ELEMENT_CONTROL [STRING]
n2_container: WSF_FORM_ELEMENT_CONTROL [STRING]
n3_container: WSF_FORM_ELEMENT_CONTROL [STRING]
n4_container: WSF_FORM_ELEMENT_CONTROL [STRING]
n5_container: WSF_FORM_ELEMENT_CONTROL [STRING]
n6_container: WSF_FORM_ELEMENT_CONTROL [detachable WSF_PENDING_FILE]
n7_container: WSF_FORM_ELEMENT_CONTROL [detachable WSF_PENDING_FILE]
cats_container: WSF_FORM_ELEMENT_CONTROL [LIST [STRING]]
source: INCREASING_PROGRESSSOURCE
do
Precursor
create form.make
form.add_class ("form-horizontal")
--File
create filebox.make
create n0_container.make ("File Upload", filebox)
n0_container.add_validator (create {WSF_FILESIZE_VALIDATOR}.make (100000,"File must be smaller than 100KB"))
form.add_control (n0_container)
--Number 1
create textbox1.make ("1")
create n1_container.make ("Number1", textbox1)
@@ -67,9 +63,24 @@ feature
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Operating Systems", "os"))
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Formal Methods and Functional Programming", "fmfp"))
create cats_container.make ("Categories", cklist)
cats_container.add_validator (create {WSF_MIN_VALIDATOR [LIST[STRING]]}.make (1, "Choose at least one category"))
cats_container.add_validator (create {WSF_MAX_VALIDATOR [LIST[STRING]]}.make (2, "Choose at most two category"))
cats_container.add_validator (create {WSF_MIN_VALIDATOR [LIST [STRING]]}.make (1, "Choose at least one category"))
cats_container.add_validator (create {WSF_MAX_VALIDATOR [LIST [STRING]]}.make (2, "Choose at most two category"))
form.add_control (cats_container)
--File
create filebox.make
filebox.set_upload_function (agent upload_file)
create n6_container.make ("File Upload", filebox)
n6_container.add_validator (create {WSF_FILESIZE_VALIDATOR}.make (10000000, "File must be smaller than 10MB"))
form.add_control (n6_container)
--File
create filebox2.make
filebox2.set_upload_function (agent upload_file)
filebox2.set_change_event (agent do
filebox2.start_upload
end)
create n7_container.make ("Auto Upload", filebox2)
n7_container.add_validator (create {WSF_FILESIZE_VALIDATOR}.make (10000000, "File must be smaller than 10MB"))
form.add_control (n7_container)
--Button 1
create button1.make ("Update")
button1.set_click_event (agent handle_click)
@@ -94,6 +105,16 @@ feature
navbar.set_active (1)
end
upload_file (f: ITERABLE [WSF_UPLOADED_FILE]): detachable String
do
-- Store file on server and return link
across
f as i
loop
Result:=i.item.filename
end
end
handle_click
local
text: STRING
@@ -118,7 +139,7 @@ feature
run_modal
do
start_modal("/","Test Modal", true);
start_modal ("/", "Test Modal", true);
end
process
@@ -131,6 +152,8 @@ feature
filebox: WSF_FILE_CONTROL
filebox2: WSF_FILE_CONTROL
textbox1: WSF_INPUT_CONTROL
textbox2: WSF_INPUT_CONTROL