Changed dropzone - url WiP.

app/views/publishRealEstate.ejs

@@ -1,13 +1,13 @@
 <br>
-<form id="publishForm" method="POST" novalidate enctype="multipart/form-data">
+<form id="publishForm" method="POST" novalidate >
   <div class="row">
     <div class="col s12">
       <ul class="tabs">
-        <li class="tab custom-col"><a href="#publishBasicData">Osnovni podaci</a></li>
-        <li class="tab custom-col"><a href="#publishAdditionalData">Dodatni podaci</a></li>
-        <li class="tab custom-col"><a href="#publishLocation">Lokacija</a></li>
-        <li class="tab custom-col"><a href="#publishPhotos">Fotografije</a></li>
-        <li class="tab custom-col"><a href="#publishEnd">Kraj</a></li>
+        <li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
+        <li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>
+        <li class="tab col s2"><a href="#publishLocation">Lokacija</a></li>
+        <li class="tab col s2"><a href="#publishPhotos">Fotografije</a></li>
+        <li class="tab col s2"><a href="#publishEnd">Kraj</a></li>
 
     </ul>
     </div>
@@ -32,10 +32,85 @@
 </form>
 
 <script>
+  function uuidv4() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    }
+
+    function getFileName(fileName) {
+        const encodedFileName = (uuidv4() + fileName).replace(/\s+/g, '');
+        return encodedFileName;
+    }
+
+    function upload() {
+      var file = $('#selector')[0].files[0];
+      uploadFile(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.');
+      }
+      let signedUrl = await response.text();
+      signedUrl = signedUrl.replace(/\"/g, "")
+      await uploadFile(file, fileName, signedUrl);
+      return fileName;
+    }
+
+       function uploadFile(file, fileName, url) {
+    return  fetch(url, {
+        method: 'PUT',
+        headers: new Headers({'content-type': 'image/*'}),
+        mode: 'cors',
+        body: file
+      })
+        .then(response => response.text())
+        .then (response => {
+          return response;
+        }
+        )
+        .catch(error => $("#status").html(error)
+        )
+        .then(response => {
+          $("#imageUrls").val($("#imageUrls").val()+ fileName+"|");
+        });
+
+    }
 
   $(document).ready(function(){
     $('.tabs').tabs();
 
+    // 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/*",
+        	dictDefaultMessage: `<span class="text-center">
+                              <h3>Prevuci fotografije ili klikni za dodavanje!</h3>
+                              (Maksimalno 10 fotografija.)
+                              </span>`,
+					dictResponseError: 'Error uploading file!',
+          dictRemoveFile: 'Izbriši ',
+          dictFileTooBig: 'Fajl je prevelik!',
+          dictInvalidFileType: 'Iabrani fajl nije fotografija!',
+          dictMaxFilesExceeded: 'Dostigli ste maksimalan broj fotografija!'
+				};
+      var photosUploader = new Dropzone('#photos-upload', dropzoneOptions);
+
+
+    //VALIDATION - WiP
     //Helper validation functions
     const isValidEmail = $email => {
       const simpleEmailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -152,8 +227,21 @@
 
 }
 
+
+$("#test").click(function(e){
+        e.preventDefault();
+        const addedFiles = photosUploader.files.filter(file => file.status!=="error");
+       console.log(addedFiles);
+        addedFiles.forEach( async (file) => {
+          await  generateSignedURL(file);
+        })
+     
+      });
+
+
     $("#submit").click( function () {
 
+
       if (marker) {
         const currentLocation = marker.getPosition();
 
@@ -196,10 +284,13 @@
 
         validate (input);
       } */
+     
+        if (!hasErrors) {
+            $("#publishForm").submit();
 
-      if (!hasErrors) {
-        $("#publishForm").submit();
       };
+     
+     
        
     });
   });