Note that there are some explanatory texts on larger screens.

plurals
  1. POJoomla 2.5 upload file dynamically
    primarykey
    data
    text
    <p>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 <code>onload</code> 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 <code>joomla.json</code> file to download, and seems like the form is not using the target.</p> <p>The function to display the form on the outter iframe is:</p> <pre><code>function showUploadImage(evt) { if (!document.getElementById("uploadIFrame")) { return false; } var frame = document.getElementById("uploadIFrame"); var doc = frame.contentDocument; var page; page = "\ &lt;html&gt; \ &lt;head&gt; \ &lt;link rel='stylesheet' href='&lt;?php echo JRoute::_(JURI::base().'/components/com_tutorial/css/base.css',false); ?&gt;' type='text/css' /&gt; \ &lt;link rel='stylesheet' href='&lt;?php echo JRoute::_(JURI::base().'components/com_tutorial/css/upframe.css',false); ?&gt;' type='text/css' /&gt; \ &lt;/head&gt; \ &lt;body&gt;"; page += ' \ &lt;div id="waitimage"&gt;&lt;/div&gt; \ &lt;form id="fileUploadForm" method="post" enctype="multipart/form-data" action="&lt;?php echo JRoute::_('index.php?option=com_tutorial&amp;view=edittutorial&amp;task=savetutimage&amp;tmpl=json&amp;format=json&amp;tutId='.$this-&gt;tutId); ?&gt;" target="uploadTarget"&gt; \ &lt;label class="title" for="images"&gt;&lt;?php echo JText::_("UPLOAD IMAGE"); ?&gt;&lt;/label&gt; \ &lt;div class="separator25"&gt;&lt;/div&gt; \ &lt;div id="pageimages"&gt; \ &lt;div id="newimgfields"&gt; \ &lt;div class="controw"&gt; \ &lt;label class="title" for="image"&gt;&lt;?php echo JText::_('SELECT_FILE'); ?&gt;&lt;/label&gt;&lt;input size="35" id="image" type="file" name="image" /&gt; \ &lt;/div&gt; \ &lt;div class="controw"&gt; \ &lt;input type="submit" onclick="document.getElementById(\'waitimage\').innerHTML=\'&lt;div class = &amp;quot;mooloader&amp;quot;&gt;&lt;/div&gt;\';" value="&lt;?php echo JText::_('UPLOAD_IMAGE'); ?&gt;" /&gt; \ &lt;/div&gt; \ &lt;/div&gt; \ &lt;/div&gt; \ &lt;/form&gt; \ &lt;iframe id="uploadTarget" name="uploadTarget" src="" style="width:0;height:0;border:0px solid #fff;"&gt;&lt;/iframe&gt; \ '; page += "&lt;/body&gt;&lt;/html&gt;"; // 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; } </code></pre> <p>And the function executed on the "onload" is:</p> <pre><code>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("&lt;?php echo JText::_('ERROR_SAVE_IMAGE'); ?&gt;"); } 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(); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload