old-web/app/views/publishPhotos.ejs

<br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
  <input type="file" id="selector">
</div>

<input class="mdl-button mdl-button--raised mdl-button--colored" type="button" value="Upload"
  onclick="generateSignedURL()">

  <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">
  
    $(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) {
        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, "")
     // console.log("Got signedURL: " + c)
     // console.log("Trying to upload " + fileName)
      uploadFile(file, fileName, signedUrl);
     // console.log("Complete")
      return false;
    }

       function uploadFile(file, fileName, url) {
      $("#status").html('Starting Upload...')
     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 => {
          $("#status").html('File uploaded successfully: ' + fileName )
          $("#imageUrls").val($("#imageUrls").val()+ fileName+"|");
        });

    }
</script>