eckertnoah
/
spinn_mit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added upload function

master
Marlon Portmann 2022-11-15 13:18:14 +01:00
parent f365ca3592
commit 0e5f580c74
3 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/style.css
View File

@ -47,3 +47,23 @@ h1 {
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
.image-preview ._list {
padding-top: 20px;
}
.image-preview ._item {
padding: 0 0 10px;
display: inline-block;
text-align: center;
vertical-align: top;
width: 100px;
word-break: break-word;
font-size: 12px;
line-height: normal;
}
.image-preview ._item img {
display: block;
width: 80px;
height: 80px;
padding: 0 10px 6px;
}

21
index.php
View File

@ -12,6 +12,19 @@ dbVerbindungErzeugen()
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPINN MIT!</title> <title>SPINN MIT!</title>
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<script>UPLOADCARE_LOCALE="de"
UPLOADCARE_LOCALE_TRANSLATIONS = {
buttons: {
choose: {
files: {
other: 'Bild hochladen'
}
}
}
}</script>
</head> </head>
<body> <body>
<h1>spinn mit!!</h1> <h1>spinn mit!!</h1>
@ -26,14 +39,20 @@ dbVerbindungErzeugen()
<div id="idee_container"> <div id="idee_container">
<img src="/images/cancel.png" id="cancel"> <img src="/images/cancel.png" id="cancel">
<div id="idee"> <div id="idee">
</div>
<div class="image-preview" id="image-upload">
</div> </div>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
<script src="js/functions.js"></script> <script src="js/functions.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

40
js/functions.js
View File

@ -39,6 +39,8 @@ $(document).ready(function(){
// idee laden // idee laden
function ideeAnzeigen(data) { function ideeAnzeigen(data) {
document.getElementById("idee").innerHTML = ""; document.getElementById("idee").innerHTML = "";
@ -151,6 +153,29 @@ function kommentarErstellen(idee_id) {
}); });
}; };
/* function installWidgetPreviewMultiple(widget, list) {
widget.onChange(function(fileGroup) {
list.empty()
if (fileGroup) {
$.when.apply(null, fileGroup.files()).done(function() {
$.each(arguments, function(i, fileInfo) {
var src = fileInfo.cdnUrl + '-/scale_crop/160x160/center/'
list.append($('<div/>', {class: '_item'}).append([$('<img/>', {src: src}), fileInfo.name]))
})
})
}
})
}
$(function() {
$('.image-preview').each(function() {
installWidgetPreviewMultiple(uploadcare.MultipleWidget($(this).children('input')), $(this).children('._list'))
})
})
*/
// Idee formular erstellen // Idee formular erstellen
function formularErstellen(koordianten) { function formularErstellen(koordianten) {
@ -202,6 +227,21 @@ function formularErstellen(koordianten) {
document.getElementById("form").appendChild(submit_input); document.getElementById("form").appendChild(submit_input);
document.getElementById("form").appendChild(koordinaten_lat); document.getElementById("form").appendChild(koordinaten_lat);
document.getElementById("form").appendChild(koordinaten_lng); document.getElementById("form").appendChild(koordinaten_lng);
document.getElementById("image-upload").innerHTML = '<input type="hidden" role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="true" data-images-only data-public- data-clearable data-tabs="file camera" data-image-shrink: "1024x1024" data-system-dialog="false"/>';
// get a widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true});
// listen to the "upload completed" event
widget.onUploadComplete(fileGroupInfo => {
// get a information about uploaded group
// check https://uploadcare.com/docs/file-uploader-api/file-groups/#file-group-info
for (var i = 0; i < fileGroupInfo.count; i++) {
console.log("https://ucarecdn.com/" + fileGroupInfo.uuid + "/nth/" + i + "/-/preview/-/quality/smart/-/format/auto/");
}
});
}; };