I am unable to get IAjax to upload a file. I have tried regular Ajax with the File Combo box but that doesnt work for web application. I'm using the IAjax example from the Cookbook in chapter 4.5.2 page 109. I have over 20,000 lines of code so I'm only posting the sections that are specific to this issue. Basically, the "if(file)" condition is always false.
host.xui_ui_group1517.append(
xui.create("xui.UI.Label")
.setHost(host,"xui_ui_label_button_select_project")
.setLeft(20)
.setTop(130)
.setWidth(150)
.setZIndex(1002)
.setCaption("STEP 1: Select Project")
.setHAlign("center")
.setVAlign("middle")
.onClick("_project_file_popfileselector")
.setCustomStyle({
"KEY" : {
"background-color" : "#D9D9D9",
"font-weight" : "bold",
"border" : "solid #696969 1px"
}
}
)
);
host.xui_ui_group1517.append(
xui.create("xui.UI.Label")
.setHost(host,"xui_ui_label_button_open_project")
.setLeft(20)
.setTop(190)
.setWidth(150)
.setCaption("STEP 2: Open Project")
.setHAlign("center")
.setVAlign("middle")
.onClick("_open_project_file")
.setCustomStyle({
"KEY" : {
"background-color" : "#D9D9D9",
"font-weight" : "bold",
"border" : "solid #696969 1px"
}
}
)
);
host.xui_ui_group1517.append(
xui.create("xui.UI.ComboInput")
.setHost(host,"upload")
.setDirtyMark(false)
.setLeft(20)
.setTop(152)
.setWidth(750)
.setType("upload")
.setValue("Select a Project with a *.cwp file extension ...")
);
_open_project_file:function(profile, e, src, value){
xui.message("open project file")
var file = this.upload.getUploadObj();
if(file){
xui.IAjax('../request.php',{key:'upload',para:{},file:file},function(rsp){
xui.alert(rsp.data.message);
},function(errMsg){
xui.alert(errMsg)
}).start();
}
},
File Upload IAjax
Re: File Upload IAjax
Does the following code work?
Class('App', 'xui.Module',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};
append(
xui.create("xui.UI.ComboInput")
.setHost(host,"xui_ui_comboinput2")
.setLeft(200)
.setTop(60)
.setWidth(380)
.setLabelSize(100)
.setType("file")
);
append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton1")
.setLeft(310)
.setTop(120)
.setWidth(260)
.setHeight(22)
.setHtml("Button")
.onClick("_xui_ui_htmlbutton1_onclick")
);
return children;
// ]]Code created by CrossUI RAD Studio
},
_xui_ui_htmlbutton1_onclick:function (profile, e, value){
var ns = this, uictrl = profile.boxing();
var file = ns.xui_ui_comboinput2.getUploadObj();
console.log(file);
alert(file);
}
}
});Re: File Upload IAjax
Hi,
That code did not work either. I am including additional details and files to help diagnose the problem. I changed the labels in your example to Step1,Step2, and Step3 so you can see that the goal is to read a local json text file and populate the file contents into a text box. If I can do that, then parsing out the json elements will be pretty easy. Right now, it doesnt read the file. I get the xui.message(file) showing [object HTMLInputElement] but not the text.
I've attached my very small json test text file. Below is the modified code.
Thanks in advance,
Martin
Class('App', 'xui.Module',{
Instance:{
iniComponents : function(){
// [
That code did not work either. I am including additional details and files to help diagnose the problem. I changed the labels in your example to Step1,Step2, and Step3 so you can see that the goal is to read a local json text file and populate the file contents into a text box. If I can do that, then parsing out the json elements will be pretty easy. Right now, it doesnt read the file. I get the xui.message(file) showing [object HTMLInputElement] but not the text.
I've attached my very small json test text file. Below is the modified code.
Thanks in advance,
Martin
Class('App', 'xui.Module',{
Instance:{
iniComponents : function(){
// [
Code: Select all
, append=function(child){children.push(child.get(0));};
append(
xui.create("xui.UI.ComboInput")
.setHost(host,"xui_ui_comboinput2")
.setLeft(50)
.setTop(90)
.setWidth(380)
.setLabelSize(null)
.setType("file")
);
append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton1")
.setLeft(450)
.setTop(90)
.setWidth(100)
.setHeight(22)
.setHtml("Read File")
.onClick("_xui_ui_htmlbutton1_onclick")
);
append(
xui.create("xui.UI.Input")
.setHost(host,"xui_ui_input1")
.setLeft(50)
.setTop(160)
.setWidth(480)
.setHeight(210)
.setLabelSize(null)
.setMultiLines(true)
);
append(
xui.create("xui.UI.Label")
.setHost(host,"xui_ui_label2")
.setLeft(450)
.setTop(70)
.setCaption("STEP 2: Read File")
.setVAlign("middle")
.setHAlign("left")
);
append(
xui.create("xui.UI.Label")
.setHost(host,"xui_ui_label3")
.setLeft(50)
.setTop(140)
.setWidth(380)
.setCaption("STEP 3: View JSON File")
.setHAlign("left")
.setVAlign("middle")
);
append(
xui.create("xui.UI.Label")
.setHost(host,"xui_ui_label4")
.setLeft(50)
.setTop(70)
.setWidth(380)
.setCaption("STEP 1: Select JSON File")
.setHAlign("left")
.setVAlign("middle")
);
return children;
// ]]Code created by CrossUI RAD Studio
},
_xui_ui_htmlbutton1_onclick:function (profile, e, value){
var ns = this, uictrl = profile.boxing();
var file = ns.xui_ui_comboinput2.getUploadObj();
//console.log(file);
xui.message(file);
xui.xui_ui_input1.setValue(JSON.stringify(file));
alert(file);
}
}
});Re: File Upload IAjax
The sand box of browser cant allow you to read the local file's content. You have to read the content in the server side.
If alert shows ' [object HTMLInputElement]', that represents you can upload the file already.
If alert shows ' [object HTMLInputElement]', that represents you can upload the file already.
Re: File Upload IAjax
Thank you. That makes perfect sense. The sandbox is there to protect both the client and server, so I see why that would not work.
I went and did a lot of research to see alternative approaches. Native html5 and javascript do work. I wrote some code that works perfectly. I need help making this code work in CrossUI DIV. Is this possible?
Below are three assets: (1) screen shot showing the code working on a web server with successful parse on client local disk, (2) test json file, and (3) the html code.
////////////////////////////////////////////////////////////////////////////////////////////
Test JSON File: "testjsonfile.txt"
////////////////////////////////////////////////////////////////////////////////////////////
{
"projectName": "User Project",
"projectNotes": "The quick brown fox jumps over the lazy dog.",
"apples": 5,
"oranges": 3,
"bananas": 4
}
////////////////////////////////////////////////////////////////////////////////////////////
Working Native Code: "readjsonfile.html"
////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<body>
<section id="wrapper">
<style>
#holder { border: 4px dashed #00BFFF; width: 150px; height: 150px; margin: 20px start;}
#holder.hover { border: 4px dashed #85CD4D; }
</style>
<article>
<div id="holder"></div>
<p id="status">File API & FileReader API not supported</p>
<form name = "jsonform">
<textarea name="raw_json_text" class="input" rows="10" cols="100">Some text here</textarea>
JSON File
<textarea name="projectName" class="input" rows="1" cols="100">Some text here</textarea>
Project Name
<textarea name="projectNotes" class="input" rows="1" cols="100">Some text here</textarea>
Project Notes
<textarea name="apples" class="input" rows="1" cols="100">Some text here</textarea>
Apples
<textarea name="oranges" class="input" rows="1" cols="100">Some text here</textarea>
Oranges
<textarea name="bananas" class="input" rows="1" cols="100">Some text here</textarea>
Bananas
<textarea name="total_fruit" class="input" rows="1" cols="100">Some text here</textarea>
Total Fruit
</form>
</article>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'Drag and Drop a JSON file into the blue square.';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
document.forms['jsonform'].raw_json_text.value = event.target.result;
var json_object = JSON.parse(event.target.result);
document.forms['jsonform'].projectName.value = json_object.projectName;
document.forms['jsonform'].projectNotes.value = json_object.projectNotes;
document.forms['jsonform'].apples.value = json_object.apples;
document.forms['jsonform'].oranges.value = json_object.oranges;
document.forms['jsonform'].bananas.value = json_object.bananas;
var apples = parseFloat(document.forms['jsonform'].apples.value);
var oranges = parseFloat(document.forms['jsonform'].oranges.value);
var bananas = parseFloat(document.forms['jsonform'].bananas.value);
var total_fruit = apples + oranges + bananas;
document.forms['jsonform'].total_fruit.value = total_fruit;
};
console.log(file);
reader.readAsText(file);
//reader.readAsDataURL(file);
return false;
};
</script>
</section>
</body>
</html>
I went and did a lot of research to see alternative approaches. Native html5 and javascript do work. I wrote some code that works perfectly. I need help making this code work in CrossUI DIV. Is this possible?
Below are three assets: (1) screen shot showing the code working on a web server with successful parse on client local disk, (2) test json file, and (3) the html code.
- readjsonfile.jpg (80.99 KiB) Viewed 18881 times
Test JSON File: "testjsonfile.txt"
////////////////////////////////////////////////////////////////////////////////////////////
{
"projectName": "User Project",
"projectNotes": "The quick brown fox jumps over the lazy dog.",
"apples": 5,
"oranges": 3,
"bananas": 4
}
////////////////////////////////////////////////////////////////////////////////////////////
Working Native Code: "readjsonfile.html"
////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<body>
<section id="wrapper">
<style>
#holder { border: 4px dashed #00BFFF; width: 150px; height: 150px; margin: 20px start;}
#holder.hover { border: 4px dashed #85CD4D; }
</style>
<article>
<div id="holder"></div>
<p id="status">File API & FileReader API not supported</p>
<form name = "jsonform">
<textarea name="raw_json_text" class="input" rows="10" cols="100">Some text here</textarea>
JSON File
<textarea name="projectName" class="input" rows="1" cols="100">Some text here</textarea>
Project Name
<textarea name="projectNotes" class="input" rows="1" cols="100">Some text here</textarea>
Project Notes
<textarea name="apples" class="input" rows="1" cols="100">Some text here</textarea>
Apples
<textarea name="oranges" class="input" rows="1" cols="100">Some text here</textarea>
Oranges
<textarea name="bananas" class="input" rows="1" cols="100">Some text here</textarea>
Bananas
<textarea name="total_fruit" class="input" rows="1" cols="100">Some text here</textarea>
Total Fruit
</form>
</article>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'Drag and Drop a JSON file into the blue square.';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
document.forms['jsonform'].raw_json_text.value = event.target.result;
var json_object = JSON.parse(event.target.result);
document.forms['jsonform'].projectName.value = json_object.projectName;
document.forms['jsonform'].projectNotes.value = json_object.projectNotes;
document.forms['jsonform'].apples.value = json_object.apples;
document.forms['jsonform'].oranges.value = json_object.oranges;
document.forms['jsonform'].bananas.value = json_object.bananas;
var apples = parseFloat(document.forms['jsonform'].apples.value);
var oranges = parseFloat(document.forms['jsonform'].oranges.value);
var bananas = parseFloat(document.forms['jsonform'].bananas.value);
var total_fruit = apples + oranges + bananas;
document.forms['jsonform'].total_fruit.value = total_fruit;
};
console.log(file);
reader.readAsText(file);
//reader.readAsDataURL(file);
return false;
};
</script>
</section>
</body>
</html>
Re: File Upload IAjax
Hi, I'm still unable to incorporate the working HTML code into CrossUI. I've added a DIV into my CrossUI project, added a DOM ID but seem to get stuck the moment I try to create a document based upon 'getElementById'. I would need that in order to create event handlers. The IDE doesnt show drag events so that also wasnt an option. Do you have any thoughts on how to incorporate this code?
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'Drag and Drop a JSON file into the blue square.';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
document.forms['jsonform'].raw_json_text.value = event.target.result;
var json_object = JSON.parse(event.target.result);
document.forms['jsonform'].projectName.value = json_object.projectName;
document.forms['jsonform'].projectNotes.value = json_object.projectNotes;
};
console.log(file);
reader.readAsText(file);
return false;
};
</script>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'Drag and Drop a JSON file into the blue square.';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
document.forms['jsonform'].raw_json_text.value = event.target.result;
var json_object = JSON.parse(event.target.result);
document.forms['jsonform'].projectName.value = json_object.projectName;
document.forms['jsonform'].projectNotes.value = json_object.projectNotes;
};
console.log(file);
reader.readAsText(file);
return false;
};
</script>
Re: File Upload IAjax
I have the HTML code loading inside xui.UI.Div named "div_project_file" with a DOM ID of "DivProjectFile" using .setIframeAutoLoad("./readjsonfileminimum.html").
That does allow drag-and-drop local files without the need to upload to a server thus getting around the sandbox issue.
I am able to do the following types of 'tests' against that iFrame.
var iframe = document.getElementById("DivProjectFile");
xui.message("TEST 1: iframe " + iframe);
//THIS TEST WORKS and displays the inner HTML in full
var innerHTML = document.getElementById("DivProjectFile").innerHTML;
xui.message("TEST 2: innerHTML " + innerHTML);
I am not able to query the tags in any way. None of these techniques work:
var tagnameall = document.getElementById("DivProjectFile").getElementsByTagName("*")[0].innerHTML;
xui.message("TEST 6: tagnameall " + tagnameall);
var taglength = document.getElementById("DivProjectFile").getElementsByTagName("*").length;
xui.message("TEST 7: taglength " + taglength);
var fld = contdoc.forms[0];//.elements['greeting'];
xui.message("TEST 8: fld " + fld);
var doc2 = iframe.document;
xui.message("TEST 9: " + doc2);
//var form = doc.getElementById("jsonform");
//xui.message("test 5" + form);
//var fld = doc.forms['jsonform'].elements['raw_json_text'];
//xui.message("test 6 + fld);
var iframe = document.getElementById("DivProjectFile").contentWindow.document.getElementById("raw_json_text");
xui.message("TEST 10: " + iframe);
var ulObj = innerDoc.getElementById("raw_json_text");
xui.message("TEST 11: " + ulObj);
I am not able to access any of the elements and that is where I am stuck. I need to access the elements so that I can assign them to variables within the main CrossUI SPA. Since both the SPA and iFrame HTML are in the same Domain and same server, this shouldnt be a security issue but I am stuck.
I'm looking for a simple way to grab the tags now that I have the iFrame.
Please help.
That does allow drag-and-drop local files without the need to upload to a server thus getting around the sandbox issue.
I am able to do the following types of 'tests' against that iFrame.
var iframe = document.getElementById("DivProjectFile");
xui.message("TEST 1: iframe " + iframe);
//THIS TEST WORKS and displays the inner HTML in full
var innerHTML = document.getElementById("DivProjectFile").innerHTML;
xui.message("TEST 2: innerHTML " + innerHTML);
I am not able to query the tags in any way. None of these techniques work:
var tagnameall = document.getElementById("DivProjectFile").getElementsByTagName("*")[0].innerHTML;
xui.message("TEST 6: tagnameall " + tagnameall);
var taglength = document.getElementById("DivProjectFile").getElementsByTagName("*").length;
xui.message("TEST 7: taglength " + taglength);
var fld = contdoc.forms[0];//.elements['greeting'];
xui.message("TEST 8: fld " + fld);
var doc2 = iframe.document;
xui.message("TEST 9: " + doc2);
//var form = doc.getElementById("jsonform");
//xui.message("test 5" + form);
//var fld = doc.forms['jsonform'].elements['raw_json_text'];
//xui.message("test 6 + fld);
var iframe = document.getElementById("DivProjectFile").contentWindow.document.getElementById("raw_json_text");
xui.message("TEST 10: " + iframe);
var ulObj = innerDoc.getElementById("raw_json_text");
xui.message("TEST 11: " + ulObj);
I am not able to access any of the elements and that is where I am stuck. I need to access the elements so that I can assign them to variables within the main CrossUI SPA. Since both the SPA and iFrame HTML are in the same Domain and same server, this shouldnt be a security issue but I am stuck.
I'm looking for a simple way to grab the tags now that I have the iFrame.
Please help.
Re: File Upload IAjax
I know this thread is running very long. I think what is happening is this..... My intention is to get this working and then post it as a code snap for others and then we can close this thread. I think what is happening is the SPA parent iFrame is creating a mid level iFrame based on src. This is why I am unable to get to the Tags. I think I can set a custom iFrame name for this second iFrame so that a getElementbyId used to fetch the Tags. The secondary iFrame gets an automatic name currently that looks sort of like id="biframe_29849238748934..... " I can see this name assigned by chunking through innerHTML.substring(10,200) of the parent iFrame. I really could use some support help.