senaduka/old-web
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Dropzone implemented.

Browse Source
This commit is contained in:
Naida Vatric
2020-03-09 18:00:31 +01:00
parent bbd9dab30d
commit 96bc66ef7b
5 changed files with 140 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/public/main.css
View File

@@ -169,3 +169,13 @@ h3 {
left: auto;
right: auto;
}
.dropzone {
background: white;
border-radius: 10px;
border: 4px dashed #02adba;
border-image: none;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

12
app/views/layout.ejs
View File

@@ -9,14 +9,21 @@
gtag('js', new Date());
gtag('config', '<%= process.env.GA_ID %>');
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
</script>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/assets/main.css">
<link rel="stylesheet" href="/assets/segment.css">
@@ -48,6 +55,9 @@
<% } else { %>
<title>Kivi.ba</title>
<% } %>
</head>
<body>

90
app/views/publishPhotos.ejs
View File

@@ -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>

133
package-lock.json generated
View File

@@ -13,9 +13,9 @@
}
},
"@google-cloud/common": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.3.0.tgz",
"integrity": "sha512-nmIyi3q/FL2j6ZJ61xK/863DoJEZayI2/W/iCgwrCYUYsem277XO45MBTAimjgiKBCA0c9InmQyfT48h/IK4jg==",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.4.0.tgz",
"integrity": "sha512-zWFjBS35eI9leAHhjfeOYlK5Plcuj/77EzstnrJIZbKgF/nkqjcQuGiMCpzCwOfPyUbz8ZaEOYgbHa759AKbjg==",
"requires": {
"@google-cloud/projectify": "^1.0.0",
"@google-cloud/promisify": "^1.0.0",
@@ -48,9 +48,9 @@
"integrity": "sha512-VccZDcOql77obTnFh0TbNED/6ZbbmHDf8UMNnzO1d5g9V0Htfm4k5cllY8P1tJsRKC3zWYGRLaViiupcgVjBoQ=="
},
"@google-cloud/storage": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-4.3.1.tgz",
"integrity": "sha512-/i7tAcUZDQNDs8/+oN+U2mOXdWdP2eld0pFKLkpthmWmaD89JQlrgHAFL7uvlgCSbaD7YxgbSyJebgd6YBgMgQ==",
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-4.5.0.tgz",
"integrity": "sha512-ZLFcR6CiP1AnYBA9eTtASF9Dy3wjYmGx+HZiy/LsIPN41wyBTn9yAjIOxRHiteqzX3uQzZ+VJNCB/DmTU33CeQ==",
"requires": {
"@google-cloud/common": "^2.1.1",
"@google-cloud/paginator": "^2.0.0",
@@ -82,9 +82,9 @@
"integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA=="
},
"readable-stream": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz",
"integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==",
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
"requires": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
@@ -188,9 +188,27 @@
}
},
"agent-base": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
"integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g=="
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.0.tgz",
"integrity": "sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==",
"requires": {
"debug": "4"
},
"dependencies": {
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
}
}
},
"ajv": {
"version": "6.10.0",
@@ -1492,9 +1510,9 @@
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
},
"fast-text-encoding": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz",
"integrity": "sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ=="
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.1.tgz",
"integrity": "sha512-x4FEgaz3zNRtJfLFqJmHWxkMDDvXVtaznj2V9jiP8ACUJrUgist4bP9FmDL2Vew2Y9mEQI/tG4GqabaitYp9CQ=="
},
"fill-range": {
"version": "4.0.0",
@@ -2155,13 +2173,13 @@
}
},
"gaxios": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-2.3.0.tgz",
"integrity": "sha512-VgC4JKJQAAAGK5rFZbPcS5mXsdIYVMIUJOxMjSOkYdfhB74R0L6y8PFQDdS0r1ObG6hdP11e71EjHh3xbI+6fQ==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-2.3.2.tgz",
"integrity": "sha512-K/+py7UvKRDaEwEKlLiRKrFr+wjGjsMz5qH7Vs549QJS7cpSCOT/BbWL7pzqECflc46FcNPipjSfB+V1m8PAhw==",
"requires": {
"abort-controller": "^3.0.0",
"extend": "^3.0.2",
"https-proxy-agent": "^4.0.0",
"https-proxy-agent": "^5.0.0",
"is-stream": "^2.0.0",
"node-fetch": "^2.3.0"
},
@@ -2174,9 +2192,9 @@
}
},
"gcp-metadata": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-3.3.1.tgz",
"integrity": "sha512-RrASg1HaVAxoB9Q/8sYfJ++v9PMiiqIgOrOxZeagMgS4osZtICT1lKBx2uvzYgwetxj8i6K99Z0iuKMg7WraTg==",
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-3.5.0.tgz",
"integrity": "sha512-ZQf+DLZ5aKcRpLzYUyBS3yo3N0JSa82lNDO8rj3nMSlovLcz2riKFBsYgDzeXcv75oo5eqB2lx+B14UvPoCRnA==",
"requires": {
"gaxios": "^2.1.0",
"json-bigint": "^0.3.0"
@@ -2196,11 +2214,11 @@
},
"dependencies": {
"configstore": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.0.tgz",
"integrity": "sha512-eE/hvMs7qw7DlcB5JPRnthmrITuHMmACUJAp89v6PT6iOqzoLS7HRWhBtuHMlhNHo2AhUSA/3Dh1bKNJHcublQ==",
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
"integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
"requires": {
"dot-prop": "^5.1.0",
"dot-prop": "^5.2.0",
"graceful-fs": "^4.1.2",
"make-dir": "^3.0.0",
"unique-string": "^2.0.0",
@@ -2248,9 +2266,9 @@
}
},
"write-file-atomic": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.1.tgz",
"integrity": "sha512-JPStrIyyVJ6oCSz/691fAjFtefZ6q+fP6tm+OS4Qw6o+TGQxNp1ziY2PgS+X/m0V8OWhZiO/m4xSj+Pr4RrZvw==",
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
"requires": {
"imurmurhash": "^0.1.4",
"is-typedarray": "^1.0.0",
@@ -2336,15 +2354,16 @@
}
},
"google-auth-library": {
"version": "5.9.2",
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.9.2.tgz",
"integrity": "sha512-rBE1YTOZ3/Hu6Mojkr+UUmbdc/F28hyMGYEGxjyfVA9ZFmq12oqS3AeftX4h9XpdVIcxPooSo8hECYGT6B9XqQ==",
"version": "5.10.1",
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.10.1.tgz",
"integrity": "sha512-rOlaok5vlpV9rSiUu5EpR0vVpc+PhN62oF4RyX/6++DG1VsaulAFEMlDYBLjJDDPI6OcNOCGAKy9UVB/3NIDXg==",
"requires": {
"arrify": "^2.0.0",
"base64-js": "^1.3.0",
"ecdsa-sig-formatter": "^1.0.11",
"fast-text-encoding": "^1.0.0",
"gaxios": "^2.1.0",
"gcp-metadata": "^3.3.0",
"gcp-metadata": "^3.4.0",
"gtoken": "^4.1.0",
"jws": "^4.0.0",
"lru-cache": "^5.0.0"
@@ -2572,14 +2591,6 @@
"debug": "4"
},
"dependencies": {
"agent-base": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.0.tgz",
"integrity": "sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==",
"requires": {
"debug": "4"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -2606,11 +2617,11 @@
}
},
"https-proxy-agent": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
"integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
"integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
"requires": {
"agent-base": "5",
"agent-base": "6",
"debug": "4"
},
"dependencies": {
@@ -4529,38 +4540,6 @@
"node-fetch": "^2.2.0",
"stream-events": "^1.0.5",
"uuid": "^3.3.2"
},
"dependencies": {
"agent-base": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.0.tgz",
"integrity": "sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==",
"requires": {
"debug": "4"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"requires": {
"ms": "^2.1.1"
}
},
"https-proxy-agent": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
"integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
"requires": {
"agent-base": "6",
"debug": "4"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
}
}
},
"term-size": {

2
package.json
View File

@@ -30,7 +30,7 @@
},
"dependencies": {
"2checkout-node": "0.0.1",
"@google-cloud/storage": "^4.3.1",
"@google-cloud/storage": "^4.5.0",
"@sendgrid/mail": "^6.3.1",
"aws-sdk": "^2.422.0",
"bluebird": "^3.5.5",