I am currently coding on a project for school, which should be a picture sharing website. Spring Framework is handling the database as well as the rest interface. On the rest interface I have a RemoteImage, which represents an Image saved in the Database. I also have Getters, Setters and Cunstructors in there, but did not copied it in here.
@XmlRootElement
public class RemoteImage {
private Long id;
private String name;
private String contentType;
private byte[] content;
private Date createdAt;
private String owner;
private String camera;
private String lens;
private String aperture;
private String focalLength;
private String shutterSpeed;
private String ISO;
private String description;
private Long ownerId;
private Long categoryId;
....
In the Rest Resource I have the addImage function which converts the RemoteImage from the Rest into a Image for storing in the Database. The RemoteImage does not contain votes.
@POST
@Transactional
public void addImage(RemoteImage remoteImage) {
try {
Image image = new Image(
remoteImage.getName(),
remoteImage.getContentType(),
remoteImage.getContent(),
remoteImage.getCreatedAt(),
remoteImage.getOwner(),
remoteImage.getCamera(),
remoteImage.getLens(),
remoteImage.getAperture(),
remoteImage.getFocalLength(),
remoteImage.getFocalLength(),
remoteImage.getISO(),
remoteImage.getDescription(),
remoteImage.getOwnerId(),
remoteImage.getCategoryId()
);
service.save(image);
} catch (DataIntegrityViolationException e) {
sendError(409, "Image could not be stored. " + e.toString());
}
}
I tested this function with following Test:
@Test
public void testImageUpload() throws URISyntaxException, IOException {
login(james.getEmail(), "password");
RemoteImage image = createTestRemoteImage("test", james);
List<Image> images = r.path("image")
.header(AUTHENTICATION_HEADER, createAuthenticationHeader("kai@ima.at", "password"))
.accept(MediaType.APPLICATION_JSON)
.get(new GenericType<List<Image>>() {
});
assertThat(images.size(), is(0));
r.path("image").header(AUTHENTICATION_HEADER, createAuthenticationHeader("kai@ima.at", "password")).post(image);
List<Image> images1 = r.path("image")
.header(AUTHENTICATION_HEADER, createAuthenticationHeader("kai@ima.at", "password"))
.accept(MediaType.APPLICATION_JSON)
.get(new GenericType<List<Image>>() {
});
assertThat(images1.size(), is(1));
}
private RemoteImage createTestRemoteImage(String name, Customer customer) throws URISyntaxException, IOException {
byte[] bytes = FileUtils.readFileToByteArray(new File(getClass().getResource("/images/test.jpg").toURI()));
RemoteImage image = new RemoteImage(name, "image/jpeg", bytes, bytes, new Date(), customer.getEmail(), "Samsung NX300M", "Minolta MD 1.4", "1.4", "50", "2000", "200", "Test Image description", customer.getId(), 1L);
return image;
}
This seems to work fine so far, but in the Front End, in my case AngularJS, where I have a controller for adding an Image.
controllers.controller 'ImageAddController', ['$scope','$routeParams','$location','Image', ($scope, $routeParams, $location, Image) ->
$scope.image = {name:"",description:""}
$scope.error = null
$scope.add = ->
Image.save $scope.image,
(text,headers,context) ->
$scope.error = null
$location.path('/images/')
(request) ->
$scope.error = request.data
]
The matching view for that controller is the following
<div class="body-content">
<h1>Add Image</h1>
<div class="panel col-lg-8 col-offset-2">
<div class="panel-heading">
<h3 class="panel-title">New Image</h3>
</div>
<div class="alert alert-danger" data-ng-bind="error" data-ng-show="error"></div>
<form novalidate name="imageForm" class="css-form">
<fieldset>
<div class="form-group" >
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name"
data-ng-model="image.name" required name="name"/>
</div>
<div class="form-group">
<label for="description" class="control-label">Description</label>
<input type="text" class="form-control" id="description"
data-ng-model="image.description" required name="description"/>
</div>
<div class="form-group">
<label for="category" class="control-label">Category</label>
<input type="text" class="form-control" id="category"
data-ng-model="image.categoryId" name="category"
required />
</div>
<div class="form-group">
<label for="camera" class="control-label">Camera</label>
<input type="text" class="form-control" id="camera"
data-ng-model="image.camera" name="camera"
required />
</div>
<div class="form-group">
<label for="lens" class="control-label">Lens</label>
<input type="text" class="form-control" id="lens"
data-ng-model="image.lens" name="lens"
required />
</div>
<div class="form-group">
<label for="aperture" class="control-label">Aperture</label>
<input type="text" class="form-control" id="aperture"
data-ng-model="image.aperture" name="aperture"
required />
</div>
<div class="form-group">
<label for="focalLength" class="control-label">Focal length</label>
<input type="number" class="form-control" id="focalLength"
data-ng-model="image.focalLength" name="focalLength"
required />
</div>
<div class="form-group">
<label for="shutterSpeed" class="control-label">Shutter speed</label>
<input type="text" class="form-control" id="shutterSpeed"
data-ng-model="image.shutterSpeed" name="shutterSpeed"
required />
</div>
<div class="form-group">
<label for="ISO" class="control-label">ISO</label>
<input type="number" class="form-control" id="ISO"
data-ng-model="image.ISO" name="ISO"
required />
</div>
</fieldset>
<div class="btn-toolbar">
<button class="btn btn-primary" data-ng-click="add()"
data-ng-disabled="customerForm.$invalid">Save</button>
<a href="#" class="btn btn-default">Cancel</a>
</div>
</form>
</div>
</div>
My question is how do let the user upload a picture to save it in the JSON (byte[] content) and how would I be able to display that image from an JSON for the user?
PS: The controller is not writen in Javascipt, it is Coffeescript. But because I guess more of you understand Javascript, you can help me in that language.
