WiP File upload started.

app/views/publishPhotos.ejs

@@ -1,24 +1,70 @@
 <br>
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
+  <input type="file" id="selector">
+</div>
 
-<input type='file' />
-<br>
-<img id="myImg" src="#" alt="your image" height=200 width=100>
+<input class="mdl-button mdl-button--raised mdl-button--colored" type="button" value="Upload"
+  onclick="generateSignedURL()">
 
-<script>
+  <div class="mdl-textfield mdl-js-textfield mdl-textfield--file" id="status"></div>
 
-function imageIsLoaded() { 
-  alert(this.src);  // blob url
-  // update width and height ...
-}
+<script type="text/javascript">
 
-window.addEventListener('load', function() {
-  document.querySelector('input[type="file"]').addEventListener('change', function() {
-      if (this.files && this.files[0]) {
-          var img = document.querySelector('img');  // $('img')[0]
-          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
-          img.onload = imageIsLoaded;
+var c = "";
+    var filename = "";
+
+    function uuidv4() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    }
+
+    function getFilename() {
+      var fullPath = document.getElementById('selector').value;
+      if (fullPath) {
+        var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
+        filename = fullPath.substring(startIndex);
+        if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
+          filename = filename.substring(1);
+        }
+        filename = (uuidv4() + filename).replace(/\s+/g, '');
+        return (filename);
       }
-  });
-});
+      return (null);
+    }
 
+    function upload() {
+      var file = $('#selector')[0].files[0];
+      uploadFile(file)
+    }
+
+
+    async function generateSignedURL() {
+      const file = getFilename();
+      const response = await fetch('/generateSignedURL?filename=' + file);
+      if (!response.ok) {
+        throw new Error('Network response for fetch was not ok.');
+      }
+      c = await response.text();
+      c = c.replace(/\"/g, "")
+      console.log("Got signedURL: " + c)
+      console.log("Trying to upload " + file)
+      upload();
+      console.log("Complete")
+      return false;
+    }
+
+    function uploadFile(file) {
+      $("#status").html('Starting Upload...')
+      url = c
+      fetch(url, {
+        method: 'PUT',
+        body: file
+      })
+        .then(response => response.text())
+        .catch(error => $("#status").html(error)
+        )
+        .then(response => $("#status").html('File uploaded successfully: ' + filename));
+    }
 </script>

app/views/publishRealEstate.ejs

@@ -1,7 +1,7 @@
 <br>
 <form id="publishForm" method="POST" novalidate enctype="multipart/form-data">
   <div class="row">
-    <div class="col s12">
+    <div class="col s18">
       <ul class="tabs">
         <li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
         <li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>