Upload image to parse using AngularJS upload form

Question

Simple question, how to create an angularjs upload form to Parse.com?
I am trying to create a profile picture uploader form using using this stackoverflow answer, but it not works

HTML code

<div class="col-lg-9"  ng-controller="manageProfile">
    <form style="margin-top:80px">
        <div class="form-group">
            <label>Browse for Picture</label>
            <input type="file" name="profPic" id="profPic"></input>
        </div>
        <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button>
    </form>
</div>

AngularJS code

profile.controller('manageProfile', ['$scope', function($scope) {
$scope.uploadPicture = function() {
    var fileUploadControl = $("#profPic")[0];
    var file = fileUploadControl.file[0];
    var name = file.name;
    var parseFile = new Parse.File(name, file);

    parseFile.save().then(function() {
        var currentUser = Parse.User.current();
        currentUser.set("profilePicture", parseFile);
        currentUser.save();
    }, function(error) {
        alert("Error: " + error.code + ' ' + error.message);
    });
}

I got this error when trying to upload

error: fileuploadcontrol is undefined

Show the code that you have tried.

georgeawg
– georgeawg

2016-03-27 17:01:20 +00:00
Commented Mar 27, 2016 at 17:01 — georgeawg
– georgeawg, Commented Mar 27, 2016 at 17:01
Also look at parse-angular-patch

georgeawg
– georgeawg

2016-03-27 17:06:04 +00:00
Commented Mar 27, 2016 at 17:06 — georgeawg
– georgeawg, Commented Mar 27, 2016 at 17:06
i am sorry for not writing the code right away...

Spadaboyz
– Spadaboyz

2016-03-28 01:50:06 +00:00
Commented Mar 28, 2016 at 1:50 — Spadaboyz
– Spadaboyz, Commented Mar 28, 2016 at 1:50

georgeawg · Accepted Answer · 2016-03-28 03:33:54Z

0

In AngularJS, input elements use the ng-model directive to bind input to a scope variable.

<div class="col-lg-9"  ng-controller="manageProfile">
    <form style="margin-top:80px">
        <div class="form-group">
            <label>Browse for Picture</label>
               <!-- add ng-model directive -->
            <input ng-model="fileName" type="file" name="profPic" id="profPic"></input>
        </div>
        <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button>
    </form>
</div>

In the controller:

profile.controller('manageProfile', ['$scope', function($scope) {
    $scope.uploadPicture = function() {
        /* replace this
        var fileUploadControl = $("#profPic")[0];
        var file = fileUploadControl.file[0];
        var name = file.name;
        */
        //Use ng-model variable
        var name = $scope.fileName;
        //
    };

}]);

For more information on ng-model, see AngularJS ng-model Directive API Reference.

edited Mar 28, 2016 at 3:33

answered Mar 28, 2016 at 3:24

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Spadaboyz Over a year ago

done change the code just like the answer, but still got Error: this._source is undefined

Collectives™ on Stack Overflow

Upload image to parse using AngularJS upload form

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related