Attempting to allow users to upload an image to an infowindow, google maps api

Question

Just doing a bit of a university GIS project at the moment which allows users to take photos of birds they've seen and upload them with a marker on a google map in the place in which they found them.

I've managed to get the geolocation, add the marker and a clickable infoWindow but does anyone have any idea of how to allow a user to upload a photo within this infowindow?

Also how I should go about storing them so they stay on the map after the user has uploaded them?

I've included my code and an image of what I have so far!

Any help whatsoever would be hugely appreciated, I feel like i'm tearing my hair out with it.

Cheers,

Laura

<script>

  //The user will be prompted to give consent to geolocation.

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    var marker = new google.maps.Marker({map: map, draggable: true});

    //HTML5 geolocation.

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        marker.setPosition(pos);
        map.setCenter(pos);
        }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });

    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, marker, map.getCenter());
    }
    // Create the info window content   
var infoWindowContent = '<div class="info_content">' +
    "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
             "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
             "<tr><td>Type:</td> <td><select id='type'>" +
             "<option value='bird' SELECTED>bird</option>" +
             "<option value='bird'>bird</option>" +
             "</select> </td></tr>" +
             "<tr><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>" +
             "<tr><td><input type='button' value='Add Image' onclick='saveData()'/></td></tr>"; +

'</div>';



   // Display our info window when the marker is clicked
    var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
});
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
}); 

  }

  function handleLocationError(browserHasGeolocation, marker, pos) {
    marker.setPosition(pos);
    marker.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }


    </script>

https://i.stack.imgur.com/156UQ.png