Hi Anshul,
Welcome to Angular!!!
What you are trying to achieve is not possible at all.
File upload can't be done via an AJAX call. This statement is true for
vanilla JS itself. so, its obviously it applies for Angular.
You can try some File Upload plugins for Angular. blueimp is a nice plugin
for jQuery but there is a angular version too.
*Note*: Since you are learning, start with something simple instead of
File-upload which is pretty advanced concept in Angular.
Happy Learning.
Thanks and Regards
Karthick B
On Saturday, December 10, 2016 at 12:03:13 AM UTC+5:30, Anshul Ghorawat
wrote:
>
>
> I'm pretty new to Angular JS and trying my hands out.
> I'm trying to create a image file upload using Angular JS and PHP. I've
> so far achieved this.
>
> PS: My whole intention is to learn by trying it myself rather than copying
> other codes available on the internet. Hence, please help me to modify this
> code.
>
> View:
> --------
>
> <div ng-app="myPhoto">
> <div ng-controller="myControl">
> <div class="photoUpload box">
> <center>
> <b><i>
> <?php
> echo $this->session->flashdata("msg");
> ?>
> </i></b>
> </center>
>
> <form id="imageform" enctype="multipart/form-data" method=
> "POST">
> <table align="left" cellpadding="10">
> <caption><h2>Create an album!</h2><hr></caption>
> <div ng-model="user.err"></div>
> <tr>
> <th><label for="album">Album:</label></th>
> <td><input type="text" ng-model="user.album"
> placeholder="Enter the album name" class="form-control"></td>
> </tr>
> <tr>
> <th><label for="photo">Photo:</label></th>
> <td><input type="file" ng-model="user.photo"
> ng-file-select="onFileSelect($files)" multiple class="form-control"></td>
> </tr>
> <tr>
> <th><label for="title">Photo title:
> </label></th>
> <td><input type="text" ng-model=
> "user.pictitle" placeholder="Enter the photo title or caption" class=
> "form-control"></td>
> </tr>
> <tr>
> <th><label for="files">Preview file:
> </label></th>
> <td>
> <div ng-model="user.preview" class=
> "previewfile"><img src=""></img></div>
> </td>
> </tr>
> <tr>
> <th colspan="2">
>
>
> <button type="button" class="btn-primary"
> ng-click="uploadimg()">Upload</button>
>
> <button type="button" class="btn-primary">
> Reset</button>
> </th>
> </tr>
> </table>
> </form>
> </div>
> </div>
> </div>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> AngularJS:
> ----------------
> var obj = angular.module("myPhoto", []);
> obj.controller("myControl", function($scope, $http){
> var formData = new FormData();
>
> formData.append("file", $scope.file);
> $scope.uploadimg = function(){
> $http({
> method: "POST",
> url:"home/index",
> data: $.param({'formData':$scope.user}),
> headers: {'Content-Type': 'multipart/form-data'}
> //headers: {'Content-Type':
> 'application/x-www-form-urlencoded; charset=UTF-8'}
> }).success(function (response,status) {
> if(status==200)
> {
> //console.log(response);
> $scope.message = response;
> $scope.user.err.html(data).fadeIn();
> $scope.formData[0].reset();
> }
> })
> .error(function(response,status){
>
> });
> }
> else
> {
> $scope.message = "Failed!";
> }
>
> });
>
> Thank you!
>
> Anshul
>
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
