Forums

Hi all,

I have been searching the forum for a long time hoping to find a similar issue but not found anything so I decided to ask for help. I will use upload property in my form to enable users upload their article pictures but with a image preview functionality. I found a very handy javascript for this and I am trying to integrate this into chronoforms. my code is below.

Form html

<input type="hidden" name="maxSize" value="9999999999" />
<input type="hidden" name="maxW" value="200" />
<input type="hidden" name="fullPath" value="ajax/images/" />
<input type="hidden" name="relPath" value="../ajax/images/" />
<input type="hidden" name="colorR" value="255" />
<input type="hidden" name="colorG" value="255" />
<input type="hidden" name="colorB" value="255" />
<input type="hidden" name="maxH" value="300" />
<input type="hidden" name="filename" value="filename" />
<p><input type="file" name="filename" onchange="ajaxUpload(this.form,'../ajax/scripts/ajaxupload.php?filename=name&maxSize=9999999999&maxW=200&
fullPath=ajax\images/&
relPath=../ajax/images/&colorR=255&colorG=255&colorB=255&
maxH=300','upload_area','File Uploading Please Wait...<br /><img src=\'../ajax/images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' />','<
img src=\'../ajax/images/error.gif\' width=\'16\' height=\'16\' border=\'0\' />
Error in Upload, check settings and path info in source code.'); return false;" /></p>
 
<div id="right_col">
<div id="upload_area">
images Will Be uploaded here for the demo.<br /><br />
You can direct them to do any thing you want!
					</div>
										
				</div>
				<div class="clear"> </div>
		

  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_1" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

JavaScript

function $m(theVar){
	return document.getElementById(theVar)
}
function remove(theVar){
	var theParent = theVar.parentNode;
	theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	    obj.addEventListener(evType, fn, true)
	if(obj.attachEvent)
	    obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
	if(obj.detachEvent){
		obj.detachEvent('on'+type, fn);
	}else{
		obj.removeEventListener(type, fn, false);
	}
}
function isWebKit(){
	return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
	var detectWebKit = isWebKit();
	form = typeof(form)=="string"?$m(form):form;
	var erro="";
	if(form==null || typeof(form)=="undefined"){
		erro += "The form of 1st parameter does not exists.\n";
	}else if(form.nodeName.toLowerCase()!="form"){
		erro += "The form of 1st parameter its not a form.\n";
	}
	if($m(id_element)==null){
		erro += "The element of 3rd parameter does not exists.\n";
	}
	if(erro.length>0){
		alert("Error in call ajaxUpload:\n" + erro);
		return;
	}
	var iframe = document.createElement("iframe");
	iframe.setAttribute("id","ajax-temp");
	iframe.setAttribute("name","ajax-temp");
	iframe.setAttribute("width","0");
	iframe.setAttribute("height","0");
	iframe.setAttribute("border","0");
	iframe.setAttribute("style","width: 0; height: 0; border: none;");
	form.parentNode.appendChild(iframe);
	window.frames['ajax-temp'].name="ajax-temp";
	var doUpload = function(){
		removeEvent($m('ajax-temp'),"load", doUpload);
		var cross = "javascript: ";
		cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
		$m(id_element).innerHTML = html_error_http;
		$m('ajax-temp').src = cross;
		if(detectWebKit){
        	remove($m('ajax-temp'));
        }else{
        	setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
    }
	addEvent($m('ajax-temp'),"load", doUpload);
	form.setAttribute("target","ajax-temp");
	form.setAttribute("action",url_action);
	form.setAttribute("method","post");
	form.setAttribute("enctype","multipart/form-data");
	form.setAttribute("encoding","multipart/form-data");
	if(html_show_loading.length > 0){
		$m(id_element).innerHTML = html_show_loading;
	}
	form.submit();
}

I also attached the whole script which is already open source.anyway, When I pick up an image file from my local I get an error "PERMISSION DENIED [JPG]" and when I click on submit I get the same error. Is this because of the file permissions or something else. I tried a lot of configurations but not succeeded. I need help on that, thanks.

I'm bumping this since I have the exact same problem, trying to get a image to preview before uploading.

To make matters worse I have no knowledge of PHP, just some Java and SQL experience so I can read what's going on most of the time. Except in the case of the above code🙂

Any hints on how to advance with this issue?

Thanks in advance!

Hi Draw,

I don't remember seeing this thread before. I took a look at the code and I'm pretty certain that it would be possible to get it working with ChronoForms - but, based on a quick look, I would need to allow a few hours to be sure to get it all together. There would need to be quite a lot of tweaking to get it to work with ChronoForms and Joomla!

And it isn't actually showing a preview before upload - I don't know how you'd do that. It's uploading the file in the background then using JavaScript to display it in the page in an 'Ajax-like' way.

Bob

Thanks for the reply Greyhead.
Clearly it will be too difficult for me to implement so I will focus my efforts elsewhere.

Love the components and the excellent support!