Friday, 17 March 2017

How to save the profile picture in couchbase using angular js

I using the upload, file, and image.But how to stored the image in Couch base. I am not using ng-model .which taken in this part please help me.so i added in below in registration form.

//registerhtml page

<div role="tabpanel" 
     class="tab-pane active" 
     id="step-1">
    <div class="col-md-5">
       <img src="../logo.jpg" 
            alt="Smiley face"
            height="150" 
            style="margin:40px;"
            width="150">                             
    </div>
    <div class="col-md-7">
        <form action="r"
              method="post" 
              accept-charset="utf-8" 
              name="registerForm" >
        <div class="col-md-7">
            <div class="form-group">  
                <label> First Name* : </label>
                    <input class="form-control input-sm"
                            type="text" 
                            name="fName" 
                            placeholder="First Name"
                            ng-model="register.fName"
                            ng-minlength="1" 
                            ng-maxlength="30"
                            ng-pattern="/^[A-Za-z]/">
                    </input>  
                    <span  id="mod-error"
                        ng-show='registerForm.fName.$dirty && registerForm.fName.$error.required'>required
                    </span>
                    <span  id="mod-error"
                        ng-show="registerForm.fName.$error.pattern">Please enter valid Name!
                    </span>
                    <span  id="mod-error" 
                        ng-show='registerForm.fName.$dirty && registerForm.fName.$error.fName'>Not a valid name
                    </span>
                    <span  id="mod-error" 
                        ng-show='registerForm.fName.$dirty && registerForm.fName.$error.maxlength'>Too Long
                    </span>                         
            </div>  
                    <!--This is for Last Name -->   
            <div class="form-group">
                <label> Last Name* : </label>
                    <input  class="form-control input-sm" 
                            type="text" 
                            name="lName"  
                            placeholder="Last Name" 
                            ng-model="register.lName"
                            ng-minlength="1" 
                            ng-maxlength="30"
                            ng-pattern="/^[A-Za-z]/" 
                            required> 
                    </input> 
                    <span  id="mod-error" 
                        ng-show='registerForm.lName.$dirty && registerForm.lName.$error.required'>required
                    </span>
                    <span  id="mod-error"
                        ng-show="registerForm.lName.$error.pattern">Please enter valid Name!
                    </span>
                    <span  id="mod-error" 
                        ng-show='registerForm.lName.$dirty && registerForm.lName.$error.lName'>Not a valid name
                    </span>
                    <span  id="mod-error" 
                        ng-show='registerForm.lName.$dirty && registerForm.lName.$error.maxlength'>Too Long
                    </span>                         
            </div> 
            <!--This is for Date of Birth-->    
            <div class="form-group">                                 
                <label for="DOB">Date of Birth* :</label>
                    <input  class="form-control input-sm"
                            type="date" 
                            name="dob" 
                            required="required" 
                            placeholder="(MM/DD/YYYY)"
                            ng-model="register.dob">
                    </input>
            </div> 
            <!--This is for Gender-->   
            <div class="form-group">   
                <div class="col-md-6" style="padding:0px;" >
                    <label for="gender" >Gender*</label> <br />
                        <select style="width:100%;"
                                name="gender" 
                                ng-model="register.gender" required>
                                <option value="" selected="selected">Choose Gender</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                                <option value="O">Others</option>
                        </select>
                </div>                                                         
                <!--This is for Member Type-->  
                <div class="col-md-6" style="padding:0px;" >
                    <label for="aType" >Account Type*</label> <br />
                            <select style="width:100%;"
                                    name="aType" 
                                    ng-model="register.aType" required>
                                    <option value="" selected="selected">Choose Account Type</option>
                                    <option value="O">Owner</option>
                                    <option value="A">Agent</option>
                                    <option value="C">Customer</option>
                            </select>
                </div>  
            </div>     
            <!--This is for Email Address-->    
            <div class="form-group">
                <label> Email Address* :</label>
                    <input class="form-control input-sm" 
                            type="email" 
                            name="email"
                            ng-model="register.email"
                            placeholder="Your Email" 
                            ng-minlength="7"
                            ng-maxlength="25" 
                            required>
                    </input>
                    <span  id="mod-error" 
                        ng-show='registerForm.email.$dirty && registerForm.email.$error.required'>required
                    </span>
                    <span  id="mod-error"
                        ng-show='registerForm.email.$dirty && registerForm.email.$error.email'>Not an email
                    </span>
                    <span  id="mod-error"
                        ng-show='registerForm.email.$dirty && registerForm.email.$error.minlength'>Too Short 
                    </span>
                    <span  id="mod-error" 
                        ng-show='registerForm.email.$dirty && registerForm.email.$error.maxlength'>Too Long 
                    </span>
            </div>  
            <!--This is for Adhar Number-->                 
            <div class="form-group">                                    
                <label> Aadhaar Number* :</label>
                    <input  class="form-control input-sm" 
                            type="text" 
                            name="aadhaar"
                            placeholder="Aadhaar Number"
                            ng-model="register.aadhaar"
                            ng-minlength="12"
                            ng-maxlength="12"
                            ng-pattern="/^[1-9]{1}[0-9]{11}/"
                            required>
                    </input>         
                            <span id="mod-error"
                                ng-show="registerForm.aadhaar.$error.pattern">Please enter valid number!
                            </span>
                            <span id="mod-error" 
                                ng-show='registerForm.aadhaar.$dirty && registerForm.aadhaar.$error.required'>required
                            </span>
                            <span id="mod-error" 
                                ng-show='registerForm.aadhaar.$dirty && registerForm.aadhaar.$error.aadhaar'>Not a valid Umber
                            </span>
                            <span id="mod-error" 
                                ng-show='registerForm.aadhaar.$dirty && registerForm.aadhaar.$error.maxlength'>Too Long
                            </span>                
            </div>
            <!--This is for PAN Number-->   
            <!--<div class="form-group">
                <label> PAN Number :</label>
                    <input class="form-control input-sm"
                            type="text" 
                            name="pan" 
                            placeholder="PAN Number"
                            ng-model="register.pan"
                            ng-minlength="10"
                            ng-maxlength="10"
                            ng-pattern="/^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})/"
                            required>
                    </input>         
                    <span style='color:red' 
                        ng-show="registerForm.pan.$error.pattern">Please enter valid number!
                    </span>
                    <span style='color:red' 
                        ng-show='registerForm.pan.$dirty && registerForm.pan.$error.required'>required                            
                    </span>
                    <span style='color:red' 
                        ng-show='registerForm.pan.$dirty && registerForm.pan.$error.pan'>Not a valid Umber
                    </span>
                    <span style='color:red' 
                        ng-show='registerForm.pan.$dirty && registerForm.pan.$error.maxlength'>Too Long
                    </span>
            </div>                                                         -->
        </div>  
        <!--This is for ProfilePic-->   
        <div class="col-md-5" > 
            <div class="row" ng-controller="upload">
                <div class="col-md-10">                                                           
                    <img class="img-responsive"
                        ng-src="" 
                        ng-show="filepreview" 
                        style="width:70%;
                                height:150px;
                                border-radius:50%;                                    
                                display:block;"/>
                    <div class="col-md-5">          
                        <input type="file" 
                            fileinput="file" 
                            filepreview="filepreview" 
                            style="width:90px;"></input>           
                    </div> 
                </div>                       
            </div>                            
        </div>  
        <!--This is for Next-->  
        <div class="col-md-8" >                      
        <hr class="colorgraph"></hr>  
        <div class="col-xs-4 col-xs-offset-3">
            <a ui-sref="CATab.account" 
                class="btn btn-lg btn-primary btn-block signup-btn" 
                style=" height:35px;
                        margin-bottom:10px;
                        padding:0px;" ng-disabled="registerForm.$invalid">
                Next  <span class="glyphicon glyphicon-circle-arrow-right"></span>
            </a>
            </div>                 
            </div>  
        </form> 
    </div>
</div>

//app.js

CATabCtrl.$inject= [ '$scope','$http', '$state', '$stateParams'];
function CATabCtrl($scope,$http, $state,$stateParams)
{
    $scope.register = {};
    $scope.save = function(uName, pwd, cpwd, pin, cpin,fName, lName, dob, aadhaar, pan, email, gender, aType, mobile, pic,cDate,cBy,mDate,mBy)
        {
            $http(
                {
                    method: "POST",
                    url: "/api/registersave",
                    data: {
                            uName           : uName,
                            pwd             : pwd,
                            cpwd            : cpwd,
                            pin             : pin,
                            cpin            : cpin,
                            fName           : fName,
                            lName           : lName,
                            dob             : dob,
                            aadhaar         : aadhaar,
                            pan             : pan,
                            email           : email,
                            gender          : gender,
                            aType           : aType,
                            mobile          : mobile,
                            pic             : pic,
                            cDate           : new Date(), 
                            cBy             : uName,              
                            mDate           : new Date(),
                            mBy             : uName,
                            document_id     : $stateParams.documentId
                    }
                })
            .success(function(result)
                {
                $state.go("list");
                    alert('Details saved successfully.');
            })
            .error(function(error)
                {
                console.log(JSON.stringify(error));
            });
    }  
    //function to process the form
    $scope.processForm = function()
     {
        alert($scope.register.lName+$scope.register.uName);  
    };
}



via Yamini Sankar

No comments:

Post a Comment