Basic structure of upload

2021-03-28 20:40:17 +02:00 · 2021-03-28 20:40:17 +02:00 · 2e065a5bad
commit 2e065a5bad
parent bbf17dffd4
26 changed files with 922 additions and 0 deletions
--- a/INSTALL.md
+++ b/INSTALL.md
@ -0,0 +1,13 @@
+# Install Chiro - Canto
+
+## Setup Database
+
+```bash
+sudo mysql
+```
+
+```sql
+CREATE DATABASE chirocanto;
+GRANT ALL ON chirocanto.* TO 'chirocanto'@'localhost' IDENTIFIED BY 'strongpassword';
+FLUSH PRIVILEGES;
+```
--- a/chiro-canto.conf
+++ b/chiro-canto.conf
@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name chiro-canto;
+    return 302 https://chiro-canto;
+}
+
+server {
+    listen 443 ssl;
+    server_name chiro-canto;    
+    root /var/www/chiro-canto/public;
+    location / {
+      
+    }
+    ssl_certificate /etc/nginx/ssl/cert.pem;
+    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
+    index index.php index.html;
+    location ~ \.php$ {
+	fastcgi_pass unix://var/run/php-fpm/www.sock;
+        fastcgi_index index.php;
+        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        include        fastcgi_params;  
+    }
+}
--- a/public/database/credentials.php
+++ b/public/database/credentials.php
@ -0,0 +1,6 @@
+<?php 
+$database = "chirocanto";
+$host = "localhost";
+$user = "chirocanto";
+$password = "jhw5ky9c21";
+?>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/footer.php
+++ b/public/footer.php
@ -0,0 +1,3 @@
+<footer>
+    © Samuel ORTION | Chiro - Canto <?=2021// - date('Y'); ?>
+</footer>
--- a/public/header.php
+++ b/public/header.php
@ -0,0 +1,9 @@
+<header>
+    <div class="container row">
+        <div class="container column">
+            <h1>Chiro - Canto</h1>
+            <h2>Bat sound sharing tools</h2>
+        </div>
+        <?php include("searchbar.php");?>
+    </div>
+</header>
--- a/public/index.php
+++ b/public/index.php
@ -0,0 +1,25 @@
+<?php
+// ini_set('display_errors', 1);
+// ini_set('display_startup_errors', 1);
+// error_reporting(E_ALL);
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chiro - Canto</title>
+    <link rel="stylesheet" type="text/css" href="styles/style.css">
+</head>
+<body>
+    <?php include("menu.php");?>
+    <?php include("header.php");?>
+    <section>
+        <h2>Last uploaded sound</h2>
+    </section>
+    <?php include("footer.php");?>
+</body>
+<script src="scripts/script.js"></script>
+</html>
--- a/public/media/icons/arrow.svg
+++ b/public/media/icons/arrow.svg
@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333333 4.2333333"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="arrow.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="17.599258"
+     inkscape:cx="-3.1566717"
+     inkscape:cy="4.519511"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 1.2945826,1.0266922 2.908231,2.1787997 1.2963016,3.4022286"
+       id="path18"
+       sodipodi:nodetypes="ccc" />
+  </g>
+</svg>
--- a/public/media/pictures/chiro.jpg
+++ b/public/media/pictures/chiro.jpg
--- a/public/media/pictures/chiro.svg
+++ b/public/media/pictures/chiro.svg
@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg899"
+   width="750"
+   height="750"
+   viewBox="0 0 750 750"
+   sodipodi:docname="chiro.svg"
+   inkscape:export-filename="/var/www/chiro-canto/public/media/pictures/favicon.png"
+   inkscape:export-xdpi="4.0960002"
+   inkscape:export-ydpi="4.0960002"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata905">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs903" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1011"
+     id="namedview901"
+     showgrid="false"
+     inkscape:zoom="0.39372674"
+     inkscape:cx="123.00961"
+     inkscape:cy="873.89687"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g907"
+     inkscape:document-rotation="0" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g907">
+    <g
+       id="g1498"
+       style="stroke-width:24.05449623;stroke-miterlimit:4;stroke-dasharray:none"
+       transform="matrix(0.83144539,0,0,0.83144539,56.198257,71.118882)">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 346.24416,419.63314 Z"
+         id="path1474" />
+      <g
+         id="g1490"
+         style="stroke-width:24.05449623;stroke-miterlimit:4;stroke-dasharray:none">
+        <g
+           id="g1480"
+           style="stroke-width:24.05449623;stroke-miterlimit:4;stroke-dasharray:none">
+          <path
+             style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 159.63295,267.28786 0.77508,17.69332 c 0,0 -131.17557,86.33815 -137.534827,197.91517 0,0 30.756366,-16.45937 61.444714,-5.33114 0,0 50.106293,-79.56051 149.528043,-53.35992 0,0 58.55793,-86.91501 112.3982,-4.57215"
+             id="path1472" />
+          <path
+             style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 346.24416,419.63314 c 3.49571,6.13676 6.99143,12.27352 10.48714,18.41028 l 6.71423,2.44884 12.98193,14.05281 10.86304,4.71803 20.92276,-36.83238 h 7.90968 v 8.42161 l 25.089,-26.90816 c 0,0 22.96731,-68.35117 87.18176,8.70945 37.08276,-4.22222 70.86407,-15.31273 141.56565,50.40489 0,0 25.81092,-12.33925 52.54736,7.71285"
+             id="path1476"
+             sodipodi:nodetypes="ccccccccccc" />
+        </g>
+        <path
+           style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 722.50671,470.77136 c 0,0 32.53113,-79.47854 -133.16812,-211.57159 l -0.0161,-20.27278 -3.34473,17.52649 -1.38182,3.77815 c 0,0 -112.80156,33.46683 -135.59717,17.05829 l -21.12495,-25.79576 c 0,0 2.27859,-34.05125 -4.17896,-28.16934 -6.45755,5.88191 -20.048,13.87989 -20.048,13.87989 0,0 -24.55364,-6.98207 -45.83841,3.94413 -21.28477,10.9262 -11.57512,-15.42279 -16.03801,-4.21283 -4.46288,11.20996 1.68677,33.55364 1.68677,33.55364 0,0 15.94711,-8.29279 0,0 -15.9471,8.2928 -22.46537,19.9203 -22.46537,19.9203 0,0 -141.07804,5.31898 -151.21847,-8.90156 -10.14042,-14.22053 -10.14042,-14.22053 -10.14042,-14.22053"
+           id="path1484" />
+      </g>
+    </g>
+    <circle
+       style="fill:none;stroke:#000000;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path1500"
+       cx="377.18402"
+       cy="377.35416"
+       r="367.11084" />
+  </g>
+</svg>
--- a/public/media/pictures/favicon.ico
+++ b/public/media/pictures/favicon.ico
--- a/public/media/pictures/favicon.png
+++ b/public/media/pictures/favicon.png
--- a/public/menu.php
+++ b/public/menu.php
@ -0,0 +1,22 @@
+<nav>
+    <ul>
+        <a href="/about">
+            <li>about</li>
+        </a>
+        <a href="/explore">
+            <li>explore</li>
+        </a>
+        <a href="/upload">
+            <li>upload</li>
+        </a>
+        <a href="/forum">
+            <li>forum</li>
+        </a>
+        <a href="/mysteries">
+            <li>mysteries</li>
+        </a>
+        <a href="/articles">
+            <li>articles</li>
+        </a>
+    </ul>
+</nav>
--- a/public/scripts/jquery/script.js
+++ b/public/scripts/jquery/script.js
--- a/public/scripts/script.js
+++ b/public/scripts/script.js
@ -0,0 +1,52 @@
+/* SHOW ELEMENT AFTER PAGE IS SCROLLED 100px */
+var win = window,
+    docEl = document.documentElement,
+    $nav = document.getElementsByTagName('nav')[0];
+
+win.onscroll = function() {
+    var sTop = (this.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
+    if (sTop > 100) {
+        $nav.classList.add("dark-theme");
+    } else {
+        $nav.classList.remove("dark-theme");
+    }
+};
+
+
+/*
+ * Link preview in nav bar
+ */
+nav = document.getElementsByTagName('nav')[0];
+navItems = nav.children[0].children;
+for (navItem of navItems) {
+    console.log(navItem);
+    navItem.addEventListener('mouseover', function() {
+        displayPreview(this);
+    });
+    navItem.addEventListener('mouseleave', function() {
+        hidePreview();
+    })
+}
+
+let iframe = document.createElement('iframe');
+iframe.style.display = "none";
+nav.appendChild(iframe);
+
+function displayPreview(navItem) {
+    let url = navItem.href;
+    // console.log(url);
+    iframe.src = url;
+    iframe.id = "previewFrame";
+    iframe.style.width = "600px";
+    iframe.style.height = "600px";
+    iframe.style.display = "block";
+    iframe.style.position = "fixed";
+    var x = event.clientX;
+    // var y = event.clientY;
+    iframe.style.top = 5 + 'em';
+    iframe.style.left = (x - 50) + 'px';
+}
+
+function hidePreview() {
+    iframe.style.display = "none";
+}
--- a/public/searchbar.php
+++ b/public/searchbar.php
@ -0,0 +1,4 @@
+<form id="searchbar" action="/search">
+    <input type="text" placeholder="Search recordings.." required>
+    <input type="submit" value="Search">
+</form>
--- a/public/styles/style.css
+++ b/public/styles/style.css
@ -0,0 +1,238 @@
+* {
+  align-self: baseline;
+}
+
+body{
+  margin: 0;
+  background-color: white;
+}
+
+header {
+  text-align: right;
+  padding: 0;
+  margin-top: 1em;
+}
+
+header .container {
+  display: flex;
+  justify-content: space-between;
+}
+
+header h1 {
+  font-size: 4em;
+  padding: 0;
+  margin: 0;
+}
+
+section{
+  padding: 1em;
+  min-height: 100vh;
+  width: 50vw;
+  text-align: left;
+  margin: auto;
+}
+
+article {
+  width: 50vw;
+  text-align: left;
+  margin: auto;
+}
+
+article h1  {
+  font-size: 5em;
+}
+
+footer {
+  color: white;
+  text-align: center;
+  background-color: rgba(0,0,0, 0.8);
+  padding: 0.5em;
+}
+
+footer a {
+  text-decoration: none;
+}
+
+
+footer img {
+  height: 1em;
+}
+
+label {
+  width: 40em;
+  display: inline;
+}
+label span.info {
+  display: none;
+}
+
+label:hover span.info {
+  display: inline-block;
+  position: relative;
+  background: yellow;
+  padding: 0.5em;
+  border-radius: 5px;
+}
+
+input {
+  margin: 0.1em;
+}
+
+/* Style inputs with type="text", select elements and textareas */
+input[type=text], input[type=email], input[type=url], select, textarea {
+  width: 100%; /* Full width */
+  padding: 12px; /* Some padding */ 
+  border: 1px solid #ccc; /* Gray border */
+  border-radius: 4px; /* Rounded borders */
+  box-sizing: border-box; /* Make sure that padding and width stays in place */
+  margin-top: 6px; /* Add a top margin */
+  margin-bottom: 16px; /* Bottom margin */
+  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
+}
+
+/* Style the submit button with a specific background color etc */
+input[type=submit] {
+  background-color: #4CAF50;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type=reset] {
+  background-color: #af4c4c;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* When moving the mouse over the submit button, add a darker green color */
+input[type=submit]:hover {
+  background-color: #45a049;
+}
+
+/* When moving the mouse over the reset button, add a darker red color */
+input[type=reset]:hover {
+  background-color: #923737;
+}
+
+
+/* Add a background color and some padding around the form */
+.container {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 20px;
+}
+
+nav {
+  border-bottom: 1px solid black;
+  position: flex;
+  display: block;
+  width: 100vw;
+  background-color: white;
+  z-index: 10;
+}
+
+nav.dark-theme {
+  background: black;
+}
+
+nav.dark-theme ul li {
+  color: white;
+}
+
+nav ul {
+  display: flex;
+  flex-direction: row;
+}
+
+nav ul a {
+  text-decoration: none;   
+}
+
+nav ul li {
+  list-style: none;
+  color: black;
+  margin: 0.5em;
+}
+
+iframe::parent {
+  padding: 0;
+  margin: 0;
+}
+
+iframe {
+  width: 100%;
+  height: 750px;  
+}
+
+#previewFrame {
+  width: 300px;
+  height: 200px;
+  resize: both; 
+  zoom: 0.2;
+  -moz-transform: scale(0.5);
+  -moz-transform-origin: 0 0;
+  -o-transform: scale(0.5);
+  -o-transform-origin: 0 0;
+  -webkit-transform: scale(0.5);
+  -webkit-transform-origin: 0 0;
+}
+iframe html body { 
+  font-size: 0.1em;
+}
+
+.container {
+  display: flex;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.container.row {
+  flex-direction: row;
+}
+
+.container.column {
+  flex-direction: column;
+}
+
+h3, p{
+  padding: 1em;
+  width: 15em;
+}
+
+p.large {
+  width: auto;
+}
+
+#searchbar {
+  display: flex;
+  flex-direction: row;
+  align-self: right;
+}
+
+ul.breadcrumb {
+  display: flex;
+  flex-basis: row;
+}
+
+ul.breadcrumb li {
+  list-style: url("/media/icons/arrow.svg");
+  margin-left: 2em;
+}
+
+ul.breadcrumb li.active {
+  font-weight: bold;
+}
+
+div.coordinates {
+  display: flex;
+  flex-direction: row;
+}
+
+div.coordinates input[type="text"] {
+  width: 25em;
+}
--- a/public/upload/characteristics.php
+++ b/public/upload/characteristics.php
--- a/public/upload/index.php
+++ b/public/upload/index.php
@ -0,0 +1,56 @@
+<?php
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+session_start();
+
+$root = realpath($_SERVER["DOCUMENT_ROOT"]);
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload | Chiro - Canto</title>
+    <link rel="stylesheet" type="text/css" href="/styles/style.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+   crossorigin=""/>
+</head>
+<body>
+<?php include("$root/menu.php");?>
+<?php include("$root/header.php");?>
+    <section>
+        <h2>Upload Your Recording</h2>
+        <?php
+        echo $_SESSION['error_msg'];
+        if (isset($_SESSION['error_msg']))
+        {
+            ?> 
+            <div class="error">
+                <?=$_SESSION['error_msg']?>
+            </div>
+            <?php
+        }
+        if (isset($_GET['step'])) 
+        {
+            if ($_GET['step'] == 'location') {
+                include("location.php");
+            } else if ($_GET['step'] == 'metadata') {
+                include("metadata.php");
+            } else if ($_GET['step'] == 'verify') {
+                include("verify.php");
+            }
+            else {
+                include("location.php");
+            }
+        } else {
+            include("location.php");
+        }
+        ?>
+    </section>
+<?php include("$root/footer.php");?>
+</body>
+<script type='text/javascript' src='/scripts/script.js'></script>
+</html>
--- a/public/upload/location.php
+++ b/public/upload/location.php
@ -0,0 +1,20 @@
+<ul class="breadcrumb">
+    <li class="active">Location</li>
+    <li>Metadata</li>
+    <li>Verify</li>
+</ul>
+
+<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
+
+<form action="submitlocation.php" method="post">
+    <label for="latlng">Coordinates</label>
+    <div class="coordinates">
+        <input type="text" id="latlng" name="latlng">
+        <input type="submit" value="Submit">
+    </div>
+</form>
+<script type='text/javascript' src='/scripts/jquery/script.js'></script>
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+   crossorigin=""></script>
+<script src="scripts/map.js"></script>
--- a/public/upload/metadata.php
+++ b/public/upload/metadata.php
--- a/public/upload/scripts/map.js
+++ b/public/upload/scripts/map.js
@ -0,0 +1,28 @@
+var mymap = L.map('map').setView([51.505, -0.09], 13);
+L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    maxZoom: 18,
+    id: 'mapbox/streets-v11',
+    tileSize: 512,
+    zoomOffset: -1,
+    accessToken: 'pk.eyJ1IjoidW5jbGVzYW11bHVzIiwiYSI6ImNrbXQwNDl5MTBtc2gybm82b3c0M3VoNncifQ.qUqAuCuMDF38NcyrAC1RJQ'
+}).addTo(mymap);
+
+var marker = L.marker([0, 0], draggable=true).addTo(mymap);
+
+var LatLng = marker.getLatLng();
+
+let coordinates_input = document.getElementById('latlng');
+
+
+
+function onMapClick(e) {
+    marker.setLatLng(e.latlng);
+    LatLng = marker.getLatLng();
+    // console.log(LatLng);
+    lat = LatLng['lat'];
+    lng = LatLng['lng'];
+    coordinates_input.value = lat + ', ' + lng;
+}
+
+mymap.on('click', onMapClick);
--- a/public/upload/submitlocation.php
+++ b/public/upload/submitlocation.php
@ -0,0 +1,15 @@
+<?php
+session_start();
+$_SESSION['error_msg'] = "";
+
+if (isset($_POST['latlng'])) {
+	$_SESSION['observation']['latlng'] = $_POST['latlng'];
+} else {
+	$_SESSION['error_msg'].= "Incorrect coordinates, please try again.";
+}
+
+if ($_SESSION['error_msg'] == "") {
+	header('Location: '.'index.php?step=metadata');
+} else {
+	header('Location: '.'index.php?step=location');
+}
--- a/public/upload/submitmetadata.php
+++ b/public/upload/submitmetadata.php
@ -0,0 +1,113 @@
+<?php
+session_start();
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+$root = realpath($_SERVER["DOCUMENT_ROOT"]);
+$target_dir = root."/storage/records";
+$fileName = $_FILES['file']['name'];
+$target_file = $target_dir.basename($_FILES['file']['name']);
+$uploadOk = 1;
+$fileSize = $_FILES['file']['size'];
+$fileExtension = strtolower(end(explode('.', $fileName)));
+$_SESSION['error_msg'] = "Form not submitted.\n";
+
+if (isset($_POST['submit']))
+{
+    // /!\ Need to check if it is .wav.
+    $file_extension_allowed = ['wav'];
+    if (! in_array($fileExtension, $file_extension_allowed))
+    {
+        $_SESSION['error_msg'] .= "This file extension is not allowed; please upload a WAV file.\n";
+    }
+    if ($fileSize > 10000000) 
+    {
+        $_SESSION['error_msg'] .= "The file size must be below 10MB. \n";
+    }
+    if (move_uploaded_file($_FILES['file']['tmp_name'], $target_file)) 
+    {
+        echo "The file ". htmlspecialchars(basename($_FILES['file']['name']))." has been uploaded.";
+    } else {
+        echo "Sorry, there was an error uploading your file";
+    }
+    $_SESSION['observation']['file'] = basename($_FILES['file']['name']);
+    
+    $_SESSION['error_msg'] = "";
+
+    if (isset($_POST['species'])) 
+    {
+        $_SESSION['observation']['species'] = $_POST['species'];
+    } else 
+    {
+        $_SESSION['error_msg'].= "Error, incorrect species name.\n";
+    }
+    if (isset($_POST['subspecies']))
+    {
+        $_SESSION['observation']['subspecies'] = $_POST['subspecies'];
+    } else 
+    {
+        $_SESSION['observation']['subspecies'] = "";
+    }
+    if (isset($_POST['recording-license']))
+    {
+        $_SESSION['observation']['license'] = $_POST['recording-license'];
+    } else 
+    {
+        $_SESSION['error_msg'] .= "Incorrect license\n";
+    }
+    if (isset($_POST['name'])) 
+    {
+        $_SESSION['observation']['name'] = $_POST['name'];
+    } else {
+        $_SESSION['error_msg'] .= "Incorrect Recordist Name.\n";
+    }
+    if (isset($_POST['loc-country']))
+    {
+        $_SESSION['observation']['country'] = $_POST['loc-country'];
+    } else 
+    {
+        $_SESSION['error_msg'] .= "Incorrect Country. \n";
+    }
+    if (isset($_POST['recording-date']))
+    {
+        $_SESSION['observation']['date'] = $_POST['recording-date'];
+    } else 
+    {
+        $_SESSION['error_msg'] .= "Incorrect date. \n";
+    }
+    if (isset($_POST['recording-time']))
+    {
+        $_SESSION['observation']['time'] = $_POST['recording-time'];
+    } else 
+    {
+        $_SESSION['error_msg'] .= "Incorrect time. \n";
+    }
+    if (isset($_POST['sound-type-option'])) 
+    {
+        $_SESSION['observation']['type'] = $_POST['sound-type-option'];
+    } else 
+    {
+        $_SESSION['error_msg'] .= "Incorrect sound type. \n";
+    }
+    if (isset($_POST['quality']))
+    {
+        $_SESSION['observation']['quality'] = $_POST['quality'];
+    } else
+    {
+        $_SESSION['error_msg'] .= "Incorrect quality value.\n";
+    }
+    if (isset($_POST['remarks']))
+    {
+        $_SESSION['observation']['remarks'] = $_POST['remarks'];
+    }
+}
+
+
+if ($_SESSION['error_msg'] == "") 
+{
+    header('Location: '.'index.php?step=verify');
+} else{
+    $_SESSION['error_msg'] .= "Please try again.\n";
+    header('Location: '.'index.php?step=metadata');
+}
+
--- a/public/upload/submitobservation.php
+++ b/public/upload/submitobservation.php
@ -0,0 +1,25 @@
+<?php
+session_start();
+$root = realpath($_SERVER["DOCUMENT_ROOT"]);
+require($root."/database/credentials.php");
+
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+// Connect the database
+try{
+	$db = new PDO("mysql:host=$host;dbname=$database;charset=utf8", 
+		$user, 
+		$password, 
+		array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
+		));
+}catch (Exception $e){
+	die("Error : ".$e->getMessage());
+}
+
+/* Create Table if not exists */
+$req = $db->prepare('CREATE TABLE IF NOT EXISTS golden_book ( `id` INT NOT NULL AUTO_INCREMENT , `firstname` VARCHAR(25) NOT NULL , `lastname` VARCHAR(25) NOT NULL , `email` VARCHAR(125) NOT NULL, `date` DATE NOT NULL DEFAULT CURRENT_TIMESTAMP , `message` TEXT NOT NULL , `website` VARCHAR(125) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;');
+$req->execute();
+
+?>
--- a/public/upload/verify.php
+++ b/public/upload/verify.php
@ -0,0 +1,58 @@
+<ul class="breadcrumb">
+    <li>Location</li>
+    <li>Metadata</li>
+    <li class="active">Verify</li>
+</ul>
+
+<h2>Recording data</h2>
+
+<table class="key-value">
+    <tbody><tr>
+    <td>File</td>
+    <td><?=$_SESSION['observation']['file']?></td>
+    </tr>
+    <tr>
+    <td>Species</td>
+    <td><!--<span class="common-name">European Robin</span>--> <span class="sci-name">(<?=$_SESSION['observation']['species']?>)</span> </td>
+    </tr>
+    <tr>
+    <td>Subspecies</td>
+    <td><?=$_SESSION['observation']['subspecies']?></td>
+    </tr>
+    <tr>
+    <td>License</td>
+    <td><a href="//creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">Creative Commons Attribution-NonCommercial-ShareAlike 4.0</a></td>
+    </tr>
+    <tr>
+    <td>Recordist</td>
+    <td><?=$_SESSION['observation']['name']?></td>
+    </tr>
+    <tr>
+    <td>Date</td>
+    <td><?=$_SESSION['observation']['date']?></td>
+    </tr>
+    <tr>
+    <td>Time</td>
+    <td><?=$_SESSION['observation']['time']?></td>
+    </tr>
+    <tr>
+    <!-- <td>Elevation</td>
+    <td>50 meters</td>
+    -->
+    </tr>
+    <tr>
+    <!-- <td>Background species</td>
+    <td><ul><li><span class="common-name">Common Chaffinch</span> <span class="sci-name">(Fringilla coelebs)</span></li></ul></td> -->
+    </tr>
+    <tr>
+    <tr>
+    <td>Quality</td>
+    <td><?$_SESSION['observation']['quality']?></td>
+    </tr>
+    <tr>
+    <td>Remarks</td>
+    <td><?=$_SESSION['observation']['remarks'] == "" ? '<span class="unspecified">None given</span>' : $_SESSION['observation']['remarks'] ?></td>
+    </tr>
+    </tbody></table>
+<h2>Location</h2>
+