From 0e5f580c74883f876fdcee5c7870c58168ae8893 Mon Sep 17 00:00:00 2001
From: Marlon Portmann <>
Date: Tue, 15 Nov 2022 13:18:14 +0100
Subject: [PATCH] added upload function

---
 css/style.css   | 20 ++++++++++++++++++++
 index.php       | 21 ++++++++++++++++++++-
 js/functions.js | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
diff --git a/css/style.css b/css/style.css
index 978394f..1dc3b10 100644
--- a/css/style.css
+++ b/css/style.css
@@ -47,3 +47,23 @@ h1 {
   width: 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;
+}
diff --git a/index.php b/index.php
index 26161eb..3926fab 100644
--- a/index.php
+++ b/index.php
@@ -12,6 +12,19 @@ dbVerbindungErzeugen()
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SPINN MIT!</title>
     <link rel="stylesheet" href="/css/style.css">
+
+
+  <script>UPLOADCARE_LOCALE="de"
+  UPLOADCARE_LOCALE_TRANSLATIONS = {
+    buttons: {
+      choose: {
+        files: {
+            other: 'Bild hochladen'
+        }
+      }
+    }
+  }</script>
+
 </head>
 <body>
     <h1>spinn mit!!</h1>
@@ -26,14 +39,20 @@ dbVerbindungErzeugen()
 
     <div id="idee_container">
       <img src="/images/cancel.png" id="cancel">
-      
+
       <div id="idee">
 
+
+      </div>
+      <div class="image-preview" id="image-upload">
       </div>
     </div>
 
 
     <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/main.js"></script>
diff --git a/js/functions.js b/js/functions.js
index 171a356..45072fc 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -39,6 +39,8 @@ $(document).ready(function(){
 
 // idee laden
 
+
+
 function ideeAnzeigen(data) {
 
   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
 function formularErstellen(koordianten) {
 
@@ -202,6 +227,21 @@ function formularErstellen(koordianten) {
   document.getElementById("form").appendChild(submit_input);
   document.getElementById("form").appendChild(koordinaten_lat);
   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/");
+    }
+  });
 };
 
 
