source: Dev/trunk/src/client/dojox/form/tests/test_FileUploader.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 8.5 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>dojox.form.FileUploader</title>
6        <style type="text/css">
7                @import "../../../dojo/resources/dojo.css";
8                @import "../../../dijit/themes/dijit.css";
9                @import "../../../dijit/themes/tundra/form/Button.css";
10                /*@import "../../../dijit/tests/css/dijitTests.css";
11                @import "../resources/FileUploader.css";*/
12        </style>
13        <script>
14                passthrough = function(msg){
15                        //for catching messages from Flash
16                        if(window.console){
17                                console.log(msg);
18                        }
19                }
20                forceNoFlash = false;
21                selectMultipleFiles = false;
22                var qs = window.location.href.split("?");
23                if(qs.length>1){
24                        qs = qs[1];
25                        if(qs.indexOf("forceNoFlash")>-1){
26                                forceNoFlash = true;
27                        }
28                        if(qs.indexOf("multiMode")>-1){
29                                selectMultipleFiles = true;
30                        }
31                 }
32
33                 setLoc = function(href){
34                        window.location.href = window.location.href.split("?")[0] + href;
35                 }
36                 showWithFlash = function(){
37                        if(forceNoFlash){
38                                setLoc("");
39                        }
40                 }
41                 showWithoutFlash = function(){
42                        if(!forceNoFlash){
43                                setLoc((selectMultipleFiles) ? "?forceNoFlash&multiMode" : "?forceNoFlash");
44                        }
45                 }
46                 showMulti = function(){
47                        if(!selectMultipleFiles){
48                                setLoc((forceNoFlash) ? "?forceNoFlash&multiMode" : "?multiMode");
49                        }
50                 }
51                 showSingle = function(){
52                        if(selectMultipleFiles){
53                                setLoc((forceNoFlash) ? "?forceNoFlash" : "");
54                        }
55                 }
56    </script>
57        <script type="text/javascript" src="../../../dojo/dojo.js"
58        data-dojo-config="isDebug:true, parseOnLoad: true, debugAtAllCosts:false"></script>
59        <script type="text/javascript">
60                dojo.require("dojox.form.FileUploader");
61                dojo.require("dijit.form.Button");
62                dojo.require("dojo.parser");
63
64                //using this early for the forceNoFlash test:
65                dojo.require("dojox.embed.Flash");
66
67                var uploadUrl = "../tests/UploadFile.php";
68
69                var rmFiles = "";
70                var fileMask = [
71                        ["Jpeg File",   "*.jpg;*.jpeg"],
72                        ["GIF File",    "*.gif"],
73                        ["PNG File",    "*.png"],
74                        ["All Images",  "*.jpg;*.jpeg;*.gif;*.png"]
75                ];
76                // For testing 1D array masks:
77                // var fileMask =       ["All Images",  "*.jpg;*.jpeg;*.gif;*.png"];
78                // var fileMask =       ["PNG File",    "*.png"];
79
80                dojo.addOnLoad(function(){
81                        if(forceNoFlash){
82                                dojox.embed.Flash.available = 0;
83                                dojo.byId("hasFlash").style.display = "none";
84                                dojo.byId("fTypes").style.display = "none";
85                        }else{
86                                dojo.byId("noFlash").style.display = "none";
87                                if(dojo.isArray(fileMask[0])){
88                                        dojo.byId("fTypes").innerHTML+=fileMask[fileMask.length-1][1];
89                                }else{
90                                        dojo.byId("fTypes").innerHTML+=fileMask[1];
91                                }
92                        }
93
94                        if(selectMultipleFiles){
95                                dojo.byId("fmode").innerHTML = dojo.byId("hmode").innerHTML = "Multi-File Mode";
96                                dojo.byId("fSingle").style.display = "none";
97                                dojo.byId("hSingle").style.display = "none";
98                                dijit.byId("fbm").domNode.style.display = "none";
99                                dijit.byId("hbm").domNode.style.display = "none";
100                        }else{
101                                dojo.byId("fmode").innerHTML = dojo.byId("hmode").innerHTML = "Single-File Mode";
102                                dojo.byId("fMulti").style.display = "none";
103                                dojo.byId("hMulti").style.display = "none";
104                                dijit.byId("fbs").domNode.style.display = "none";
105                                dijit.byId("hbs").domNode.style.display = "none";
106                        }
107                        dojo.byId("uploadedFiles").value = "";
108                        dojo.byId("fileToUpload").value = "";
109
110
111                        var f0 = new dojox.form.FileUploader({
112                                degradable:true,
113                                uploadUrl:uploadUrl,
114                                uploadOnChange:false,
115                                selectMultipleFiles:selectMultipleFiles,
116                                fileMask:fileMask,
117                                isDebug:true,
118                                devMode:true
119                        }, "selectBtn");
120
121                        doUpload = function(){
122                                dojo.byId("fileToUpload").innerHTML = "uploading...";
123                                f0.upload();
124                        }
125                        dojo.connect(f0, "onChange", function(data){
126                                console.log("DATA:", data);
127                                dojo.forEach(data, function(d){
128                                        //file.type no workie from flash selection (Mac?)
129                                        if(selectMultipleFiles){
130                                                dojo.byId("fileToUpload").value += d.name+" "+Math.ceil(d.size*.001)+"kb \n";
131                                        }else{
132                                                dojo.byId("fileToUpload").value = d.name+" "+Math.ceil(d.size*.001)+"kb \n";
133                                        }
134                                });
135                        });
136                        dojo.connect(f0, "onProgress", function(data){
137                                dojo.byId("fileToUpload").value = "";
138                                dojo.forEach(data, function(d){
139                                        dojo.byId("fileToUpload").value += "("+d.percent+"%) "+d.name+" \n";
140
141                                });
142                        });
143                        dojo.connect(f0, "onComplete", function(data){
144                                dojo.forEach(data, function(d){
145                                        dojo.byId("uploadedFiles").value += d.file+" \n";
146                                        dojo.byId("rgtCol").innerHTML += '<img src="'+d.file+'" />';
147                                        rmFiles+=d.file+";";
148                                });
149                        });
150                        dojo.connect(f0, "onCancel", function(data){
151                                dojo.byId("fileToUpload").value = "file selection cancelled by user.";
152                        });
153
154                        Destroy = function(){
155                                f0.destroyAll();
156                        }
157
158                });
159
160                cleanUp = function(){
161                        dojo.byId("rgtCol").innerHTML = "";
162                        dojo.byId("uploadedFiles").value = "";
163                        dojo.xhrGet({
164                                url:uploadUrl,
165                                handleAs:"text",
166                                content:{
167                                        rmFiles:rmFiles
168                                }
169                        });
170                        rmFiles = "";
171
172                }
173                dojo.addOnUnload(function(){
174                        console.log("You're leaving the page");
175                        cleanUp();
176                });
177
178
179        </script>
180    <style>
181                body{
182                        font-size:100%;
183                }
184                #wrapper{
185                        width:100%;
186                }
187                #fileToUpload{
188                        border:#CCCCCC 1px solid;
189                        overflow-y:auto;
190                        overflow-x:hidden;
191                }
192                .uploadedFilesLabel{
193
194                }
195                #uploadedFiles{
196                        border:#CCCC00 1px solid;
197                        background:#FFFFCC;
198                }
199                .leftCol{
200                        width:500px;
201                        padding:5px;
202                        vertical-align:top;
203                }
204                .rgtCol{
205                        vertical-align:top;
206                }
207                textarea{
208                        display:block;
209                }
210                #noFlash button, #hasFlash button{
211                        font-size:9px;
212                }
213        </style>
214</head>
215<body class="tundra">
216        <p style="font-size:14px; width:480px; border:2px solid #ff0000; padding:3px;">
217                <strong>NOTE:</strong> This test does upload,
218                but the server scripts are renamed to <em>tests/UploadFile.php.<strong>disabled</strong></em> and
219                <em>tests/cLOG.php.<strong>disabled</strong></em> to prevent security attacks on hosted servers.
220                You should rename these files (removing <em>.disabled</em>) in your local copy to conduct tests.
221        </p>
222
223<table width="100%" border="0" cellspacing="0" cellpadding="0">
224  <tr>
225    <td class="leftCol">
226
227        <div id="hasFlash">
228            <h1>
229                dojox.form.FileUploader - FileInputFlash Test
230                <br/> Flash Mode - <span id="fmode"></span>
231            </h1>
232            <div onClick="showWithoutFlash()" dojoType="dijit.form.Button">Emulate No Flash Plugin</div>
233            <div id="fbm" onClick="showMulti()" dojoType="dijit.form.Button">Switch to Multi-File mode</div>
234            <div id="fbs" onClick="showSingle()" dojoType="dijit.form.Button">Switch to Single-File mode</div>
235
236            <p>The following is an example of FileUploader trigger FileInputFlash act's with the same APIs as FileInputOverlay, so you can build your own file input. <em>For the file to actually upload, you'll need to have PHP enabled. </em></p>
237            <p id="fMulti">Multiple-file mode. You may choose multiple files from the System Dialog.</p>
238            <p id="fSingle">Single-file mode. You may choose only one from the System Dialog.</p>
239        </div>
240
241        <div id="noFlash">
242            <h1>
243                dojox.form.FileUploader - Degraded to FileInputOverlay
244                <br/>HTML Mode - <span id="hmode"></span>
245                        </h1>
246            <div onClick="showWithFlash()" dojoType="dijit.form.Button">Normal Flash Plugin Mode</div>
247            <div id="hbm" onClick="showMulti()" dojoType="dijit.form.Button">Switch to Multi-File mode</div>
248            <div id="hbs" onClick="showSingle()" dojoType="dijit.form.Button">Switch to Single-File mode</div>
249
250            <p>The following is an example of the user not having the Flash plugin installed, and the FileUploader degrading to the FileInputOverlay, except in Opera, which does not support the HTML file input overlay.</p>
251            <p id="hMulti">Multiple-file mode. You may upload multiple files by adding files to the upload list, one at a time.</p>
252            <p id="hSingle">Single-file mode. You may choose only one from the System Dialog.</p>
253        </div>
254
255
256                <span id="selectBtn">Select Images...</span>
257
258                <span id="fTypes">Choose from these types:</span>
259
260        <textarea cols="50" rows="6" id="fileToUpload"></textarea>
261
262        <div id="uploadBtn" class="uploadBtn" onClick="doUpload();" dojoType="dijit.form.Button">Upload</div>
263
264        <div class="uploadedFilesLabel">Uploaded Files:</div>
265
266        <textarea cols="50" rows="4" id="uploadedFiles"></textarea>
267
268        <div onClick="cleanUp()" dojoType="dijit.form.Button">Remove Files</div>
269        <!-- Test destroy: <div onClick="Destroy()" dojoType="dijit.form.Button">Destroy()</div> -->
270    </td>
271    <td id="rgtCol">&nbsp;</td>
272  </tr>
273</table>
274</body>
275</html>
Note: See TracBrowser for help on using the repository browser.