Profile Photo Upload with ONSEN UI + Angular

Question

How can I make a very simple profile photo upload like what's app photo profile? I was trying to use the plugin flow but had no success. Thanks.

Answer 1

This is a huge question without a simple answer. It depends on where and how you're storing your file!

In general, you'll create a form to select an image from the user's computer, convert it to an appropriate format, then transfer that data to your server. Your server will reverse the process and save the file.

I think the biggest obstacle you'll run into is the different way AngularJS and many backend frameworks handle files.

If you're using Django (which I recommend!!), here's one way to handle it: AngularJS to Django REST Framework Image Upload

PS - If you're interested in creating web apps, I'm writing up a tutorial on how to use AngularJS with Django and PostgreSQL to do it. I'm still developing the app, but the basics on PANDA Stack as a platform for your app and how to set up the stack are there. Nothing's for sale, no donate button.

Answer 2

I had the same problem. Here is my solution. HTML:

<div id="photoWrapper"  ng-click="showFIle()" ng-class="myVar" >
    <img  accept="image/x-png, image/gif, image/jpeg"   ng-src="{{imgSrc}}" id="photo"></img>
</div>  

Code:

module.controller('LoginController', function($scope,$route,$window) {
//localStorage.removeItem("photo");    *you can delete localstorage for debug.
var fileDialog;
$scope.imgSrc = ""
ons.createDialog('templates/loadPicDialog.html', {parentScope: $scope}).then(function(dialog) {
 fileDialog = dialog;
});
var storedPhoto = localStorage.getItem("photo");
            if(!storedPhoto){
                setTimeout(function(){
                    fileDialog.show();
                },500)
            } else {                
                $scope.imgSrc = localStorage.getItem("photo");
            }   

$scope.showFIle = function(){
                 fileDialog.show();
                    }                      


$scope.myVar = "defaultPic";


$scope.savePicture = function(){
                    var reader = new FileReader();
                    reader.onload = (function(e) {
                        getImageData(e.target.result)       
                    });
                    var imageFile = document.getElementById('imgFileName').files[0];
                    reader.readAsDataURL(imageFile);
                }

function getImageData(url) {
        var data ;
        var canvas, ctx;
        var img = new Image();
        img.onload = function(){
            // Create the canvas element.
            canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            // Get '2d' context and draw the image.
            ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            // Get canvas data URL
            try{
            data = canvas.toDataURL();
            $scope.imgSrc = data;
            localStorage.setItem("photo", data);
            fileDialog.hide();  
            $route.reload();
            }catch(e){
              console.log(e);
           }
        }

        // Load image URL.

        try{
            img.src = url;          
        }catch(e){
            console.log(e);
        }       
    }});

And Dialog:

<ons-dialog style="height:130px;" var="fileDialog">
<ons-page>
    <ons-toolbar>
        <div class="center">File Upload</div>
    </ons-toolbar>
    <input id="imgFileName" type="file"/>
    <div style="text-align: center;
margin-top: 20px;">
    <ons-button onclick="fileDialog.hide()">Cancel</ons-button>
    <ons-button ng-click = "savePicture()">Save</ons-button>
    </div>
   </ons-page>  
</ons-dialog>