Im using angularjs in client side and spring ,hibernate in server side. Now im trying to upload the image , which could be saved in a server folder and the path where it stored can save in sql db . Im struggling to read the image using angularjs with spring . Kindly guide me to complete my task Thanks in advance
2
-
why don't you try out something by yourself? Refer this and this linksTino M Thomas– Tino M Thomas2018-04-09 07:11:26 +00:00Commented Apr 9, 2018 at 7:11
-
Thank you Tino M Thomas , Im working on itSanthosh M– Santhosh M2018-04-09 08:55:37 +00:00Commented Apr 9, 2018 at 8:55
Add a comment
|
2 Answers
There is a project called Spring Content that allows you to create content management applications with very little code. Take a look at the Getting Started guides here and here.
This project also has a demo application called spring docs that acts as a reference showing how an angular (1.x) front-end can talk to a Spring Content backend. From a file upload perspective all the work on the front-end is done by a Danial Farid's excellent ng-upload component. This video then walks through the backend code showing just how easy it is to create that. Follow these and you should be up and running in no-time.
Based on your additional details this would look something like this:-
pom.xml
<dependency>
<groupId>com.github.paulcwarren</groupId>
<artifactId>spring-content-rest-boot-starter</artifactId>
<version>0.0.10</version>
</dependency>
<dependency>
<groupId>com.github.paulcwarren</groupId>
<artifactId>content-fs-spring-boot-starter</artifactId>
<version>0.0.10</version>
</dependency>
SpringBootApplication.java
@SpringBootApplication
public class YourSpringBootApplication {
public static void main(String[] args) {
SpringApplication.run(YourSpringBootApplication.class, args);
}
@Configuration
@EnableFilesystemStores
public static class StoreConfig {
File filesystemRoot() {
// return root of your image store
}
// this bean is the spring resource loader that will be used by
// the product store
@Bean
public FileSystemResourceLoader fsResourceLoader() throws Exception
{
return new FileSystemResourceLoader(filesystemRoot().getAbsolutePath());
}
}
@StoreRestResource(path="addTest")
public interface ProductImagesStore extends Store<String> {
//
}
}
This will be enough to create a backend service that your angular front-end can POST multipart file requests too and subsequently GET from. Note, no controller code. Spring Content REST doesn't currently support more than one multipart file so you would have to modify test.js for call $hhtp.port multiple times, one for each product image. Also happy to work with you to add this functionality into Spring Content too.
5 Comments
Santhosh M
vote of thanks paul, i tried this ,but i'm not that familiar with spring content and ng upload @PauWarren
Santhosh M
It did not worked to me , but i found something like the above mentioned method to store the uploaded image in local directory , now i have a issue to get the image from the directory to display the image in jsp page , i got a path in angulajs , but when i pass the path to src in jsp , it doesn't affect anything. Have a console error "Not allowed to load the resource".
Paul Warren
The point of Spring Content is that you don't have to write the controllers or java services to handle the CRUD functionality for your content which ultimately is going to save you a lot of work. For example, what if you want to have video clips as well as images? You'll have to figure out how to write a controller mapping for that and so forth. But it is already built into Spring Content/Spring Content REST. I'll try and update my answer based on the additional details you have provided
Paul Warren
I saw your own answer and updated my answer based on those details. Let me know if this makes any sense.
Santhosh M
ya paul it too worked to me , Thank You for this clear clarification
In order upload a file along with data using angularjs and spring , here are the code `
test.js
var url = "addTest";
var data = new FormData();
data.append('vendorId', $scope.vendorId);
data.append('categoryId', _ddlCategory);
data.append('subCategoryId', _ddlSubCategory);
data.append('productName', _productName);
data.append('productImage1', 'image1');
data.append('productImage2', 'image2');
data.append('productImage3', 'image3');
data.append('productImage4', 'image4');
data.append('productImage5', 'image5');
data.append('productImagePath1', file1);
data.append('productImagePath2', file2);
data.append('productImagePath3', file3);
data.append('productImagePath4', file4);
data.append('productImagePath5', file5);
data.append('specification', _productspec);
data.append('terms', _termsDescription);
var config = {
transformRequest: angular.identity,
transformResponse: angular.identity,
headers : {
'Content-Type': undefined
}
}
$http.post(url, data, config).then(function (response) {
$scope.uploadResult=JSON.parse(response.data);
}, function (data, status, headers, config) {
//$scope.uploadResult=response.data;
console.log('errorresult '+ data);
});
controller.java
@RequestMapping(value = "/addTest", method = RequestMethod.POST, headers = "Content-Type=multipart/form-data", consumes = {
"multipart/form-data" })
public @ResponseBody <Base64Binary> String addProductTest(@RequestParam("vendorId") Long vendorId,
@RequestParam("categoryId") Long categoryId, @RequestParam("subCategoryId") Long subCategoryId,
@RequestParam("productName") String productName,
@RequestParam("productDescription") String productDescription,
@RequestParam("productQuantity") Long productQuantity, @R
@RequestParam("productImagePath1") MultipartFile file1,
@RequestParam("productImagePath2") MultipartFile file2,
@RequestParam("productImagePath3") MultipartFile file3,
@RequestParam("productImagePath4") MultipartFile file4,
@RequestParam("productImagePath5") MultipartFile file5, @RequestParam("specification") String specification,
@RequestParam("terms") String terms)
throws ApplicationException, JsonIOException, JsonSyntaxException, IOException, ParseException {