Wrzucenie nazwy obrazka do bazy danych

Cześć, potrzebuję zrobić takie coś
Mam obrazek który po kliknięciu powinien swoją nazwę przesłać do bazy danych

Na przykład mam obrazek kwiatka który jest nazywany kwiatek.png po kliknięciu na obrazek pobieram jego nazwę kwiatek i wrzucam do bazy danych.

Pobieranie nazwy w JS

      function getName() {
      var fullPath = document.getElementById("img1").src;
     
      var filename = fullPath.split("/").pop();
      $scope.addnew(filename); 

    //tutaj sprawdzam czy pobiera mi nazwę i wrzucam ją do inputa ( dla testu )
    document.getElementById("result").value = filename;
 }

            <img src="img\kwiatek.png" onclick="getName()" id="img1" />
            <input type="text" id="result"/>

I to działa - pobiera mi nazwę i wrzuca w input

Dalej mam wrzucanie rzeczy do bazy danych.
username nas nie interesuje bo to jest odpowiedzialne za wrzucanie do bazy imienia.

    $scope.addnew = function(filename) {
        $http.post('addtodb.php',{'username' : $scope.username, 'filename' : filename}
        ).success(function (data, status, headers, config) {
        });
    }

Plik addtodb.php

$data = json_decode(file_get_contents("php://input")); 
$username = $data->username;    
$filename = $data->filename;

$result = $db->query("INSERT INTO test(filename,username) values('$filename','$username')");

Niestety coś mi nie działa i nie mogę tego "filename" wrzucić do bazy danych. W bazie pole to zwykły varchar (255)

Ale co konkretnie nie działa i dlaczego nie możesz wrzucić go do bazy? Dostajesz jakiś błąd po stronie JS'a / skryptu w PHP / w bazie danych? Najłatwiej to po prostu użyj debuggera i sprawdź jaką wartość pod filename dostajesz w tym skrypcie addtodb.php i jeśli jest prawidłowa to tam trzeba będzie rozwiązać ten problem.

Poza tym masz mocno pomieszany kod. To znaczy niby używasz angulara, ale nie korzystasz z niego w pełni. W templatce mógłbyś używać dyrektywy ng-click, a w inpucie modelu i nie trzeba by było za każdym razem pobierać elementu po id tylko faktycznie korzystać z zalet frameworka.

Prawdę mówiąc uczę się dopiero angulara i najchętniej to bym wszystko w nim zrobił pomijając javascript ale nie do końca wiem jak pobierać nazwę obrazka. Zaraz spróbuję debugger odpalić.

Używanie czystego JS'a jest jak najbardziej dobre. Tylko jak już zaciągasz i używasz framework taki jak Angular, to warto byłoby go używać już w pełni, a nie tylko do jednej funkcji.

Taki error mi konsola wyrzuca

Uncaught ReferenceError: $scope is not defined
    at getName (index.php:165)
    at HTMLImageElement.onclick (index.php:17)
getName @ index.php:165
onclick @ index.php:17

Linia 165

$scope.addnew(filename); 

Linia 17 - tutaj mam jeszcze dodany modal z angulara którym pobieram username ( to działa )

 <img src="img\kwiatek.png" onclick="getName()" id="img1" class="modal-trigger" href="#modal1" />