finish

function.js

@@ -16,6 +16,7 @@ function myFunction() {
 }
 
 //display image
+/*
 function readURL(input) {
     if (input.files && input.files[0]) {
         var reader = new FileReader();
@@ -30,7 +31,7 @@ function readURL(input) {
 $("#imageUpload").change(function() {
     readURL(this);
 });
-
+*/
 //display input from database
 $(document).ready(function() {
   $.ajax({
@@ -62,5 +63,34 @@ $(document).ready(function() {
   });	  
 });
 
+//upload image
+$(document).ready(function() {
+  $('#imageUpload').change(function() {
+    var fd = new FormData();
+    var files = $('#imageUpload')[0].files[0];
+    fd.append('file',files);
+    $.ajax({
+      url: 'test.php',
+      type: 'POST',
+      data: fd,
+      contentType: false,
+      processData: false,
+      success: function(data) {
+        $('#imagePreview').css('background-image', 'url('+data +')');
+        $('#imagePreview').hide();
+        $('#imagePreview').fadeIn(650);
+      }    
+    });
+  });
+});
 
-
+//display image
+$(document).ready(function() {
+  $.ajax({
+    type: "POST",
+    url: "avatar-display.php",
+    success: function(data) {
+      $('#imagePreview').css('background-image', 'url('+data +')');
+    }	  
+  });
+});

function1.js

@@ -43,3 +43,6 @@ $("#delete-button").click(function() {
     }
   });
 });
+
+//upload image
+

index.php

@@ -26,7 +26,8 @@ if(!isset($_SESSION['loggedin'])) {
 	  <div class="list-card">
              <div class="avatar-upload">
               <div class="avatar-edit">
-                  <input type="file" accept="image/gif, image/jpeg, image/png" id="imageUpload" onchange="readURL(this);">
+		  <!--<input type="file" accept="image/gif, image/jpeg, image/png" id="imageUpload" onchange="readURL(this);">-->
+                  <input type="file" accept="image/gif, image/jpeg, image/png" id="imageUpload" name="image">
                   <label for="imageUpload"></label>
               </div>
               <div class="avatar-preview">
@@ -34,7 +35,6 @@ if(!isset($_SESSION['loggedin'])) {
               </div>
 	    </div>
           </div>
-
           <div class="task-card">
             <div class="extra-content" id="extraContent">
                 <a href="javascript:window.print()"><i class="glyphicon glyphicon-print"></i> Print List</a>
@@ -52,7 +52,6 @@ if(!isset($_SESSION['loggedin'])) {
             
             <form action="dbconnection.php" method="POST" id="addAction">
               <input type="text" id="add-task" onkeypress="return event.keyCode != 13" name="add-task" placeholder="Add tasks..." autocomplete="off">
-              <!--<input type="submit" class="add-button" id="add" onclick="insert(); addRow(); onFormSubmit();" name="add-button" value="Add">-->
       	      <input type="submit" class="add-button" id="add" onkeypress="return searchKeyPress(event);" name="add-button" value="Add">
 	   </form>
            <form class="task-board card" class="list" id="form">

index_php.php

-<?php
-  if(isset($_POST['logout'])) {
-    session_name($user);
-    session_destroy();
-    header('Location: login_page.php');
-    exit;
-  }
-
-  if(isset($_POST['add-button'])){
-    $addTask = $_POST['add-task'];
-    $file = fopen("taskList.txt","a+") or die("Unable to open file");
-    $s = $addTask."\r\n";
-    fputs($file,$s) or die("Unable to open save");
-    fclose($file);
-    header('Location: index.php');
-  }
-
-?>

upload.js

-function readURL(input) {
-    if (input.files && input.files[0]) {
-        var reader = new FileReader();
-        reader.onload = function(e) {
-            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
-            $('#imagePreview').hide();
-            $('#imagePreview').fadeIn(650);
-        }
-        reader.readAsDataURL(input.files[0]);
-    }
-}
-$("#imageUpload").change(function() {
-    readURL(this);
-});

upload.php

 <?php
-$uploads_dir = "/var/www/html/to-do-list/uploads/";
-$target_file = $uploads_dir . basename($_FILES["fileToUpload"]["name"]);
-
-$uploadOk = 1;
-$imageFileType = strtolower(pathinfo($target_file, PATHINO_EXTENSION));
-
-if (isset($_POST["submit"])) {
-  // check if image file is an actual image
-  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
-  if ($check == false) {
-  echo "File is not an image";	  
-  $uploadOk = 0;
+  session_start();
+  if(is_uploaded_file($_FILES['file']['tmp_name'])) {
+    $sourcePath = $_FILES['file']['tmp_name'];
+    $targetPath = "upload/".basename($_SESSION['name'].'.'.end((explode(".", $_FILES['file']['name']))));
+    if(move_uploaded_file($sourcePath, $targetPath)) {
+      $_SESSION['avatar'] = $targetPath;
+      echo $targetPath;
     }
-
-  // check file size
-  if ($_FILES["fileToUpload"]["size"] > 500000) {
-    echo "File is too large";
-    $uploadOk = 0;
   }
-
-  // allow certain file format
-  if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
-    echo "Only JPG, JPEG, PNG & GIF files are allowed";
-    $uploadOk = 0;
-  }
-  if ($uploadOk == 0) {	  
-    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
-      echo "your file is uploaded successfully yayyy";
-    }  
-  }
-}
-
 ?>