dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
212 lines (190 loc) • 5.86 kB
HTML
<html lang="en">
<head>
<title>Test dojox.form.Uploader Programmatic</title>
<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/Common.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/form/Common.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/Dialog.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/form/Button.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/layout/TabContainer.css" rel="stylesheet" />
<link href="../../../dijit/themes/claro/Dialog.css" rel="stylesheet" />
<link href="../resources/UploaderFileList.css" rel="stylesheet" />
<style>
@import "../../../dijit/tests/css/dijitTests.css";
html, body{
font-family:sans-serif;
}
.browseButton{
width:300px;
font-weight:bold;
margin:10px 0 2px 0;
}
.dijitTabPane{
padding:20px;
}
form{
width:315px;
margin-right:10px;
}
fieldset{
text-align:right;
}
input[type=text]{
width:140px;
}
.dijitButton{
margin-top:15px;
}
.dojoxUploaderFileList{
text-align:left;
margin-top:10px;
}
.pageTable{
width:100%;
}
.pageTable td{
vertical-align:top;
}
#colForm{
width:330px;
}
#colImages{
padding-top:7px;
}
.thumb{
border:1px solid #ccc;
padding:5px;
width:123px;
background:#eee;
float:left;
margin:0 5px 5px 0;
}
.thumbbk{
background:#fff;
display:block;
}
.thumb img{
border:1px solid #ccc;
width:120px;
}
.form, .html5, .iframe, .flash{
display:none;
}
.Form .form, .HTML5 .html5, .IFrame .iframe, .Flash .flash{
display:block;
}
#dialog p{
width:310px;
}
.claro .attachButton{
width:350px;
height:60px;
border:0;
}
.claro .attachButton .dijitButton .dijitButtonNode{
background-color:#ffffff;
background-image:url(images/attach.png);
background-position:left top;
background-repeat:no-repeat;
height:56px;
border:0;
-moz-box-shadow:0 0 0;
-webkit-box-shadow:0 0 0;
}
.claro .attachButton .dijitButtonHover .dijitButtonNode{
background-position:0px -60px;
}
code{
font-family:monospace;
white-space:nowrap;
}
</style>
<script>
djConfig = {
async:1,
isDebug:true
}
</script>
<script src="../../../dojo/dojo.js"></script>
</head>
<body class="claro">
<h1>Test dojox.form.Uploader Programmatic</h1>
<div id="parent"></div>
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<input class="browseButton" name="uploadedfile" multiple="false" type="file" dojoType="dojox.form.Uploader" uploadOnSelect="true" label="Upload via Markup" isDebug="true" id="uploader">
</form>
<form method="post" action="UploadFile.php" id="parent" enctype="multipart/form-data" ></form>
<form method="post" action="UploadFile.php" id="myForm2" enctype="multipart/form-data" >
<fieldset>
<legend>Form Post Test</legend>
<input class="browseButton" name="uploadedfile" multiple="true" type="file" dojoType="dojox.form.Uploader" label="Select Some Files" isDebug="true" id="uploader2">
<input type="submit" label="Submit" dojoType="dijit.form.Button" />
<div id="files" dojoType="dojox.form.uploader.FileList" uploaderId="uploader2"></div>
</fieldset>
</form>
<div id="skp"></div>
<div id="colImages"></div>
<script>
require(['dojo', 'dojo/parser', 'dijit/form/Button', 'dijit/Dialog', 'dojox/form/Uploader', 'dojox/form/uploader/FileList', 'dojox/form/uploader/plugins/Flash'],
function(dojo, parser, Button, Dialog, Uploader, FileList, uFlash){
console.log('ready')
//parser.parse();
makeSKP = function(){
var div = dojo.create('div',{innerHTML:'<p>This dialog will not upload. Only testing that it parses correctly.</p>'});
myUploadDialog = new Dialog({
title: "Upload Video",
style: "width: 400px;height:300px;",
content: div
});
myUploadDialog.show();
//
// IMPORTANT NOTE!
// When using the Uploader programmatically, you cannot use the ref
// from the require() - you must use the global. In other words:
//
// require(['dojox/form/Uploader'], function(Uploader){
// myUploader = Uploader(...);
// })
// ... will NOT work!!
// You must use:
// require(['dojox/form/Uploader'], function(Uploader){
// myUploader = new dojox.form.Uploader(...);
// })
myUploader = new dojox.form.Uploader({
label: 'Prog Browse',
url:'abc.php',
id:"programmatic",
multiple: true
});
div.appendChild(myUploader.domNode);
myUploader.startup();
var b = new Button({label:"Upload"});
div.appendChild(b.domNode);
dojo.connect(b, "onClick", function(){
console.log(myUploader.upload)
myUploader.upload();
});
}
var handleUpload = function(upl, node){
dojo.connect(upl, "onComplete", function(dataArray){
dojo.forEach(dataArray, function(file){
console.log("display:", file)
var div = dojo.create('div', {className:'thumb'});
var span = dojo.create('span', {className:'thumbbk'}, div);
var img = dojo.create('img', {src:file.file}, span);
node.appendChild(div);
});
});
}
var u = new dojox.form.Uploader({label:"Programmatic Uploader", multiple:true, uploadOnSelect:true, url:"UploadFile.php"});
dojo.byId("parent").appendChild(u.domNode);
u.startup();
handleUpload(u, dojo.byId('colImages'));
handleUpload(dijit.byId("uploader"), dojo.byId('colImages'));
handleUpload(dijit.byId("uploader2"), dojo.byId('colImages'));
makeSKP();
});
</script>
</body>
</html>