Dropzone implemented.

app/views/publishPhotos.ejs

@@ -8,30 +8,62 @@
 
   <div class="mdl-textfield mdl-js-textfield mdl-textfield--file" id="status"></div>
 
+<s>******************************</s>
+<div action="/photos-upload" class="dropzone" id="photos-upload">
+      <div class="fallback">
+        <input name="file" type="file" multiple />
+      </div>
+      
+    </div>
+<button id="test">TEST</button>
+<input type="hidden" name="imageUrls" id="imageUrls" value="">
 <script type="text/javascript">
-    //Example - preuzeto 
-    var c = "";
-    var filename = "";
+  
+    $(document).ready(function(){
+     // Manual dropzone init
+      const dropzoneOptions = {
+					url: "/photos-upload", //can be a function that returns url ?
+          autoProcessQueue:false, //not to upload files automaticly
+          method: "put", //or post
+          parallelUploads: 1,
+          uploadMultiple: false, //or true ??
+					addRemoveLinks: true,
+					maxFilesize: 2, //MB,
+          resizeWidth: 600, 
+          maxFiles: 10, // ??
+          acceptedFiles: "image/*",
+          accept: function(file, done){
+            console.log('test');
+          },
+					dictDefaultMessage: `<span class="text-center">
+                              <h3>Prevuci fotografije ili klikni za dodavanje!</h3>
+                              </span>`,
+					dictResponseError: 'Error uploading file!',
+          dictRemoveFile: 'Izbriši '
+				};
+      var photosUploader = new Dropzone('#photos-upload', dropzoneOptions);
+
+      $("#test").click(function(e){
+        e.preventDefault();
+       const addedFiles = photosUploader.files.filter(file => file.status==="added");
+        addedFiles.forEach( file => {
+          generateSignedURL(file);
+
+        })
+      });
+
+    });
 
     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);
+        const 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 getFileName(fileName) {
+        const encodedFileName = (uuidv4() + fileName).replace(/\s+/g, '');
+        return encodedFileName;
     }
 
     function upload() {
@@ -40,24 +72,23 @@
     }
 
 
-    async function generateSignedURL() {
-      const file = getFilename();
-      const response = await fetch('/generateSignedURL?filename=' + file);
+    async function generateSignedURL(file) {
+      const fileName = getFileName(file.name);
+      const response = await fetch('/generateSignedURL?filename=' + fileName);
       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")
+      let signedUrl = await response.text();
+      signedUrl = signedUrl.replace(/\"/g, "")
+     // console.log("Got signedURL: " + c)
+     // console.log("Trying to upload " + fileName)
+      uploadFile(file, fileName, signedUrl);
+     // console.log("Complete")
       return false;
     }
 
-       function uploadFile(file) {
+       function uploadFile(file, fileName, url) {
       $("#status").html('Starting Upload...')
-      url = c;
      fetch(url, {
         method: 'PUT',
         headers: new Headers({'content-type': 'image/*'}),
@@ -71,7 +102,10 @@
         )
         .catch(error => $("#status").html(error)
         )
-        .then(response => $("#status").html('File uploaded successfully: ' + filename ));
+        .then(response => {
+          $("#status").html('File uploaded successfully: ' + fileName )
+          $("#imageUrls").val($("#imageUrls").val()+ fileName+"|");
+        });
 
     }
 </script>