Utilizing angularjs to send an image along with additional form fields to a spring rest service

Question

Utilizing angularjs to send an image along with additional form fields to a spring rest service

I am looking to create a webpage that allows users to upload an image along with other form fields using AngularJS and Spring REST service. Below is the example of HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
         ... (HTML code continues)
     </head>
      ... (More HTML code)

 <p>Below is the Spring controller method:</p>

<pre><code>@POST
@Path("/uploadImage")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public void uploadImage(){

}

If you are curious about how to send files along with data in JavaScript, or how to receive values in the Spring controller, please take a look at the provided examples. They demonstrate how to achieve this functionality using AngularJS and Spring.

Additional code, including controllers and Web.xml configuration, has been included for reference.

javascript java angularjs spring rest

Answer 1

Answer №1

If you're working with AngularJS controllers, an example of how to handle image uploads could be:

function uploadImage(){
    var formData = new FormData();
    fd.append('file', multipartFile);
    fd.append('name', name);
    fd.append('description', description);
    fd.append('category', category);
    fd.append('price', price);
    $http.post("yourwebsite.com/uploadImage", formData);
}

For more information on using $http in AngularJS, refer to the AngularJS documentation.

An example of a REST controller that handles image uploads could look like this:

@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
public void uploadImage(@RequestParam("file") MultipartFile file,
    @RequestParam("name") String name, @RequestParam("description") String description, 
    @RequestParam("category") String category, @RequestParam("price") Double price){
    // process the uploaded image (e.g., save it to a database)
}

Answer 2

If you're working with AngularJS controllers, an example of how to handle image uploads could be:

function uploadImage(){
    var formData = new FormData();
    fd.append('file', multipartFile);
    fd.append('name', name);
    fd.append('description', description);
    fd.append('category', category);
    fd.append('price', price);
    $http.post("yourwebsite.com/uploadImage", formData);
}

For more information on using $http in AngularJS, refer to the AngularJS documentation.

An example of a REST controller that handles image uploads could look like this:

@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
public void uploadImage(@RequestParam("file") MultipartFile file,
    @RequestParam("name") String name, @RequestParam("description") String description, 
    @RequestParam("category") String category, @RequestParam("price") Double price){
    // process the uploaded image (e.g., save it to a database)
}

Utilizing angularjs to send an image along with additional form fields to a spring rest service

Answer №1

Similar questions

Clearly defined form field even with the inclusion of value=" "

Package an Angular 1.5.x app that was developed without using npm

Tips for choosing a text node that is a child of a span node

What should I do when the ng-click event doesn't open a new window

Adding HTML elements to a button using an array: a step-by-step guide

Autocomplete Dropdown Options

Updating a slider based on the values of two other sliders can be achieved by implementing a

Is there a way to search for the keyword "/test/" within a lengthy string using Regular Expressions?

CSS animations make canvas irrelevant

In JavaScript, where are the values saved?

Learn how to implement a conditional class binding in Vue 3, and discover how to apply additional classes when a specific condition is met

Consolidate JavaScript files into a single file using phpStorm

Static Android fragments are necessary

Passing information from an AngularJS service to a controller

Error encountered: "Unable to process Three.js FontLoader due to SyntaxError

The Mongo embedded server is functioning as a secondary instance within the replica set, rather than the primary instance

reposition md-dialog labels on the fly

Updating environment variables in a React app without the need to rebuild the image

Issue with Angular 12 service worker causing SW update to fail

When the responsive navbar is activated, it obscures the body content, causing a block in