One of my tasks involves retrieving json objects through a simple post method.
The json contains multiple campaigns, organized in an array structure.
Each campaign holds slots, which are also arrays with one or more base_image elements.
My goal is to display information for each individual campaign on the screen.
max_slotsc_nameslots.base_image
This way, I can showcase the name of each campaign, the maximum number of allowed slots, and the associated images within each campaign.
PURPOSE
I am currently working on implementing an image upload and preview feature for each campaign. The objective is to only show the uploaded image preview within the specific campaign it belongs to.
ISSUE
However, upon uploading an image, the preview is displayed across all campaigns instead of being linked to the individual campaign.
Refer to the image below:
https://i.stack.imgur.com/dKF46.png
HTML
<body ng-app="myApp">
<div ng-controller="Dashboard">
<!--FIRST ng-repeat-->
<div ng-repeat="campaign in campaigns" class="campaign-container">
<div class="container">
<h1>{{campaign.c_name}} {{$index}}</h1>
<strong>This Campaign you are allowed {{campaign.max_slots}} Images</strong>
<table class="table">
<thead>
<tr>
<th>Select File</th>
<th>Preview Image</th>
<th>Add to list</th>
<th>Images</th>
<!--<th>Remove Image</th>-->
<th>Save Campaign</th>
</tr>
</thead>
<tbody>
<tr>
<td> <!--UPLOAD IMAGE-->
<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>
<!--END-->
</td>
<td> <!--PREVIEW IMAGE-->
<div class="preview">
<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
</div>
<!--END--></td>
<td>
<button ng-click="addImage()">Add image</button>
</td>
<td>
<div ng-repeat="slot in campaign.slots" class="slot">
<img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{base_image}}"
alt="slot image">
<button ng-click="removeImage(slot)">Remove Image</button>
</div>
</td>
<!--<td>Remove button to be here</td>-->
<td>
<button ng-click="SaveImage()">Save to API</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--END FIRST ng-repeat-->
</div>
</body>
JavaScript
.controller('Dashboard', function ($scope, $http, $timeout) {
$scope.campaigns = [];
$scope.preview = '';
// $scope.slots = [];
$scope.maxSlots = [5];// this dynamic
$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";
}
};
img.src = fr.result;
};
fr.readAsDataURL(file);
} else {
$scope.notPerfect = "to big";
}
};
$scope.addImage = function (index) {
if ($scope.campaigns[index].slots.length < $scope.campaigns.maxSlots) {
$scope.campaigns[index].slots.push({
"slot_id": $scope.campaigns[index].slots.length + 1,
"base_image": $scope.preview,
"path_image": ""
});
} else {
window.alert("you have to delete a slot to generate a new one");
}
};
$scope.GetData = function () {
$http({
url: "http://www.site.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;
console.log("logging campaings", $scope.campaigns);
//$scope.slots = response.data[0].slots;
//$scope.maxSlots = response.data[0].maxSlots;
}, function (response) {
// failed
console.log('failed getting campaigns goo back to log in page.');
// console.log(response);
});
};
$scope.GetData();
})