I’m converting a Joomla 1.5 component to J2.5 I upload files dynamically. An iframe is filled with a form to do this, the iframe has an inner iframe to set the target of the form. After recieving the JSON answer, I use a function on the onload of the inner iframe to erase the iframe and display the uploaded image (using elements of the parent page). Everything works great on J1.5, but on J2.5 I recieve a joomla.json file to download, and seems like the form is not using the target.
The function to display the form on the outter iframe is:
function showUploadImage(evt) {
if (!document.getElementById("uploadIFrame")) {
return false;
}
var frame = document.getElementById("uploadIFrame");
var doc = frame.contentDocument;
var page;
page = "\
<html> \
<head> \
<link rel='stylesheet' href='<?php echo JRoute::_(JURI::base().'/components/com_tutorial/css/base.css',false); ?>' type='text/css' /> \
<link rel='stylesheet' href='<?php echo JRoute::_(JURI::base().'components/com_tutorial/css/upframe.css',false); ?>' type='text/css' /> \
</head> \
<body>";
page += ' \
<div id="waitimage"></div> \
<form id="fileUploadForm" method="post" enctype="multipart/form-data" action="<?php echo JRoute::_('index.php?option=com_tutorial&view=edittutorial&task=savetutimage&tmpl=json&format=json&tutId='.$this->tutId); ?>" target="uploadTarget"> \
<label class="title" for="images"><?php echo JText::_("UPLOAD IMAGE"); ?></label> \
<div class="separator25"></div> \
<div id="pageimages"> \
<div id="newimgfields"> \
<div class="controw"> \
<label class="title" for="image"><?php echo JText::_('SELECT_FILE'); ?></label><input size="35" id="image" type="file" name="image" /> \
</div> \
<div class="controw"> \
<input type="submit" onclick="document.getElementById(\'waitimage\').innerHTML=\'<div class = "mooloader"></div>\';" value="<?php echo JText::_('UPLOAD_IMAGE'); ?>" /> \
</div> \
</div> \
</div> \
</form> \
<iframe id="uploadTarget" name="uploadTarget" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> \
';
page += "</body></html>";
// now write out the new contents
if (doc == undefined || doc == null)
doc = frame.contentWindow.document;
doc.open();
doc.write(page);
doc.close();
doc.getElementById("uploadTarget").onload = uploadDone;
}
And the function executed on the “onload” is:
function uploadDone() {
var frame = document.getElementById("uploadIFrame");
var doc = frame.contentDocument;
var innerFrame = doc.getElementById("uploadTarget");
var ret = innerFrame.contentDocument.getElementsByTagName("body")[0].innerHTML;
var data = eval("(" + JSON.decode(ret) + ")");
//var data = eval("("+ret+")");
if (data=="0"){
alert("<?php echo JText::_('ERROR_SAVE_IMAGE'); ?>");
}
else if (data=="") {
}
else {
var upImage = new Element('img',{
'class':'tutmainthumb',
'id':'tutThumb',
'src':'components/com_tutorial/helpers/image.php?img='+data
});
upImage.inject('tutImage','top');
$('uploadIFrame').dispose();
}
}
I reprhase this question on: Joomla 2.5 ajax file upload go to that page to check the solution.