Custom component to upload image

[Xandros]

Hi, after some test and investigation I deveop a component that hack upload button (using well know technique). The component is not still perfect and is in development. I post it now to share and will send then other post when I fix and improve some.
The goals is create a multiple instantiable component with the follow elements:
- A image space -> show uploaded image at realtime
- A upload button -> send image and reload it from server
- A reset button -> request server to clear image and reload it form server (empty)
- A title
- A error/warning message space near image

"Attach1" is an example of final results.

This is current code (ind evelopment):

isc.ClassFactory.defineClass("AdvancedUploadForm","HStack").addProperties({
	width:"30",defaultLayoutAlign: "left",
	fetchUrl: "",
	uploadUrl: "",
	deleteUrl: "",
	reloadUserPhoto: function(){
		this.uploadPhoto.setSrc(this.fetchUrl+"&rand="+(new Date()).getTime());
		this.uploadPhoto.resetSrc();
		//clearErrorMessage();
	},
	uploadPanelDefaults: {
		_constructor:isc.HLayout,
		width: 120
	},
	uploadPhotoDefaults: {
		_constructor:isc.Img,
    	width:100, height:100, border:"1px solid gray",
    	imageType: "center",
    	backgroundColor: "#262626",
    	autoParent:"uploadPanel", 
	},
	imageControlsDefaults: {
		_constructor:isc.VLayout,
		autoParent:"uploadPanel", 
		height: 50,width: 24
	},
	uploadButtonDefaults : {
		_constructor:isc.HTMLPane,
		autoParent:"imageControls", 
		contents: ""
	},
	deleteButtonDefaults : {
		_constructor:isc.ImgButton,
		autoParent:"imageControls",
		imageType: "center",
	    align: "right",
	    width: "24",
	    height: "24",
	    showRollOver: false,
	    showFocused: false,
	    showDown: false,
	    src: "icons/24/deleteFile.png",
	    prompt: "Elimina foto",
	    actionType: "button",
	    click : function () {
	    	var me = this;
			isc.RPCManager.sendRequest({ 			
				callback: function(){
					//Request photo
					me.creator.reloadUserPhoto();
					// Must clear input form value to admit upload as last one
					document.getElementById("filefield_"+me.creator.getID()).value = "";
				},
				actionURL: this.deleteUrl+"?rand="+(new Date()).getTime()
			});
	    }	
	},
	initWidget : function () {
		this.Super("initWidget", arguments);
		this.addAutoChild("uploadPanel");
		this.addAutoChild("uploadPhoto",{src: this.fetchUrl});
	    this.addAutoChild("imageControls");  
	    this.addAutoChild("uploadButton",{contents:"<div style='position:relative;height:24'>"+
        	"<img src='<s:url value="images/icons/24/upload.png"/>' width='24' height='24' alt=''/>"+	
			"<div style='z-index:9999999;opacity:0;filter:alpha(opacity=0);width:24px;height:24px;overflow:hidden;position:absolute;top:0;left:0;'>"+
			"<form method='post' target='uploadFormIframe' action='" +
			this.uploadUrl +
			"' enctype='multipart/form-data'>"+					
			"<input id='filefield_"+this.getID()+"' name='upload' onchange='submit()'  style='direction:rtl;font-size:0em;width:24px;height:24px;' type='file' name='datafile' size='0' width='0'/>"+
			"</form></div></div>"});
	    this.addAutoChild("deleteButton",{deleteUrl : this.deleteUrl,fetchUrl : this.fetchUrl}); 
	}
});
isc.AdvancedUploadForm.create({
	ID: "uploadUserPhotoForm",
	fetchUrl: "<s:url value='/userAction_getPhoto.action'/>?image.size=NORMAL",
	uploadUrl: "<s:url value="/userAction_uploadPhoto.action"/>",
	deleteUrl: "<s:url value="/userAction_deletePhoto.action"/>",
});

Then I need a multi instance shared I frame to submit form

isc.Canvas.create({
        ID: "uploadFormIframe",
        contents: "<iframe name=\"uploadFormIframe\"></iframe>",
        autoDraw: true,
        visibility: "hidden"
      });

And callback functions loaded into IFrame from response server (I post only the one need to reload image after upload or delete)

function reloadUserPhoto(){
	uploadUserPhotoForm.reloadUserPhoto();
}

Please help me to get better and elegant code and share you opinion and better solutions.
Thanks.

[Xandros]

I make the component better and put it in external file. See attachment.

[Xandros]

Nobody are interested to try or discuss my component?

[sassatokiero]

Hi Xandros,
this is exactly what i'm searching for but... i'm a newby and I need to know what i have to do to test your module,
are you able to write down a short step-to-step tutorial, please?
thanks

[cmoaciopm]

Hi Xandros, I have the same question as sassatokiero. Eager to know how to use your component!!!

[Xandros]

I try to write an example code to use the component.
First include the component JS:

<script language="JavaScript1.2" src="/script/ImageUploadItem.js"></script>

Then create component:

isc.ImageUploadItem.create({
	ID: "uploadUserPhotoForm",
	fetchUrl: "<s:url value='/userAction_getPhoto.action'/>?image.size=NORMAL",
	uploadUrl: "<s:url value="/userAction_uploadPhoto.action"/>",
	deleteUrl: "<s:url value="/userAction_deletePhoto.action"/>",
	uploadImg: "<s:url value="images/icons/24/upload.png"/>",
	errorCallback:"showUserPhotoError",
	padding: 6
});

The paraemters have the follow meaning:
fetchUrl: URL to call to fetch image
deleteUrl: URL to call to remove image
uploadImg: URL to icon to show as upload button (24x24)
errorCallback: name of javascript callback function to call to show error

We need two callback function, one to reload image after upload and one to show errore messages (oversize and type error)

function reloadUserPhoto(){
	uploadUserPhotoForm.reloadUserPhoto();
}
function showUserPhotoError(errorMessage){
	uploadUserPhotoForm.showMessage(errorMessage);
}

Then, the server side must return a call to "reloadUserPhoto" or "showUserPhotoError", for example the follow strings (as UTF-8 text/html):

<script type='text/javascript'>top.reloadUserPhoto();</script>

or

<script type='text/javascript'>top.callbackErrorFunction(error);</script>

If I'm not clear please ask me for more explanations.

[Xandros]

I'd like to know your suggestion or opinion about this component.
Thanks.

[thiru_gangula]

is it stored in folder also

Hi Xandros,
Is your component stores image in folder and database also?
If it works please explain me

[Xandros]

Hi,
the component is client item that call a server side URL and in background (using hidden IFRAME) submit a form with a file, then on server side you can take this byte stream and put on database or file as you prefer (in my applciations actually I use JAVA code to store the file into DB).

[Crider]

Issue with File UPload functionality

Hi

I'm also facing the issue with file upload functionality in smartclient. I've raised the concern. As you have worked for this please suggest. Following is the link for my SC Forum post..

http://forums.smartclient.com/showthread.php?t=8896

Code snippets i've already pasted their..not able to understand the IFRAME implementation..