title: Display shapeFile on leaflet map using an uploaded file.zip
body: <p>I'm trying to display a shape file from Brazil on my leaflet map, this shape file is inside a .zip that contains: .dbf, .prj, .sbn, .sbx, .shp and .shx files. To do that, I'm using: <a href="https://github.com/calvinmetcalf/leaflet.shapefile" rel="noreferrer">https://github.com/calvinmetcalf/leaflet.shapefile</a></p>
  
  <p>I have the .zip file at my local computer so I simply made:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button ng-click="addShape()"&gt; Brasil Shape File &lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var mymap = L.map('mapid').setView([-12.85, -50.09], 4);
  $scope.addShape = function () {
      var shpfile = new L.Shapefile('scripts/ShapeFiles/Brasil.zip');
      shpfile.addTo(mymap);
  }
  </code></pre>
  
  <p>Now I want to make the user upload the .zip to show it on the map exactly like whats happening here:
  <a href="http://leaflet.calvinmetcalf.com/#3/32.69/10.55" rel="noreferrer">http://leaflet.calvinmetcalf.com/#3/32.69/10.55</a> </p>
  
  <p>But I can't figure this out... All I have found on the internet is posting the .zip file to an url. I need to use the file right after the user "uploaded" it to the browser.</p>
  
  <p>On the code bellow the user can upload some file and POST it, I tried to console.log the supposed objects that contains the .zip file before sending it but I couldn't find it inside the objects:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body ng-controller="FileUploadCtrl"&gt;
     &lt;div class="row"&gt;
        &lt;label for="fileToUpload"&gt;Select a File to Upload&lt;/label&gt;&lt;br /&gt;
        &lt;input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" /&gt;
     &lt;/div&gt;
     &lt;input type="button" ng-click="uploadFile()" value="Upload" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>scope.setFiles = function(element) {
  scope.$apply(function(scope) {
    console.log('files:', element.files);
    // Turn the FileList object into an Array
      scope.files = []
      for (var i = 0; i &lt; element.files.length; i++) {
        scope.files.push(element.files[i])
      }
    scope.progressVisible = false
    });
  };
  
  scope.uploadFile = function() {
      var fd = new FormData()
      for (var i in scope.files) {
          fd.append("uploadedFile", scope.files[i])
      }
      var xhr = new XMLHttpRequest()
      xhr.upload.addEventListener("progress", uploadProgress, false)
      xhr.addEventListener("load", uploadComplete, false)
      xhr.addEventListener("error", uploadFailed, false)
      xhr.addEventListener("abort", uploadCanceled, false)
      xhr.open("POST", "/fileupload")
      scope.progressVisible = true
      xhr.send(fd)
  }
  </code></pre>
  
  <p>source fiddle: <a href="http://jsfiddle.net/danielzen/utp7j/" rel="noreferrer">danielzen</a></p>
  
  <p>On this exemple, inside the functions 'setFiles' and 'uploadFile', when I console.log(fd) I get: <code>fd: [object FormData]</code> and console.log(element.files):</p>
  
  <pre><code>element.files[0] File {name: "Brasil (1).zip", lastModified: 1492436239000, lastModifiedDate: Mon Apr 17 2017 10:37:19 GMT-0300 (BRT), webkitRelativePath: "", size: 5988862…}
  </code></pre>
  
  <p>But I can't find the original .zip file that was uploaded, maybe because this is not the right way to do it...
  If someone knows a way to get this .zip file or have access to this <a href="http://leaflet.calvinmetcalf.com/" rel="noreferrer">example</a> source and can share with me I'll be very thankful. </p>