how to upload image in server folder using angularjs and spring

Question

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

why don't you try out something by yourself? Refer [this](https://stackoverflow.com/questions/13963022/angularjs-how-to-implement-a-simple-file-upload-with-multipart-form) and [this](https://www.javatpoint.com/spring-mvc-file-upload) links — Tino M Thomas, Apr 09 '18 at 07:11

Paul Warren · Accepted Answer · 2018-04-13T05:50:29.417

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.

vote of thanks paul, i tried this ,but i'm not that familiar with spring content and ng upload @PauWarren — Santhosh M, Apr 11 '18 at 06:36
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". — Santhosh M, Apr 12 '18 at 05:38
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, Apr 13 '18 at 05:27
I saw your own answer and updated my answer based on those details. Let me know if this makes any sense. — Paul Warren, Apr 13 '18 at 05:56
ya paul it too worked to me , Thank You for this clear clarification — Santhosh M, Apr 13 '18 at 12:23

score 0 · Answer 2 · answered Apr 11 '18 at 06:50

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 {

how to upload image in server folder using angularjs and spring

2 Answers2