Angular CRUD to and from API

I am trying to build a system that you upload photos add photos to array, save photos. When you save photo it posts to a API, also the Array is per populated with the current images saved to the API on last visit.

So

1. User uploads photos and sees a preview (Working)
2. Click add and it adds the preview image to the array (NOT WORKING FULLY)
3. Save updated array and post to API. (Working but dose not update array async)

In Summery

I need a array of images that is pulled from a API and the images can be deleted and added then saved back to the API.

Things I need help with

At the moment I print out the array from the API request separately to the array you add the preview image to to display on the front end.

bellow you can see I am getting the base64 from the API and the images added from the preview.

see photo bellow

I need both to be the same, so on load of the page you seen all the images from the API with the delete button next to each image and also when you add image from preview for them to also be with the images from the API but not post to the API and update with new array until click save

My HTML

 <div class="dynamic-upload-container">
            <div class="preview"><img style="height: 100px; width: 100px" ng-src="" alt="preview image"></div>
            <div class="upload-new">
                <input id="fileinput" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)">

            </div>
            <div class="slots-container">
                <table>
                    <tr>
                        <th><p>Campaign Name</p></th>
                        <th> <strong></strong></th>
                    </tr>
                    <tr>
                        <td><p>Max images allowed</p></td>
                        <td><strong></strong></td>
                    </tr>
                    </tr>
                </table>

                <button ng-click="addImage()">Add image</button>

                <h3>these are the images pulled from API</h3>
                <strong></strong>

                <h3>these are the images added from preview</h3>
                    <div ng-repeat="slot in slots"  class="slot">
                        <img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="" alt="slot image">
                        <button ng-click="removeImage(slot)">Remove Image</button>
                </div>

                 <button ng-click="SaveImage()">Save to API</button>
            </div>
        </div>

My JavaScript

.controller('Dashboard', function ($scope, $http, $timeout) {

    $scope.campaigns =[];
    $scope.preview = '';
    $scope.slots = [];
    $scope.maxSlots = 5; // this dynamic

    $scope.safeApply = function(fn) {
        if (this.$root) {
            var phase = this.$root.$$phase;
            if (phase == '$apply' || phase == '$digest') {
                if (fn && (typeof(fn) === 'function')) {
                    fn();
                }
            } else {
                this.$apply(fn);
            }
        } else {
            fn();
        }
    };

    $scope.debug = function(){
        console.log('this is debug');
        console.log($scope.slots.length);
    };

    $scope.uploadImage = function () {
        // console.log('we are here');
        input = document.getElementById('fileinput');
        file = input.files[0];
        size = file.size;
        if (size < 650000) {
            var fr = new FileReader;
            fr.onload = function (e) {
                var img = new Image;

                img.onload = function () {
                    var width = img.width;
                    var height = img.height;
                    if (width == 1920 && height == 1080) {
                        $scope.preview = e.target.result;
                        $scope.perfect = "you added a image";
                        $scope.$apply();

                    } else {
                        $scope.notPerfect = "incorrect definitions";
                        $scope.$apply();
                    }
                };
                img.src = fr.result;
            };

            fr.readAsDataURL(file);
        } else {
            $scope.notPerfect = "to big";
        }
    };

    $scope.addImage = function () {
        if ($scope.slots.length < $scope.maxSlots) {
            $scope.slots.push({
                "slot_id": $scope.slots.length + 1,
                "base_image": $scope.preview,
                "path_image": ""
            });
            $scope.safeApply

        } else {
            window.alert("you have to delete a slot to generate a new one");
            // console.log('you have to delete a slot to generate a new one')
        }
    };

    $scope.SaveImage = function () {
        $http({
            url: "http://www.ccuktech.co.uk/ccuploader/campaigns/updateSlots",
            method: "POST",
            data: { 'campaign': "ben", 'slots': $scope.slots },
            headers: {'Content-Type': 'application/json'}
        }).then(function (response) {
            // success
            console.log('success');
            console.log("then : " + JSON.stringify(response));
            // location.href = '/cms/index.html';
        }, function (response) { // optional
            // failed
            console.log('failed');
            console.log(JSON.stringify(response));
        });
    };

    $scope.removeImage = function(s) {
        $scope.slots.splice($scope.slots.indexOf(s), 1);
    };

    $scope.GetData = function () {
        $http({
            url: "http://www.ccuktech.co.uk/ccuploader/campaigns/getCampaign",
            method: "POST",
            date: {},
            headers: {'Content-Type': 'application/json'}
        }).then(function (response) {
            // success
            console.log('you have received the data ');
            console.log(response);

            $scope.campaigns = response.data;
            //$scope.slots = data.data[0].slots;

        }, function (response) {
            // failed
            console.log('failed getting campaigns goo back to log in page.');
            console.log(response);
        });
    };

    $scope.GetData();
})

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/27/angular-crud-to-and-from-api/
via @lzomedia #developer #freelance #web