I created a program where users can upload an image, preview it, and then add it to a list by clicking a button.
The preview functionality is working fine, but when attempting to add the image to the next row in the table, nothing happens...
Question
Can someone help me figure out why the image is not displaying or adding to the list? It should add the photo if the maximum slots allowed is greater than the number of images added.
As shown below, the image should be included in the following section of the table:
https://i.sstatic.net/GZc1X.png
HTML
<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 type="file" fileread="vm.uploadme" id="fileinput-{{ $index }}" onchange="angular.element(this).scope().uploadImage(this)"/>
</div>
<!-- END-->
</td>
<td>
<!-- PREVIEW IMAGE-->
<div class="preview">
<img style="height: 100px; width: 100px" ng-src="{{campaign.preview}}" alt="preview image">
</div>
<!-- END-->
</td>
<td>
<button ng-click="addImage($index)">Add image</button>
</td>
<td>
<div ng-repeat="slot in campaign.slots" class="slot">
<img ng-click="addImage($index)" style="height: 100px; width: 100px" ng-src="{{slots.base_image}}" alt="show image here">
<img ng-src="{{slots.base_image}}" />
<button ng-click="removeImage(slots)">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>
JavaScript
.controller('Dashboard', function ($scope, $http, $timeout) {
$scope.campaigns = [];
$scope.preview = '';
// $scope.slots = [];
// $scope.maxSlots = maxSlots;
$scope.uploadImage = function (element, index) {
console.log(element);
console.log(element.id);
str = element.id;
str = str.substr(str.indexOf('-') + 1);
console.log(str);
index = str;
// console.log('we are here');
input = element;
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) {
console.log('we are here');
$scope.campaigns[index].preview = e.target.result;
// $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 (campaign) {
if(!campaign) return;
if ($scope.length < campaign.max_slots) {
$scope.slots.push({
"slot_id": $scope.length + 1,
"base_image": $scope.preview,
"path_image": ""
});
} else {
window.alert("you have to delete a slot to generate a new one");
}
};