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

Changed dropzone - url WiP.

Browse Source
This commit is contained in:
Naida Vatric
2020-03-11 22:32:10 +01:00
parent 5066c2fa70
commit a7148ba6c3
9 changed files with 179 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/common/publishEnums.js
View File

@@ -6,16 +6,6 @@ const {
} = require("./enums");
const BASIC_BOOLEAN_PUBLISH = [
{
dbField: "balcony",
title: "Balkon",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE
]
},
{
dbField: "newBuilding",
title: "Novogradnja",
@@ -28,6 +18,17 @@ const BASIC_BOOLEAN_PUBLISH = [
AD_CATEGORY.GARAGE
]
},
{
dbField: "balcony",
title: "Balkon",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE
]
},
{
dbField: "elevator",
title: "Lift",
@@ -51,6 +52,34 @@ const BASIC_BOOLEAN_PUBLISH = [
];
const BASIC_INPUT_PUBLISH = [
{
dbField: "title",
title: "Naslov",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE,
AD_CATEGORY.OFFICE,
AD_CATEGORY.LAND,
AD_CATEGORY.GARAGE
],
constraint: ["required"]
},
{
dbField: "shortDescription",
title: "Opis",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE,
AD_CATEGORY.OFFICE,
AD_CATEGORY.LAND,
AD_CATEGORY.GARAGE
],
constraint: []
},
{
dbField: "price",
title: "Cijena (KM)",
@@ -85,6 +114,20 @@ const BASIC_INPUT_PUBLISH = [
categoriesToShow: [AD_CATEGORY.HOUSE, AD_CATEGORY.COTTAGE],
constraint: ["numerical"]
},
{
dbField: "streetName",
title: "Adresa",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE,
AD_CATEGORY.OFFICE,
AD_CATEGORY.LAND,
AD_CATEGORY.GARAGE
],
constraint: []
},
{
dbField: "numberOfRooms",
title: "Broj soba",
@@ -117,48 +160,6 @@ const BASIC_INPUT_PUBLISH = [
AD_CATEGORY.OFFICE
],
constraint: ["integer"]
},
{
dbField: "title",
title: "Naslov",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE,
AD_CATEGORY.OFFICE,
AD_CATEGORY.LAND,
AD_CATEGORY.GARAGE
],
constraint: ["required"]
},
{
dbField: "shortDescription",
title: "Opis",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE,
AD_CATEGORY.OFFICE,
AD_CATEGORY.LAND,
AD_CATEGORY.GARAGE
],
constraint: []
},
{
dbField: "streetName",
title: "Adresa",
categoriesToShow: [
AD_CATEGORY.FLAT,
AD_CATEGORY.HOUSE,
AD_CATEGORY.APARTMENT,
AD_CATEGORY.COTTAGE,
AD_CATEGORY.OFFICE,
AD_CATEGORY.LAND,
AD_CATEGORY.GARAGE
],
constraint: []
}
];

6
app/controllers/publishRealEstate.js
View File

@@ -182,6 +182,9 @@ const postPublishInputs = async (req, res) => {
const nextStepPage = req.query.nextStep || "/uspjesnaobjava";
//Request body
console.log("Body:", req.body);
const balcony = req.body.balcony === "on";
const elevator = req.body.elevator === "on";
const newBuilding = req.body.newBuilding === "on";
@@ -243,6 +246,9 @@ const postPublishInputs = async (req, res) => {
//Contact email saved in other table
const contactEmail = req.body.email || "";
const imageUrls = req.body.imageUrls.split("|") || [];
console.log(imageUrls);
realEstate.balcony = balcony;
realEstate.elevator = elevator;
realEstate.newBuilding = newBuilding;

7
app/public/main.css
View File

@@ -164,7 +164,6 @@ h3 {
}
.custom-col {
width: 18%;
margin-left: auto;
left: auto;
right: auto;
@@ -175,7 +174,11 @@ h3 {
border-radius: 10px;
border: 4px dashed #02adba;
border-image: none;
max-width: 500px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.dz-progress {
display: none;
}

2
app/views/layout.ejs
View File

@@ -21,7 +21,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
Dropzone.autoDiscover = false;
</script>
<meta charset="UTF-8" />

7
app/views/publishAdditionalData.ejs
View File

@@ -1,7 +1,7 @@
<br>
<div class="row">
<% for (const input of additionalInputInputs){ %>
<div class="input-field col s3 m4 l5">
<div class="input-field col s12">
<textarea
id="<%= input.dbField %>"
form="publishForm"
@@ -15,9 +15,10 @@
</div>
<br>
<div class="row">
<% for (const input of additionalBooleanPublishInputs){ %>
<p>
<p class="col s6 m4 l4">
<label class="checkbox-label">
<input type="checkbox" class="filled-in" name="<%= input.dbField %>"
<% if (additionalBooleanPublishValues[input.dbField]) { %>
@@ -27,7 +28,7 @@
</label>
</p>
<% } %>
</div>
<br>
<% for (const input of additionalSegmentSelectInputs){ %>
<div>

2
app/views/publishBasicData.ejs
View File

@@ -1,7 +1,7 @@
<br>
<div class="row" id="basic-inputs">
<% for (const input of basicInputInputs){ %>
<div class="input-field col s3 m4 l5">
<div class="input-field col s10 m5 l4">
<input
id="<%= input.dbField %>"
name="<%= input.dbField %>"

108
app/views/publishPhotos.ejs
View File

@@ -1,111 +1,15 @@
<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>
<br>
<div class="row center-align">
<button id="test" class="welcome-center-button waves-effect waves-light btn col s4">UPLOAD</button>
</div>
<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>

107
app/views/publishRealEstate.ejs
View File

@@ -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();
};
});
});

9
index.js
View File

@@ -61,14 +61,13 @@ setInterval(checkUpNotify, 1000 * 60 * 60 * 24);
const PROJECT_ID = "marketalarm";
const KEY_FILENAME = ""; //relative path
const BUCKET_NAME = "marketalarm-photos";
//Tried implicitly creating with env credentials and direktcly as here
const storage = new Storage();
const bucket = storage.bucket(BUCKET_NAME);
app.get("/generateSignedURL", (req, res) => {
async function generateSignedUrl() {
console.log("Started server function!");
// console.log("Started server function!");
const options = {
//Tried to define Google ID and private key while debugging
@@ -79,12 +78,12 @@ app.get("/generateSignedURL", (req, res) => {
};
const filename = req.query.filename;
console.log("Filename: ", filename);
console.log("Bucket name:", bucket.name);
// console.log("Filename: ", filename);
// console.log("Bucket name:", bucket.name);
const [url] = await bucket.file(filename).getSignedUrl(options);
console.log(`The signed url is ${url}.`);
//console.log(`The signed url is ${url}.`);
res.status(200).send(url);
}