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>