I'm building a web page for buying and selling used music gear. I'm trying to implement the ability to add a thumbnail image for the item when making a new item posting. I have everything working in terms of sending the items name, price, description, location and contact information to my SQL database and storing the info by converting it to JSON in my AngularJs then sending that to Java/JDBC. I can also retrieve the data and display it on a "current postings" page. However, i'm not sure what to do to send an image with my JSON to my back end to be stored in my DB. I tried adding a BLOB to my Java constructor but it seems that always comes back NULL. Here is some of my code.
My HTML
<form name="insertItem">
<div class="container">
<div class="card">
<div class="card-header">
<h4>Create New Posting</h4>
<button type="button" ng-click="createItem()"
class="btn btn-success">Create Posting</button>
<p>
<span class="text-warning" ng-bind="createStatus"></span>
</p>
</div>
<div class="card-body">
<table class="table table-responive small-table">
<tr>
<td><label for="itemName">Item Name:</label><br> <input
id="name" type="text" class="form-control"
ng-model="newItem.itemName"></td>
</tr>
<tr>
<td><label for="itemCat">Category:</label><br> <select
id="cat" class="form-control"
ng-options="value for value in itemCat"
ng-model="newItem.itemCat">
</select></td>
</tr>
<tr>
<td><label for="price">Price $:</label><br> <input
type="number" class="form-control" name="price"
ng-model="newItem.itemPrice"></td>
</tr>
<tr>
<td><label for="itemDesc">Description:</label><br> <textarea
rows="5" id="desc" class="form-control"
ng-model="newItem.itemDesc"></textarea></td>
</tr>
<tr>
<td><label for="location">Location:</label><br> <input
type="text" class="form-control" id="loc"
ng-model="newItem.location"></td>
</tr>
<tr>
<td><label for="contact">Contact Info:</label><br> <input
type="text" class="form-control" id="cont"
ng-model="newItem.contact"></td>
</tr>
<tr>
<td><label for="thumbnail">Upload a Thumbnail Image:
</label><br> <input type="file" class="form-control-file border"
name="thumbnail" ng-model="newItem.thumbnail"></td>
</tr>
</table>
<ul>
<li ng-repeat="file in files">{{file.name}}</li>
</ul>
</div>
</div>
</div>
</form>
My AngularJs Post Method
musicapp.controller('itemAddController', function($scope, $http ) {
$scope.itemCat = ['Guitar', "Bass", "Drums", "Piano", "Keyboard", "Synth",
"Microphone", "Classical", "Wind", "Recording", "Software", "Amp/Speaker", "Misc"]
$scope.createItem = function() {
$scope.jsonObject = angular.toJson($scope.newItem, false);
console.log('new item: ' + $scope.jsonObject);
$http.post("/MusicApp/API/item", $scope.jsonObject)
.then(
function success(response) {
console.log('status: ' + response.status);
$scope.createStatus = 'Item Posted.';
$scope.successfulInsert = true;
},
function error(response) {
console.log('error, return status: ' + response.status);
$scope.createStatus = 'insert error, ' + response.data.message;
}
);
};
})
My Jersey Post
@POST
@Produces(MediaType.APPLICATION_JSON)
public List<item> insert(item newItem) {
return service.insert(newItem);
}
My JDBC code
private final static String addItems = "INSERT INTO item "
+ "(itemName, itemCat, itemPrice, itemDesc, contact, location, thumbnail) VALUES "
+ "(?, ?, ?, ?, ?, ?, ?);";
public List<item> insert(item newItem) {
List<item> items = new ArrayList<item>();
PreparedStatement prepStatement = null;
Connection conn = MariaDbUtil.getConnection();
try {
prepStatement = conn.prepareStatement(addItems);
prepStatement.setString(1, newItem.getItemName());
prepStatement.setString(2, newItem.getItemCat());
prepStatement.setInt(3, newItem.getItemPrice());
prepStatement.setString(4, newItem.getItemDesc());
prepStatement.setString(5, newItem.getContact());
prepStatement.setString(6, newItem.getLocation());
prepStatement.setBlob(7, newItem.getThumbnail()); //Blob
prepStatement.executeUpdate();
System.out.println("Row Added " + newItem.getItemName());
newItem.setItemId(getLastKey(conn));
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (conn != null) {
conn.close();
prepStatement.close();
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
items.add(newItem);
return items;
}
