File Upload IAjax

Develop and Deploy Cross-Browser Web Apps .

File Upload IAjax

Postby Martin » Wed Dec 14, 2016 12:05 am

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();
}
},
Martin
 
Posts: 14
Joined: Wed Oct 26, 2016 2:43 pm

Re: File Upload IAjax

Postby support » Fri Dec 16, 2016 5:07 am

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);
}
}
});
   
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am

Re: File Upload IAjax

Postby Martin » Sat Dec 17, 2016 6:33 pm

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(){
// [[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(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);
}
}
});
Martin
 
Posts: 14
Joined: Wed Oct 26, 2016 2:43 pm

Re: File Upload IAjax

Postby support » Mon Dec 19, 2016 2:56 am

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.
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am

Re: File Upload IAjax

Postby Martin » Tue Dec 20, 2016 12:13 pm

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.

readjsonfile.jpg
readjsonfile.jpg (80.99 KiB) Viewed 4233 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>
Martin
 
Posts: 14
Joined: Wed Oct 26, 2016 2:43 pm

Re: File Upload IAjax

Postby Martin » Thu Dec 22, 2016 10:31 am

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>
Martin
 
Posts: 14
Joined: Wed Oct 26, 2016 2:43 pm

Re: File Upload IAjax

Postby Martin » Sat Dec 24, 2016 2:19 pm

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.
Martin
 
Posts: 14
Joined: Wed Oct 26, 2016 2:43 pm

Re: File Upload IAjax

Postby Martin » Sat Dec 24, 2016 5:37 pm

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.
Martin
 
Posts: 14
Joined: Wed Oct 26, 2016 2:43 pm


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests

cron