Thursday 4 May 2017

Angularjs uplaod image

I'm trying to create an upload function using angularjs. I have watch and read few tutorials in the internet. Unfortunately all the tutorials are too complicated for me because I'm still new in this field.

<form ng-submit="upload(currentUser())">
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Car</label>
                            </div>
                            <div class="col-xs-5">
                                <input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="newCar" required>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Price(RM) per day</label>
                            </div>
                            <div class="col-xs-5">
                                <input type="text" placeholder="80" class="form-control" ng-model="newPrice" required>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Business Area</label>
                            </div>
                            <div class="col-xs-5">
                                <input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="businessArea" required>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Insert Car Image</label>
                                <br>
                            </div>
                            <div class="col-xs-5">
                                <!--<button type="button" class="btn btn-default btn-sm">
                                    <span class="glyphicon glyphicon-picture"></span> Image
                                </button>-->
                                    <input type="file"/>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                            </div>
                            <div class="col-xs-5">
                                <button type="submit" class="btn btn-primary btn-sm pull-right">
                                    <span class="glyphicon glyphicon-globe"></span> Publish
                                </button>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <br>
                    <br>
                </form>
app.controller('postadCtrl', [
    '$scope',
    'auth',
    function($scope, auth) {

        $scope.currentUser = auth.currentUser;

        $scope.posts = [];

        $scope.upload = function(user) {
            $scope.posts.push({
                company_name: user,
                car_type: $scope.newCar,
                seaters: 5,
                price: $scope.newPrice,
                contact: 038880000,
                location: $scope.businessArea
            });
        };
    }
]);

So how do I do this in the simplest form and explanation? And how does my router and module will look like? The output should look like this. enter image description here



via Azinuddin AleleCha

No comments:

Post a Comment