iframe onloads before the time when file uploads - ajax

Question

I'm trying to upload file on server by submitting the form and return information about file upload status in iframe. The problem is that iframe onloads before the time when file uploads...
Here is my JS:
var resp;
function doAjaxPost()
{
$.ajax({
Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
contentType: "application/x-www-form-urlencoded",
type: "POST",
url: some_uri,
data: some_data,
success: function (response)
{
var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
$("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
$("#photo").submit();
resp = response;
}
} );
function frameCheck(frm)
{
var frmDoc = frm.contentDocument || frm.contentWindow.document;
var field;
if (frmDoc.body.innerHTML && /You successfully uploaded file/.test(frmDoc.body.innerHTML))
{
$('#list').html(resp.substring(resp.indexOf('<span id="st_list"></span>'), resp.indexOf('<span id="fin_list"></span>')));
// Here I replace the part of the current page when file uploaded by placing the <img>-tag with the link on uploaded file.
}
}
Here is my HTML:
<div class="col-md-8" >
<form id="photo" method="POST" action="" target="result" enctype="multipart/form-data" accept-charset="UTF-8">
<input class="noreq input_file" type="file" name="file">
<input class="noreq input_file" style="display:none" type="text" name="name">
</form>
</div>
<iframe class="hidden" id="res" name="result" onload="frameCheck(this)"></iframe>
Here is my upload controller:
#RequestMapping(value = "/uploadmyshowcase", method = RequestMethod.POST)
public #ResponseBody
String uploadFileController(#RequestParam("name") String name,
#RequestParam("file") MultipartFile file,
#RequestParam(value = "table", required = false) String table,
#RequestParam(value = "field", required = false) String field,
#RequestParam(value = "id", required = false) String Id,
Model model) {
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
File dir = new File("D:\\NetBeansProjects\\bar\\src\\main\\webapp\\resources\\rcvdFiles");
if (!dir.exists()) {
dir.mkdirs();
}
String[] ext;
if (file.getOriginalFilename().contains(".")) {
ext = file.getOriginalFilename().toString().split("\\.");
if (!"jpg".equals(ext[1]) && !"jpeg".equals(ext[1])) {
return "Wrong format~" + field;
}
} else {
return "Wrong format~" + field;
}
File serverFile = new File(dir.getAbsolutePath() + File.separator + table + "-" + field + "-" + Id + "." + ext[1]);
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
stream.write(bytes);
stream.close();
String href = "";
switch (field) {
case "enf_photow":
if (new File(dir.getAbsolutePath() + File.separator + table + "-" + field + "-" + Id + "." + ext[1]).exists()) {
href = "/resources/rcvdFiles/" + table + "-" + field + "-" + Id + "." + ext[1];
}
break;
}
return "You successfully uploaded file~" + field + "~" + href + "~" + Id;
} catch (Exception e) {
return "Wrong format~" + field;
}
} else {
return "Wrong format~" + field;
}
As result I see, that frameCheck() is calling before the time when file uploaded on the server. And the IMG that I placing programmatically on page is empty and console says, that Resource not found... What's wrong?
Thank You.
EDIT
I tried to create iframe programmatically, but still I have the same result :(
My modified JS:
$.ajax({
Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
contentType: "application/x-www-form-urlencoded",
type: "POST",
url: uri,
data: ctrls,
success: function (response) {
var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
if(!del)
{
var iframe = document.createElement("iframe");
iframe.name = "result";
iframe.setAttribute('id', "res");
document.body.appendChild(iframe);
$("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
$("#photo").prop("target", "result");
$("#photo").submit();
resp = response;
$("#res").load(function() {
frameCheck($("#res"));
});
}
}
} );
My modified HTML:
<form id="photo" method="POST" action="" enctype="multipart/form-data" accept-charset="UTF-8">
<input class="noreq input_file" type="file" name="file">
<input class="noreq input_file" style="display:none" type="text" name="name">
</form>

Answer 1

The issue is because iframe's onload does not wait for the ajax to be done. That's the reason you are running into that issue. You can alter your code to below get it called after ajax response is returned. Give it a try. This should give you the gist of it.
function doAjaxPost()
{
$.ajax({
Accept: "text / html, application / xhtml + xml, application / xml; q = 0.9, image / webp, * /*;q=0.8",
contentType: "application/x-www-form-urlencoded",
type: "POST",
url: some_uri,
data: some_data,
success: function (response)
{
var recordid = response.substring(response.indexOf('<span id="st_id"></span>') + '<span id="st_id"></span>'.length, response.indexOf('<span id="fin_id"></span>'));
$("#photo").attr("action", "/uploadmyshowcase?table=enmyshowcase&field=enf_photow&id=" + recordid);
$("#photo").submit();
resp = response;
// set and call your iframe onload function here. You can also create your iframe here, if just setting your onload does not work.
$("#res").onload = frameCheck($("#res"));
}
} );
Remove onload from iframe.
<div class="col-md-8" >
<form id="photo" method="POST" action="" target="result" enctype="multipart/form-data" accept-charset="UTF-8">
<input class="noreq input_file" type="file" name="file">
<input class="noreq input_file" style="display:none" type="text" name="name">
</form>
</div>
<iframe class="hidden" id="res" name="result" "></iframe>