app:upload
  • Required Attributes (0)
  • Optional Attributes (3)
  • Examples (1)
  • Source code
Name Type Description Default value
There are no required attributes
Back to menuExample: Simple Example

You can use upload to upload a file along with other fields to be processed by a service <app:upload>.

<app:upload action="-/fileupload" maxsize="3145728" on="l:save.picture.request then submit" 
	service="save.picture.request" id="picture_upload">

	<html:input type="file" fieldset="my_profile" name="profile_photo" id="profile_photo"></html:input>
	<html:input type="text" fieldset="my_profile" name="profile_name" id="profile_name"></html:input>
	<html:button  id="profile_button" fieldset="my_profile"
		on="click then l:save.account.request">
		Save my changes
	</html:button>
</app:upload>
  1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 
 23 Appcelerator.Widget.Upload =
 24 {
 25 	getName: function()
 26 	{
 27 		return 'appcelerator upload';
 28 	},
 29 	getDescription: function()
 30 	{
 31 		return 'upload widget';
 32 	},
 33 	getVersion: function()
 34 	{
 35 		return 1.0;
 36 	},
 37 	getSpecVersion: function()
 38 	{
 39 		return 1.0;
 40 	},
 41 	getAuthor: function()
 42 	{
 43 		return 'Jeff Haynie';
 44 	},
 45 	getModuleURL: function ()
 46 	{
 47 		return 'http://www.appcelerator.org';
 48 	},
 49 	isWidget: function ()
 50 	{
 51 		return true;
 52 	},
 53 	getWidgetName: function()
 54 	{
 55 		return 'app:upload';
 56 	},
 57 	getAttributes: function()
 58 	{
 59         var T = Appcelerator.Types;        
 60         return [{
 61             name: 'on',
 62             optional: true,
 63 			type: T.onExpr
 64         }, {
 65             name: 'maxsize',
 66             optional: true,
 67 			type: T.naturalNumber,
 68 			description: 'Maximum file size (in bytes?) that can be uploaded'
 69         }, {
 70             name: 'service',
 71             optional: true,
 72 			type: T.messageSend,
 73 			description: 'Name of the service that should be notified when the upload is complete'
 74         }];
 75     },
 76 	dontParseOnAttributes: function()
 77 	{
 78 		return true;
 79 	},
 80 	execute: function(id,parameterMap,data,scope)
 81 	{
 82 		Appcelerator.Widget.Template.fetch(id,parameterMap['src'],parameterMap['args']);
 83 	},
 84 	compileWidget: function(params)
 85 	{
 86 		var id = params['id'];
 87 		
 88 		// make sure form elements have a name attribute as they won't be included
 89 		// in the submit if they don't (web1.0 stuff)
 90 		var e = Form.Methods.getElements(id+'_form');
 91 		if (e && e.length > 0)
 92 		{
 93 			for (var c=0, len=e.length; c<len; c++)
 94 			{
 95 				var t = e[c];
 96 				var name = t.getAttribute('name');
 97 				if (!name)
 98 				{
 99 					t.setAttribute('name', t.id);
100 				}
101 			}
102 		}
103 		
104 		var upload = Appcelerator.ServerConfig['upload'];
105 		$(id+'_form').action = upload.value;
106 	},
107 	buildWidget: function(element,parameters,state)
108 	{
109 		var data = Appcelerator.Compiler.getHtml(element,true);
110 		var targetid = element.id+'_target';
111 		var type = parameters['service'];
112 		var on = parameters['on'];
113 		var onstr = on ? ('on="'+on+'"') : '';
114 		var maxsize = parameters['maxsize'];
115 
116 		if (type && type.indexOf(":")>0)
117 		{			
118 			type = type.split(":")[1];
119 		}
120 				
121 		var html = '<form method="POST" id="'+element.id+'_form" enctype="multipart/form-data" target="'+targetid+'" '+onstr+'>';
122 		if (maxsize)
123 		{
124 			html+='<input type="hidden" name="MAX_FILE_SIZE" value="'+maxsize+'"/>';
125 		}
126 		html+="<input type='hidden' name='instanceid' value='"+Appcelerator.instanceid+"'/>";
127 		html+="<input type='hidden' name='type' value='"+type+"'/>";
128 		html+="<input type='hidden' name='callback' value='r:appcelerator.ping'/>";
129 		html+=data;
130 		html+='</form>';
131 		
132 		// put iframe as child of body so position absolute won't be relative in case parent is relative
133 		new Insertion.Bottom(document.body,'<iframe name="'+targetid+'" id="'+targetid+'" width="1" height="1" src="about:blank" style="position:absolute;top:-400px;left:-400px;width:1px;height:1px;"></iframe>');
134 
135 		return {
136 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
137 			'presentation' : html,
138 			'compile' : true,
139 			'wire':true
140 		};
141 	}
142 };
143 
144 Appcelerator.Widget.register('app:upload',Appcelerator.Widget.Upload);
145