How to use AngularJS $http to send multipart/form-data

Asked
Active3 hr before
Viewed126 times

7 Answers

90%

The problem is that I can not change the rest services I use. I should find a solution that allows me to format (with javascript or php) the data in FormDataMultiPart. – Andrea Pascali Jun 23 '17 at 16:05 ,I am developing the front-end in javascript and html5, I did not find anything in the web that can help me as the FormDataMultiPart object does not exist in javascript.,It is important to set the content type header to undefined. Normally the $http service sets the content type to application/json. When the content type is undefined, the XHR API will automatically set the content type to multipart/form-data with the proper multi-part boundary.,While I get a 415 (unsupported media type) error if the service has a Content-Type = "application / x-www-form-urlencoded; charset = utf-8" or "application / json; charset = utf-8" or "application / form-data ".

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XHR Send method. It uses the same format a form would use if the encoding type were set to multipart/form-data.

var formData = new FormData();

formData.append('type', type);
formData.append('description', description);
formData.append('photo', photo);

return $http({
   url: PATH_REST_SERVICES + '/nomeServizio',
   headers: {
      "Content-Type": undefined
   },
   data: formData,
   method: "PUT"
});
load more v
88%

In order to upload a file use FormData and AngularJS, I have to use $http, not ngResource. And I have to use HTTP method POST. Given below are the steps to accomplish it:,Use $http to send the FormData to the back end Rest service.,This is not a brilliant tutorial, not a great tutorial. I hope it is a good one. In this tutorial, I want to show how to upload a file using AngularJS $http and JavaScript object type FormData. On the Java side, I used a RESTFul API controller to handle the upload.,Next, I will use $http to do the upload. Or send the request data to the server side. Here is how I do it:

var fd = new FormData();
fd.append('fileMetadata', JSON.stringify(imgMetadata));
fd.append('file', fileToUpload);
load more v
72%

If everything goes well according to your execution plan, $http service will send the files to your Web API controller class and it will do the rest.,This example uses a Web API controller to upload files. I have already created the controller before and I want you to check it. Click the below link and follow the steps to create the API.,The second function uploadFiles in the controller is called when you click the upload button on the page. I have declared a variable request to accumulate all the information, before passing it to the $http service.,As you know, AngularJS $http is a service that provides functionalities to receive (get) and send (post) information to a remote http server. Therefore, it’s a valid request, I must find a solution, and this is it.

<!DOCTYPE html>
<html>

<head>
   <title>AngularJS File Upoad Example with $http and FormData</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>

<body ng-app="fupApp">
   <div ng-controller="fupController">

      <input type="file" id="file1" name="file" multiple ng-files="getTheFiles($files)" />

      <input type="button" ng-click="uploadFiles()" value="Upload" />
   </div>
</body>
load more v
65%

Now we’re able to access the file in the view controller with $scope.myFile. In order to upload the file to the server with a multipart/form-data request, we pass the file object and the url to a service and override some of Angular’s default behavior. Note that the below service uses the FormData object which is not supported by IE9 and earlier.,In my use case, I did not want to upload the file until I knew a previous request went through successfully, so I inject the service into my controller and call it when I know it’s safe to upload.,First we write the directive to gain access to the file object in our controller. In the snippet below, file-model is an attribute on a file input element, and its value is the name of the variable in our controller’s scope that binds to the file object.,In the link function of the above directive, we listen for changes to the content of the input element and change the value of the variable in the scope accordingly. This is achieved using the $parse service to set the value in our scope. The markup required in the view for the directive to work is simple:

First we write the directive to gain access to the file object in our controller. In the snippet below, file-model is an attribute on a file input element, and its value is the name of the variable in our controller’s scope that binds to the file object.

.directive('fileModel', ['$parse', function($parse) {
   return {
      restrict: 'A',
      link: function(scope, element, attrs) {
         var model = $parse(attrs.fileModel);
         var modelSetter = model.assign;
         element.bind('change', function() {
            scope.$apply(function() {
               modelSetter(scope, element[0].files[0]);
            });
         });
      }
   };
}]);
load more v
75%

Note: We assume that you have a server running at the http://localhost:3000 address with an /upload that accepts POST requests for uploading files in your server.,If you would like to create a server for uploading files, check out Nest.js Tutorial: File Uploading with Multer and Serving Static Files in Nest.,The FormData API allows you to create a set of key/value elements that correspond to form fields and their values. This can be then sent to the server using Angular HttpClient.,One of the most important aspects of web development is forms as they allow you to collect data from users and upload it to servers.

$ ng generate component upload
load more v
40%

Can someone please provide an example, html and js of how to do this?,What I am looking to do is upload a file and some form data as multipart form data. I read that this isn't a feature of angular, however 3rd party libraries can get this done. I've cloned angular-file-upload via git, however I am still unable to post a simple form and a file.,This is pretty must just a copy of that projects demo page and shows uploading a single file on form submit with upload progress.,The form data in the input elements would be sent in the data property of the post and be available as normal form values.

<input accept="image/*" name="file" ng-value="fileToUpload"
       value="{{fileToUpload}}" file-model="fileToUpload"
       set-file-data="fileToUpload = value;" 
       type="file" id="my_file" />
load more v
22%

It would be best if you had a server working on http://localhost:8000 with /file-upload endpoint; it must work with POST request for storing or uploading files on the server.,This tutorial walks you through on how to POST multipart FormData in Angular 12 and TypeScript 4 with HttpClient. We will upload an image file by making a POST form data request with HttpClient API using the node-based server.,If you are creating any web application so, at some point in time, you have to deal with the forms. In general, you get data provided by users and store or upload it to the remote server via app’s frontend.,Configures the dependency injector for HttpClient with supporting services for XSRF. Automatically imported by HttpClientModule.

ng new angular - formdata - example

# ? Would you like to add Angular routing ? Yes
# ? Which stylesheet format would you like to use ? CSS
load more v

Other "undefined-undefined" queries related to "How to use AngularJS $http to send multipart/form-data"