Preview of the file before uploading.

Back button. Few others edits.
Tpt · Nov 5, 2011 · 4cb74ee · 4cb74ee
1 parent a745c3a
commit 4cb74ee
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 45 deletions.
diff --git a/assets/www/app.css b/assets/www/app.css
@@ -340,24 +340,39 @@ iframe#main {
     position:relative;
 }
 
-#uploadnav {
+#uploadNav {
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     background: -webkit-gradient(linear, left top, left bottom, from(#5F5F5F), to(#4F4F4F));
     padding: 5px;
     height: 36px;
     width: 100%;
-    position : fixed;
+    position: fixed;
     bottom : 0;
 }
 
-#uploadnav button {
+#uploadNav > div:first-child {
+    -webkit-box-flex: 1;
+}
+
+#uploadNav button {
     color:white;
 }
 
-#uploadnext {
+#uploadNext {
+    margin-top: 0px;
     position: absolute;
-    right: 2px;
+    right: 3px;
+    bottom: 1px;
+}
+
+#upload1 {
+    text-align: center;
+}
+
+#uploadPicture {
+    text-align: center;
+    margin: 3px;
 }
 
 #progress {

diff --git a/assets/www/index.html b/assets/www/index.html
@@ -108,7 +108,7 @@
         </header>
         <div id="upload1" class="page">
             <div>
-                <div class="picturepreview" /></div>
+                <div id="uploadPicture" /></div>
                 <button type="button" onclick="javascript:upload.addFile.fromLibary();">Select a media file</button>
                 <button type="button" onclick="javascript:upload.addFile.fromCamera();">Take a picture</button>
             </div>
@@ -137,9 +137,9 @@
                 <p><label for="upload-otherInformation">Other information:</label> <textarea type="text" id="upload-otherInformation"></textarea></p>
             </div>
         </div>
-        <div id="uploadnav">
-            <button type="button" id="uploadback" onclick="javascript:upload.ui.back();">Back</button>
-            <button type="submit" id="uploadnext" onclick="javascript:upload.ui.next();">Next</button>
+        <div id="uploadNav">
+            <button type="button" id="uploadBack" onclick="javascript:upload.ui.back();">Back</button>
+            <button type="button" id="uploadNext" onclick="javascript:upload.ui.next();">Next</button>
         </div>
     </div>
 

diff --git a/assets/www/js/login.js b/assets/www/js/login.js
@@ -1,7 +1,7 @@
 var login = {
     username: '',
     logged: false,
-    api: 'http://commons.wikimedia.org/w/api.php',
+    api: 'http://commons.wikimedia.org/w/api.php', //@todo check if we can replace it by the local wikipedia api without bugs in uploader
 
     getUsername: function() {
         if(this.username == '') {
@@ -17,9 +17,6 @@ var login = {
     },
 
     setUsername: function(username) {
-        if(this.logged) {
-            //this.logout();
-        }
         this.username = username;
         var settingsDB = new Lawnchair({name:"settingsDB"}, function() {
             this.save({key: "username", value: login.username});
@@ -33,8 +30,7 @@ var login = {
             if(typeof callback == 'function') {
                 this.callback = callback;
             }
-            $('#loginUsername').val(login.getUsername());
-            $('#loginPassword').val('');
+            this.reset();
 
             hideOverlayDivs();
             $('#login').toggle();
@@ -55,7 +51,7 @@ var login = {
             }
         },
         reset: function() {
-            $('#loginUsername').val('');
+            $('#loginUsername').val(login.getUsername());
             $('#loginPassword').val('');
         },
 
@@ -77,16 +73,16 @@ var login = {
             $.ajax({
                 type: 'Post',
                 dataType: 'json',
-                url: login.api + '?format=json&action=login&lgname=' + login.username + '&lgpassword=' + password,
+                url: login.api + '?format=json&action=login&lgname=' + username + '&lgpassword=' + password,
                 success: function(data) {
-                    if(data.login.result == "NeedToken") {
+                    if(data.login && data.login.result == "NeedToken") {
                         //second step : real login
                         $.ajax({
                             type: 'Post',
                             dataType: 'json',
-                            url: login.api + '?format=json&action=login&lgname=' + login.username + '&lgpassword=' + password + '&lgtoken=' + data.login.token,
+                            url: login.api + '?format=json&action=login&lgname=' + username + '&lgpassword=' + password + '&lgtoken=' + data.login.token,
                             success: function(data) {
-                                if(data.login.result == "Success") {
+                                if(data.login && data.login.result == "Success") {
                                     progress.hide();
                                     alert('The login succeded as ' + data.login.lgusername + ' !');
                                     login.logged = true;

diff --git a/assets/www/js/upload.js b/assets/www/js/upload.js
@@ -24,6 +24,19 @@ var upload = {
         this.file.otherInformation = '';
     },
 
+    showFile: function(file) {
+        //init of the file reader
+        progress.show();
+        var reader = new FileReader();
+        reader.onloadend = function(evt) {
+            $('#uploadPicture').html('<img  width="200" height="200" src="' + evt.target.result + '" />');
+            progress.hide();
+        };
+        reader.onerror = upload.addFile.error;
+
+          reader.readAsDataURL(file);
+    },
+
     addFile: {
         fromLibary: function() {
             navigator.camera.getPicture(this.onSuccess, this.onFail, {sourceType: Camera.PictureSourceType.PHOTOLIBRARY, mediaType: Camera.MediaType.PICTURE, destinationType: Camera.DestinationType.FILE_URI, allowEdit:true});
@@ -33,23 +46,13 @@ var upload = {
         },
         onSuccess: function(imagePath) {
             window.resolveLocalFileSystemURI(imagePath, function(entry) {
-                entry.file(function(metadata) {
-                    if(upload.params.formats.indexOf(metadata.type) == -1) {
+                entry.file(function(file) {
+                    if(upload.params.formats.indexOf(file.type) == -1) {
                         alert('You can\'t upload this file !');
                     } else {
-                        upload.setFile(metadata);
-                        $('#uploadnext').show();
-                        //TODO : preview of the file
-                        /* var reader = new FileReader();
-                        reader.onloadend = function(evt) {
-                            //error
-                            console.log(evt.target.result);
-                            //$('.uploadpicture').html('<img scr="' + evt.target.result + '" />');
-                            //alert('<img scr="' + evt.target.result + '" />');
-
-                        };
-                        reader.onerror = upload.addFile.error;
-                        reader.readAsDataURL(entry); */
+                        upload.setFile(file);
+                        $('#uploadNext').show();
+                        upload.showFile(file);
                     }
                 }, upload.addFile.error);
             }, upload.addFile.error);
@@ -58,8 +61,9 @@ var upload = {
             console.log(evt.target.error.code);
         },
         onFail: function(message) {
-            if(message != 'Selection cancelled.')
+            if(message != 'Selection cancelled.' && message != 'Camera cancelled.') {
                 alert('Failed because: ' + message);
+            }
         }
     },
 
@@ -155,8 +159,12 @@ var upload = {
             upload.ui.hide();
         },
         onFail: function(error) {
-            alert('The upload fail !');
-            alert("An error has occurred: Code = " = error.code);
+            if(error.code == FileTransferError.CONNECTION_ERR) {
+                alert('The upload fail because of a connecction error !');
+            } else {
+                alert('The upload fail !');
+                alert("An error has occurred: Code = " + error.code);
+            }
             progress.hide();
             upload.ui.hide();
         },
@@ -206,10 +214,14 @@ var upload = {
         },
 
         back: function() {
-            $('#upload' + this.currentStep).hide();
-            this.currentStep--;
-            this.step();
-            $('#upload' + this.currentStep).show();
+            if(this.currentStep == 1) {
+                this.hide();
+            } else {
+                $('#upload' + this.currentStep).hide();
+                this.currentStep--;
+                this.step();
+                $('#upload' + this.currentStep).show();
+            }
         },
         next: function() {
             if(this.check()) {
@@ -223,11 +235,10 @@ var upload = {
         step: function() {
             switch(this.currentStep) {
                 case 1:
-                    $('#uploadback').hide();
-                    $('#uploadnext').hide();
+                    $('#uploadBack').show();
+                    $('#uploadNext').hide();
                     upload.file = {};
                     if(!login.logged) {
-                        alert('login to common website');
                         $('#upload').hide();
                         login.form.show(function(logged) {
                             if(logged) {