I want to upload files through a component that I'm developing on Joomla 2.5, I need to support not HTML5 browsers without flash. On Joomla 1.5 I successfully used this method , but on J2.5 after upload the file, when the json response is returned, instead of upload my page, it just shows the download dialog for joomla.json file. How can I successfully recieve the json response on the inner iframe?
Thanks!
Edit: this is the code I'm using:
showUploadImage is executed after the page is loaded, but element uploadIFrame is not always there (when upload file isn't needed). Upload done is supposed to be executed when the response with the file-name is recieved, but with the error that I'm trying to fix, this code is never executed, instead a dialog to download joomla.json is displayed
function showUploadImage(evt) {
if (!document.getElementById("uploadIFrame")) {
return false;
}
var frame = document.getElementById("uploadIFrame");
var doc = frame.contentDocument;
page = "\
<html> \
<head> \
<link rel='stylesheet' href='<?php echo JRoute::_('components/com_tutorial/css/base.css',false); ?>' type='text/css' /> \
<link rel='stylesheet' href='<?php echo JRoute::_('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=editchapter&task=savechapimage&format=json&tutId='.$this->tutId.'&chapterId='.$this->chapterId); ?>" 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> \
<iframe id="uploadTarget" name="uploadTarget" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> \
</form> \
';
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;
}
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("("+ret+")");
alert(data);
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();
}
}
Solved. Turns out that the response was being recieved as "Contet-type: application/json", and everything worked fine when it was "Content-Type: text/html; charset=utf-8". So the error wasn't on the javascript, but in the controller. to fix it just add:
where the echo is the json message that is being sent back to the view.