danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.59k forks source link

Image capture from mobile camera cant get in angular model in ngf-select #2084

Open RameshPraba opened 6 years ago

RameshPraba commented 6 years ago

I use Angularjs in my project. I want to capture the user image using camera from any mobile device like android and ios .Then crop the image and set as profile picture of the user account. I used ngf-select to upload the file it shows options select file from mobile folder or take picture from camera option. After select the camera option then user take picture then upload it didnt bind in ng-model . Its shows blank image. The file upload code in html page shown below <button class="btn btn-md btn-primary btn-add" ng-click="user.showUpload = true" ngf-select ng-model="picFile" accept="image/*" capture="camera"> +</button>

For image crop i used the below code

                                                        <div ng-if="user.showUserUpload==true" id="divUserPic">
                                                            <div class="col-md-5">
                                                                <div ngf-drop ng-model="picUserFile" ngf-pattern="image/*"
                                                                     class="cropArea">
                                                                    <img-crop image="picUserFile  | ngfDataUrl"
                                                                              result-image="croppedUserDataUrl" ng-init="croppedUserDataUrl=''">
                                                                    </img-crop>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <button class="btn btn-md btn-primary  btn-block" type="button" ng-click="user.showUserUpload=false;user.btnEditFlg=true;uploadUserPic(croppedUserDataUrl, picUserFile.name)">Upload</button>
                                                                <img ng-src="{{croppedUserDataUrl}}" style="border:1px solid #c7c7c7;" />
                                                                <br />

                                                            </div>
                                                        </div>

if any body will give solution for this. Will helpful for me to resolve the issues