bilder hochladen und anzeigen funktioniert!

css/style.css

@@ -48,7 +48,7 @@ h1 {
   height: 60px;
 }
 
-<<<<<<< HEAD
+
 p.commentText{
   display: inline-block;
   padding-right: 20px;
@@ -63,7 +63,7 @@ img.commentLike{
   width: 15px;
   display: inline-block;
 }
-=======
+
 .image-preview ._list {
   padding-top: 20px;
 }
@@ -83,4 +83,4 @@ img.commentLike{
   height: 80px;
   padding: 0 10px 6px;
 }
->>>>>>> 0e5f580c74883f876fdcee5c7870c58168ae8893
+

js/functions.js

@@ -1,33 +1,7 @@
 
 
-/* ideeSpeichern();
-function ideeSpeichern(titel, inhalt) {
-
-let  url = "system/ideeSpeichern.php";
-let formData = new FormData();
-formData.append('titel', titel);
-formData.append('inhalt', inhalt);
-fetch(url,
-  {
-    body: formData,
-    method: "post",
-  })
-  .then((response) => {
-    return response.json();
-  })
-  .then((markerData) => {
-
-
 
 
-  }
-  .catch(function(error) {
-    console.log("error: " + error.message);
-  });
-}
-
-*/
-
 //LocalLike Objekt erstellen
 
 let localLikes = {}
@@ -138,6 +112,22 @@ function ideeAnzeigen(data) {
   likesErstellen.classList.add("likeDisplay");
   document.getElementById('idee').appendChild(likesErstellen);
 
+  if(data.bild != null){
+    let bildContainer = $("<div>").addClass("ImgContainer");
+    let imgUrlArr = JSON.parse(data.bild);
+    for (let i = 0; i < imgUrlArr.length; i++) {
+      let img = $("<img>").addClass("previewImage");
+      img.attr("src", imgUrlArr[i]);
+      img.appendTo(bildContainer);
+      
+    }
+  
+    bildContainer.prependTo($("#idee"))
+  }
+
+ 
+
+  /*
   let bild = document.createElement("img");
   bild.src = data.bild;
   bild.classList.add("ideeBilder");
@@ -145,6 +135,8 @@ function ideeAnzeigen(data) {
   document.getElementById('idee').appendChild(bild);
   console.log(data);
 
+  */
+
 
   let ideeLike = document.createElement("img");
   ideeLike.classList.add("herz");
@@ -363,6 +355,10 @@ function formularErstellen(koordianten) {
   text_input.setAttribute("type", "text");
   text_input.setAttribute("name", "text")
 
+  let image_links = document.createElement("input");
+  image_links.setAttribute("type", "hidden");
+  image_links.setAttribute("name", "bilder");
+
   let submit_input = document.createElement("input");
   submit_input.setAttribute("type", "submit");
   submit_input.setAttribute("value", "Formular Absenden");
@@ -375,6 +371,7 @@ function formularErstellen(koordianten) {
   document.getElementById("form").appendChild(submit_input);
   document.getElementById("form").appendChild(koordinaten_lat);
   document.getElementById("form").appendChild(koordinaten_lng);
+  document.getElementById("form").appendChild(image_links);
 
   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"/>';
 
@@ -386,12 +383,42 @@ function formularErstellen(koordianten) {
     // get a information about uploaded group
     // check https://uploadcare.com/docs/file-uploader-api/file-groups/#file-group-info
 
+    let linkArr = [];
+    let ImgUrl;
+
+    $("<div>").addClass("ImgPrevContainer").appendTo($("div.image-preview"));
+
     for (var i = 0; i < fileGroupInfo.count; i++) {
-      console.log("https://ucarecdn.com/" + fileGroupInfo.uuid + "/nth/" + i + "/-/preview/-/quality/smart/-/format/auto/");
-    }
+
+      ImgUrl = "https://ucarecdn.com/" + fileGroupInfo.uuid + "/nth/" + i + "/-/preview/-/quality/smart/-/format/auto/";
+      
+      linkArr.push(ImgUrl);
+
+      createImgPrev(ImgUrl + "-/resize/x100/"); //img Preview 100 pixels high
+
+
+
+      
+    };
+    
+    let linkArrString = JSON.stringify(linkArr);
+    console.log(linkArrString);
+    image_links.value = linkArrString;
+    console.log(image_links.value);
+
+
   });
+
+
 };
 
+function createImgPrev(imgURL){
+
+  let prevImg = $("<img>").addClass("prevIMG");
+  prevImg.attr('src', imgURL);
+  prevImg.appendTo($("div.ImgPrevContainer"));
+}
+
 
 
 function kommentareAnzeigen(idee_id){
@@ -464,15 +491,7 @@ function kommentareAnzeigen(idee_id){
 
 
 
-      /*
-
-      let kommentarErstellen = document.createElement("p");
-      let kommentar = document.createTextNode(commentArray[i].k_text);
-      kommentarErstellen.appendChild(kommentar);
-      kommentarErstellen.classList.add("comment");
-      document.getElementById('kommentare_container').appendChild(kommentarErstellen);
-
-      */
+  
     }
 
 

system/ideeSpeichern.php

@@ -17,9 +17,15 @@ require_once('data.php');
     $inhalt = $_POST['text'];
   }
 
-$sql = "INSERT INTO idee (titel, inhalt, koordinatenLat, koordinatenLng) VALUES (?, ?, ?, ?)";
+  if(isset($_POST['bilder'])){
+    $bilder = $_POST['bilder'];
+  }
+
+$sql = "INSERT INTO idee (titel, inhalt, koordinatenLat, koordinatenLng, bild) VALUES (?, ?, ?, ?, ?)";
 $stmt = $db->prepare($sql);
-$stmt->execute(array($titel, $inhalt, $lat, $lng));
+$stmt->execute(array($titel, $inhalt, $lat, $lng, $bilder));
+
+
 
 echo $db->lastInsertId();