I have an upload script, where you upload an image and it converts it to base64 using angular-base64-upload.
I have an object in my controller, where I post data to an endpoint, I need two things.
- The base_image value to be the base64 code of the image.
- A new object to be created every time an upload happens.
Can someone please help me to achieve this? Thank you.
Summary
Every time I add a new photo I would like the post object array to add a new slot e.g. slot_id: 1, slot_id: 2 and so on, and the image in the slot to have its base64 code in the object base_image
var data = $.param({
json: JSON.stringify({
c_name: $scope,
max_slots: $scope,
slots: [{
slot_id: 1,
base_image: "base 64 image"
}]
})
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Angular Base64 Upload Demo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="PostData">
<strong>Campaign Name :</strong>
{{items.c_name}}
<br>
<strong>Max Slots :</strong>
{{items.max_slots}}
</div>
<div class="container" ng-controller="AddImage">
<form name="form">
<h3>Add Creatives</h3>
<div class="input-group">
<label for="file">Select Files</label>
<span class="help-block">
<ul>
<li>required</li>
<li>Maxsize = 600</li>
<li>Accept = image</li>
<li>Maximum = 5</li>
</ul>
</span>
<input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*" maxsize="600" required maxnum ="5" on-change="onChange" onload="onLoad"
ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" required>
</div>
<div class="alert" ng-class="{'alert-danger': form.files.$invalid, 'alert-success': form.files.$valid}">
form.files.$error:
{{form.files.$error}}
</div>
<b>Model Value:</b>
<table class="table table-bordered table-striped">
<tr>
<th>filename</th>
<th>thumbnail</th>
<th>filetype</th>
<th>filesize (<i><small>KB</small></i>)</th>
<th>base64</th>
</tr>
<tr ng-repeat="file in files">
<td>{{file.filename}}</td>
<td ng-repeat="step in stepsModel"><img class="thumb" ng-src="{{step}}"/></td>
<td>{{file.filetype}}</td>
<td>{{file.filesize / 1000}}</td>
<td>{{file.base64.substring(0, 30)}}...</td>
</tr>
<tr>
<td colspan="4" ng-show="files.length == 0">
<small><i>No file selected.</i></small>
</td>
</tr>
</table>
</form>
</div>
<form ng-submit="sendPost()">
<button type="submit">Save</button>
</form>
</body>
</html>
JavaScript
angular.module('myApp', ['naif.base64'])
.controller('PostData', function ($scope, $http) {
$scope.items = {
c_name: "Campaign name here",
max_slots: 5,
slots: [
{
slot_id: 1,
base_image: "base 64 image"
}
]
};
$scope.sendPost = function() {
var data = $.param({
json: JSON.stringify({
c_name: $scope,
max_slots: $scope,
slots: [
{
slot_id: 1,
base_image: "base 64 image"
}
]
})
});
$http.post("/echo/json/", data).success(function(res, status) {
$scope.items = res;
console.log("$scope.items: ", $scope.items);
}, function() { console.log("There is an error"); })
}
})
.controller('AddImage', function ($scope, $http, $window, $rootScope) {
$scope.imageUpload = function (element) {
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
};
$scope.imageIsLoaded = function (e) {
$scope.$apply(function () {
$scope.stepsModel.push(e.target.result);
});
$scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
};
$scope.onChange = function (e, fileList) {
};
};
var uploadedCount = 0;
$scope.stepsModel = [];
});