https://plupload.com/examples/

1<!DOCTYPE html><html dir="ltr" lang="en-US">
2<head>
3	<meta charset="UTF-8" />
4	<!-- Plupload Rules -->
5		<title>Plupload: UI Widget</title>
6	    	<meta name="msvalidate.01" content="CF6A500C2AC11792DD10D5D7A77C685D" />
7    <link href="/favicon.ico" rel="shortcut icon" />
8
9	<link type="text/css" rel="stylesheet" href="https://plupload.com/css/bootstrap.css" media="screen" />
10<link type="text/css" rel="stylesheet" href="https://plupload.com/css/font-awesome.min.css" media="screen" />
11<link type="text/css" rel="stylesheet" href="https://plupload.com/css/my.css" media="screen" />
12<link type="text/css" rel="stylesheet" href="https://plupload.com/css/prettify.css" media="screen" />
13<link type="text/css" rel="stylesheet" href="https://plupload.com/css/shCore.css" media="screen" />
14<link type="text/css" rel="stylesheet" href="https://plupload.com/css/shCoreEclipse.css" media="screen" />
15<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.min.css" media="screen" />
16<link type="text/css" rel="stylesheet" href="https://plupload.com/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" media="screen" />
17
18    <!--[if lte IE 7]>
19   	<link rel="stylesheet" type="text/css" href="https://plupload.com/css/my_ie_lte7.css" />
20    <![endif]-->
21
22	<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300|Bree+Serif" rel="stylesheet" type="text/css">
23	<!--[if IE]>
24	<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
25	<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" type="text/css">
26	<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic" rel="stylesheet" type="text/css">
27	<link href="//fonts.googleapis.com/css?family=Open+Sans:600italic" rel="stylesheet" type="text/css">
28	<link href="//fonts.googleapis.com/css?family=Open+Sans:700italic" rel="stylesheet" type="text/css">
29	<link href="//fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
30	<link href="//fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css">
31	<link href="//fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" type="text/css">
32	<link href="//fonts.googleapis.com/css?family=Bree+Serif:400" rel="stylesheet" type="text/css">
33	<![endif]-->
34
35	
36    <!--[if IE 7]>
37    	<link rel="stylesheet" href="https://plupload.com/css/font-awesome-ie7.min.css">
38    <![endif]-->
39
40    <!--[if lt IE 9]>
41    

41<script src="https://plupload.com/js/html5shiv.js"></script>

41
42    <![endif]-->
43
44	

44<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" charset="UTF-8"></script>

44
45
46	
47    <!-- Google Tag Manager -->
48    

48<script>

48(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
49    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
50    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
51    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
52    })(window,document,'script','dataLayer','

52GTM-KCWCD23

52');

52</script>

52
53    <!-- End Google Tag Manager -->
54</head>
55<body class="examples examples-index">
56    <!-- Google Tag Manager (noscript) -->

56
57    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=

57GTM-KCWCD23

57"
58    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
59    

59<!-- End Google Tag Manager (noscript) -->
60	<header>
61		
62<div id="main-menu" class="navbar navbar-fixed-top">
63	<div class="navbar-inner">
64		<div class="container">
65			<ul class="nav pull-right">
66							<li class="menu-item  ">
67									<a href="/">Home</a>
68								</li>
69							<li class="menu-item active ">
70									<a href="/examples/">Examples</a>
71								</li>
72							<li class="menu-item  ">
73									<a href="/docs/">Documentation</a>
74								</li>
75							<li class="menu-item  ">
76									<a href="/i18n/">Language</a>
77								</li>
78							<li class="menu-item  ">
79									<a href="/download/">Download</a>
80								</li>
81							<li class="menu-item  dropdown">
82									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
83						License						<b class="caret"></b>
84					</a>
85					<ul class="dropdown-menu">
86											<li><a href="/license/agplv3">AGPLv3</a></li>
87											<li><a href="/license/oem">Commercial</a></li>
88										</ul>
89								</li>
90						</ul>
91		</div>
92	</div>
93</div>
94
95
96        <div id="logo">
97            <a href="/" class="fit"> </a>
98        </div>
99
100		<div class="logo container">
101			<div id="plupload">
102				<a class="fit" href="/">
103					<span>2.3.9</span>
104				</a>
105			</div>
106		</div>
107	</header>
108
109
110<section id="content">
111	<div class="container">
112		<div class="page-header pull-left">
113						<h1>UI Widget</h1>
114					</div>
115
116		<div class="clearfix"> </div>
117		
118		
119<div id="themeswitcher" class="pull-right"> </div>

120<script>
121	$(function() {
122		$.fn.themeswitcher && $('#themeswitcher').themeswitcher({cookieName:''});
123	});
124</script>

124
125
126
127<ul class="nav nav-tabs" id="example-tabs">
128	<li class="">
129		<a href="/examples/core">Core API</a>
130	</li>
131	<li class="">
132		<a href="/examples/ui">UI Widget</a>
133	</li>
134	<li class="">
135		<a href="/examples/queue">Queue Widget</a>
136	</li>
137	<li class="">
138		<a href="/examples/runtimes">All Runtimes</a>
139	</li>
140	<li class="">
141		<a href="/examples/events">Events</a>
142	</li>
143</ul>
144<div id="example">
145
146<p>This example shows you how to use the jQuery UI widget use the "Switch theme" drop down to the right to select different jQuery UI themes.</p>
147
148<div id="uploader">
149	<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
150</div>
151

152<script type="text/javascript">
153// Initialize the widget when the DOM is ready
154$(function() {
155	$("#uploader").plupload({
156		// General settings
157		runtimes : 'html5,flash,silverlight,html4',
158		url : "/examples/upload",
159
160		// Maximum file size
161		max_file_size : '2mb',
162
163		chunk_size: '1mb',
164
165		// Resize images on clientside if we can
166		resize : {
167			width : 200, 
168			height : 200, 
169			quality : 90,
170			crop: true // crop to exact dimensions
171		},
172
173		// Specify what files to browse for
174		filters : [
175			{title : "Image files", extensions : "jpg,gif,png"},
176			{title : "Zip files", extensions : "zip,avi"}
177		],
178
179		// Rename files by clicking on their titles
180		rename: true,
181		
182		// Sort files
183		sortable: true,
184
185		// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
186		dragdrop: true,
187
188		// Views to activate
189		views: {
190			list: true,
191			thumbs: true, // Show thumbs
192			active: 'thumbs'
193		},
194
195		// Flash settings
196		flash_swf_url : '/plupload/js/Moxie.swf',
197	
198		// Silverlight settings
199		silverlight_xap_url : '/plupload/js/Moxie.xap'
200	});
201});
202</script>

202
203
204
205</div>
206
207<br />
208
209<div class="accordion-group">
210    <div class="accordion-heading">
211        <a class="accordion-toggle" data-toggle="collapse" href="#source">
212            View Source
213        </a>
214    </div>
215    <div id="source" class="accordion-body collapse">
216        <div class="accordion-inner">
217           	<pre class="php">&lt;div id=&quot;uploader&quot;&gt;
218	&lt;p&gt;Your browser doesn't have Flash, Silverlight or HTML5 support.&lt;/p&gt;
219&lt;/div&gt;
220
221&lt;script type=&quot;text/javascript&quot;&gt;
222// Initialize the widget when the DOM is ready
223$(function() {
224	$(&quot;#uploader&quot;).plupload({
225		// General settings
226		runtimes : 'html5,flash,silverlight,html4',
227		url : &quot;/examples/upload&quot;,
228
229		// Maximum file size
230		max_file_size : '2mb',
231
232		chunk_size: '1mb',
233
234		// Resize images on clientside if we can
235		resize : {
236			width : 200, 
237			height : 200, 
238			quality : 90,
239			crop: true // crop to exact dimensions
240		},
241
242		// Specify what files to browse for
243		filters : [
244			{title : &quot;Image files&quot;, extensions : &quot;jpg,gif,png&quot;},
245			{title : &quot;Zip files&quot;, extensions : &quot;zip,avi&quot;}
246		],
247
248		// Rename files by clicking on their titles
249		rename: true,
250		
251		// Sort files
252		sortable: true,
253
254		// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
255		dragdrop: true,
256
257		// Views to activate
258		views: {
259			list: true,
260			thumbs: true, // Show thumbs
261			active: 'thumbs'
262		},
263
264		// Flash settings
265		flash_swf_url : '/plupload/js/Moxie.swf',
266	
267		// Silverlight settings
268		silverlight_xap_url : '/plupload/js/Moxie.xap'
269	});
270});
271&lt;/script&gt;
272
273</pre>
274        </div>
275    </div>
276</div>
277
278
279	</div>
280</section>
281
282
283<footer>
284	<div class="container">
285        <div id="logo-footer-1">
286        	<a class="fit" href="/"><!-- go home --></a>
287        </div>
288        <div id="copyright">&copy; 2026 <a href="https://about.tiny.cloud/" target="_blank">Tiny</a> | <a href="https://about.tiny.cloud/legal/privacy/" target="_blank">Privacy Policy</a></div>
289    	<div id="tagline">Upload everything and everywhere.</div>
290    </div>
291</footer>
292

293<script type="text/javascript" src="https://plupload.com/js/bootstrap.js" charset="UTF-8"></script>

293

294<script type="text/javascript" src="https://plupload.com/js/shCore.js" charset="UTF-8"></script>

294

295<script type="text/javascript" src="https://plupload.com/js/shBrushPhp.js" charset="UTF-8"></script>

295

296<script type="text/javascript" src="https://plupload.com/js/shBrushJScript.js" charset="UTF-8"></script>

296

297<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" charset="UTF-8"></script>

297

298<script type="text/javascript" src="https://plupload.com/plupload/js/plupload.full.min.js" charset="UTF-8"></script>

298

299<script type="text/javascript" src="https://plupload.com/plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js" charset="UTF-8"></script>

299

300<script type="text/javascript" src="https://plupload.com/js/themeswitcher.js" charset="UTF-8"></script>

300
301
302<a href="https://github.com/moxiecode/plupload" target="_blank">
303  <img style="position: fixed; top: -10px; right: -10px; border: 0; z-index: 9999" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
304</a>
305

306<script type="text/javascript">
307(function($) {
308    var langMap = {
309        'javascript': 'js',
310        'js': 'js',
311        'php': 'php',
312        'html': 'php'
313    };
314
315    $.each(['php', 'javascript', 'html'], function(i, lang) {
316        $('pre.' + lang).attr('class', 'brush: ' + langMap[lang] + '; toolbar: false;');
317    });
318    
319    SyntaxHighlighter.all();
320}(jQuery));
321</script>

321
322

323<script type="text/javascript">
324/* <![CDATA[ */
325var google_conversion_id = 1072579290;
326var google_conversion_label = "Pi4iCNPV314Q2oW5_wM";
327var google_custom_params = window.google_tag_params;
328var google_remarketing_only = true;
329/* ]]> */
330</script>

330

331<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
332</script>

332
333<noscript>
334<div style="display:inline;">
335<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1072579290/?value=1.00&amp;currency_code=USD&amp;label=Pi4iCNPV314Q2oW5_wM&amp;guid=ON&amp;script=0"/>
336</div>
337</noscript>
338

339<script type="text/javascript">
340_linkedin_partner_id = "32005";
341window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
342window._linkedin_data_partner_ids.push(_linkedin_partner_id);
343</script>

343<script type="text/javascript">
344(function(){var s = document.getElementsByTagName("script")[0];
345var b = document.createElement("script");
346b.type = "text/javascript";b.async = true;
347b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
348s.parentNode.insertBefore(b, s);})();
349</script>

349
350<noscript>
351<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=32005&fmt=gif" />
352</noscript>
353
354</body>
355</html>