user FileReader to read file upload on client side when possible

diff --git a/application/controllers/IdxController.php b/application/controllers/IdxController.php
index b7d36839f01499feadc193250114259723cfc00e..0a327bb1d242bec20a714d486de876eb8a742e9e 100644 (file)
--- a/application/controllers/IdxController.php
+++ b/application/controllers/IdxController.php
@@ -180,7 +180,7 @@ class IdxController extends Zend_Controller_Action
             'unsavedConfirmExit' => __("You have an unsaved route"),
             'notEmptyField' => __("Value is required"),
             'noResult' => __("no result"),
-            'dragFileError' => __("could not analyze file content"),
+            'uploadFileError' => __("could not analyze file content"),
             );
     }
 

diff --git a/public/js/syj.js b/public/js/syj.js
index 9e5b60202fef19c33cd334f54f3af3ff6ff1ae4b..6c4fabe79a206c7193ce0072684b3e8572314a62 100644 (file)
--- a/public/js/syj.js
+++ b/public/js/syj.js
@@ -350,7 +350,69 @@ var SYJView = {
         }
 
         $("map-overlay").hide();
-        $("geom_upload").observe('change', function() {
+        $("geom_upload").observe('change', function(evt) {
+            var file = null, reader = null, readerror = null;
+            if (window.FileList && window.FileReader) {
+                file = evt.target.files[0];
+                reader = new FileReader();
+                readerror = function() {
+                    this.messenger.setMessage(SyjStrings.uploadFileError, "warn");
+                }.bind(this);
+                reader.onload = function(evt) {
+                    var data = null, results = null, engine = null, vector = null, i = 0, formats = ['KML', 'GPX', 'GeoJSON'];
+
+                    $("geom_upload_container").removeClassName("disabled");
+                    $("geom_upload").disabled = false;
+                    if (evt.error) {
+                        readerror();
+                        return;
+                    }
+                    data = evt.target.result;
+
+                    for (i = 0; i < formats.length; i++) {
+                        engine = new OpenLayers.Format[formats[i]]({ internalProjection: Mercator, externalProjection: WGS84 });
+                        try {
+                            results = engine.read(data);
+                        } catch(e) {
+                        }
+                        if (results && results.length) {
+                            break;
+                        }
+                    }
+                    if (!results || !results.length) {
+                        readerror();
+                        return;
+                    }
+
+                    vector = results[0];
+                    if (vector.geometry.CLASS_NAME !== "OpenLayers.Geometry.LineString") {
+                        readerror();
+                        return;
+                    }
+                    this.viewLayer.addFeatures([vector]);
+                    this.map.zoomToExtent(this.viewLayer.getDataExtent());
+
+                    if ($("edit-btn")) {
+                        $("edit-btn").click();
+                    } else if ($("create-btn")) {
+                        $("create-btn").click();
+                    }
+
+                    if (this.editControl.handler.realPoints.length < 2) {
+                        SyjSaveUI.disable();
+                    } else {
+                       SyjSaveUI.enable();
+                    }
+
+                    if (vector.data && vector.data.name) {
+                        $("geom_title").value = vector.data.name;
+                    }
+                }.bind(this);
+                $("geom_upload_container").addClassName("disabled");
+                $("geom_upload").disabled = true;
+                reader.readAsText(file);
+                return;
+            }
             $("map-overlay").show();
             SyjSaveUI.enable();
             this.editControl.deactivate();
@@ -498,8 +560,9 @@ var SYJView = {
                     }
                 },
                 create: function(f, line) {
+                    this.messenger.hide();
                     $("geom_upload_container").hide();
-                }
+                }.bind(this)
             },
 
             handlerOptions: {