Angular Multipart/form-data File Upload using http post method

Angular Multipart/form-data File Upload using http post method

Today, We want to share with you Angular Multipart/form-data File Upload using http post method.
In this post we will show you AngularJS File Upload using $http post method, hear for AngularJS File Upload using $https post and FormData we will give you demo and example for implement.
In this post, we will learn about Angularjs $http post file and form data with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.AngularJS File Upload using $http post method

Here infinityknow.com are going to discuss files uploading module to about uploading a file data and sending to SERVER-SIDE backend data.
The infinityknow.com are providing an latest example of files – Upload File.with To develop this application, we have used Javascript,HTML, with CSS and angular(AngularJS).

READ :  Angular dependable Country State City Cascading DropDownList

HTML File upload(Files,imags,doc,pdf,etc..) and sending data using POST Method to backend using angular js

<!DOCTYPE html>
<html>
<head>
  <title>Angular file upload Demo - AngularJS File Upoad POST Method with Example with $http request and FormData</title>
  <script src="yourProjectDir/angularjs/1.4.4/angular.min.js"></script>
</head>

<body ng-app="fileuplfupApp">
    <div ng-controller="filefupControllerdata">

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

        <input type="button" ng-click="fileuploadFiles()" value="Upload" />
    </div>
</body>
</html>

Script : The Directive and Controller with AngularJS

    angular.module('fileuplfupApp', [])
		//using directive with angularjs
        .directive('ngFiles', ['$parse', function ($parse) {

            function file_fn_link(scope, element, fileattrs) {
                var onChange = $parse(fileattrs.ngFiles);
                element.on('change', function (event) {
                    onChange(scope, { $files: event.target.files });
                });
            };

            return {
                link: file_fn_link
            }
        } ])
        .controller('filefupControllerdata', function ($scope, $http) {

            var fileformdata = new FormData();
            $scope.filegetTheFiles = function ($files) {
                angular.forEach($files, function (value, key) {
                    fileformdata.append(key, value);
                });
            };

            // angularje NOW your UPLOAD THE FILES in this code.
            $scope.fileuploadFiles = function () {

                var filerequestdata = {
                    method: 'POST',
                    url: '/api/fileupload/images/',
                    data: fileformdata,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // $http is a send file to browser side to server side SEND THE FILES.(get response)
                $http(filerequestdata)
                    .success(function (filedatares) {
						//debug response
                        console.log("Your response message data = "+filedatares);
                    })
                    .error(function () {
                    });
            }
        });

Second way

 fuapp.directive('myDirective', function (httpPostFactory) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attr) {

            element.bind('change', function () {
                var formData = new FormData();
                formData.append('file', element[0].files[0]);
                httpPostFactory('file_upload_image.php', formData, function (callback) {
                   // to used recieve image name and temp name to use in a ng-src  with angularjs
                    console.log("return call back images"+callback);
                });
            });

        }
    };
});

fuapp.factory('httpPostFactory', function ($http) {
    return function (file, data, callback) {
        $http({
            url: file,
            method: "POST",
            data: data,
            headers: {'Content-Type': undefined}
        }).success(function (response) {
            callback(response);
        });
    };
});

FileName : index.html

READ :  Angular 6 Tutorial with Top 10 Examples

<lable>Select your file or drag file</lable>
<input data-my-directive type="file" name="file">
<h3>Welcome - AngularJS with PHP file-upload</h3>

PHP: file_upload_image.php

if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {

// Angularjs with PHP file uploads image server side in the folder images uploads
$temp_file = explode(".", $_FILES["file"]["name"]);
$upnewfilenamedata = substr(md5(time()), 0, 10) . '.' . end($temp_file);
move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $upnewfilenamedata);

// angularjs give callback response to your angular code with php to the image src name result
echo json_encode($upnewfilenamedata);
}

We hope you get an idea about Angular Multipart/form-data File Upload using http post method
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

READ :  Angularjs get last item Array Object and json Example

We hope This Post can help you…….Good Luck!.

Add a Comment

Your email address will not be published. Required fields are marked *