how to upload image file in http.post with other paramters in AngularJS

Question

i am new angularjs, i m posting successfully multiple parameters in http.post but when i try to add a file in that parameter django returns Invalid boundary in multipart: None from web service which is django based, browsable api page work fine so there is nothing wrong on web service side on localhost.

my html code is

<form name="myform" ng-controller="addEventController">
<b>Title: </b><input type="text" ng-model="eventtitle" style="margin-bottom: 10px;"/><br/>
<b>Banner: </b><input type="file" id="files" name="file" /><div id="progress_bar"><div class="percent">0%</div></div>
<b>Description: </b><input type="text" ng-model="eventdescription" style="margin-bottom: 10px;"/><br/>


<input type="submit" value="Submit Form" ng-click="AddThisEvent()" style="margin-top: 10px; margin-bottom: 10px; margin-left: 35px;"/>
<h2 style="color: green;">{{OKans}}</h2><h2 style="color: red;">{{NAans}}</h2>    
<b>Status: </b> {{res.statusText}}<br>

my angularjs controller code is

eventsApp.controller('addEventController', function($scope, $http) {

            var reader;
            var progress = document.querySelector('.percent');
            function errorHandler(evt) {
                switch(evt.target.error.code) {
                    case evt.target.error.NOT_FOUND_ERR:
                        alert('File Not Found!');
                        break;
                    case evt.target.error.NOT_READABLE_ERR:
                        alert('File is not readable');
                        break;
                    case evt.target.error.ABORT_ERR:
                        break; // noop
                    default:
                        alert('An error occurred reading this file.');
                };
            }
            function updateProgress(evt) {
                // evt is an ProgressEvent.
                if (evt.lengthComputable) {
                    var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
                    // Increase the progress bar length.
                    if (percentLoaded < 100) {
                        progress.style.width = percentLoaded + '%';
                        progress.textContent = percentLoaded + '%';
                    }
                }
            }
            function handleFileSelect(evt) {
                // Reset progress indicator on new file selection.
                progress.style.width = '0%';
                progress.textContent = '0%';
                reader = new FileReader();
                reader.onerror = errorHandler;
                reader.onprogress = updateProgress;
                reader.onabort = function(e) {
                    alert('File read cancelled');
                };
                reader.onloadstart = function(e) {
                    document.getElementById('progress_bar').className = 'loading';
                };
                reader.onload = function(e) {
                    // Ensure that the progress bar displays 100% at the end.
                    progress.style.width = '100%';
                    progress.textContent = '100%';
                    setTimeout("document.getElementById('progress_bar').className='';", 2000);
                    //$scope.eventbanner = { filename: evt.target.files[0].name, data: evt.target.files[0] }
                    $scope.eventbanner = evt.target.files[0];
                    //$scope.jsonFILES = ("file", $scope.eventbanner)
                }
                // Read in the image file as a binary string.
                reader.readAsDataURL(evt.target.files[0]);
                console.log(reader);
            }
            document.getElementById('files').addEventListener('change', handleFileSelect, false);

            $scope.AddThisEvent = function() {
                $scope.answer = 'logging . . . ';
                $scope.OKans = '';
                $scope.NAans = '';

                $scope.jsonData = { 
                                event_title: $scope.eventtitle,
                                event_banner_pic: $scope.eventbanner,
                                event_desc: $scope.eventdescription, 
                } 

                $http.post( '/organiser/events/', $scope.jsonData, { headers: {'Content-Type': 'multipart/form-data' }  }
                ).then(function(res){
                        $scope.res = res
                    }, function(error) {
                        $scope.res = error
                    });         
        }   
});

Thanks in advance.

score 0 · Accepted Answer · edited May 23 '17 at 12:00

Answer at Angularjs $http post file and form data helped me and remove following code

        var reader;
        var progress = document.querySelector('.percent');
        function errorHandler(evt) {
            switch(evt.target.error.code) {
                case evt.target.error.NOT_FOUND_ERR:
                    alert('File Not Found!');
                    break;
                case evt.target.error.NOT_READABLE_ERR:
                    alert('File is not readable');
                    break;
                case evt.target.error.ABORT_ERR:
                    break; // noop
                default:
                    alert('An error occurred reading this file.');
            };
        }
        function updateProgress(evt) {
            // evt is an ProgressEvent.
            if (evt.lengthComputable) {
                var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
                // Increase the progress bar length.
                if (percentLoaded < 100) {
                    progress.style.width = percentLoaded + '%';
                    progress.textContent = percentLoaded + '%';
                }
            }
        }
        function handleFileSelect(evt) {
            // Reset progress indicator on new file selection.
            progress.style.width = '0%';
            progress.textContent = '0%';
            reader = new FileReader();
            reader.onerror = errorHandler;
            reader.onprogress = updateProgress;
            reader.onabort = function(e) {
                alert('File read cancelled');
            };
            reader.onloadstart = function(e) {
                document.getElementById('progress_bar').className = 'loading';
            };
            reader.onload = function(e) {
                // Ensure that the progress bar displays 100% at the end.
                progress.style.width = '100%';
                progress.textContent = '100%';
                setTimeout("document.getElementById('progress_bar').className='';", 2000);
                //$scope.eventbanner = { filename: evt.target.files[0].name, data: evt.target.files[0] }
                $scope.eventbanner = evt.target.files[0];
                //$scope.jsonFILES = ("file", $scope.eventbanner)
            }
            // Read in the image file as a binary string.
            reader.readAsDataURL(evt.target.files[0]);
            console.log(reader);
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);

how to upload image file in http.post with other paramters in AngularJS

1 Answers1