You need to create a path string in DOM to represent your browsed file and then add it as background image url. I got it working by modifying your code like below.
<body>
<form action="" id="contactproForm" method="post" ng-app="myApp" ng-controller="myCtrl" enctype="multipart/form-data">
<label for="file">Attachment</label>
<div class="input-box">
<input type="file" id="file" class="input-text" ngf-change="onChange(picFile)" ngf-select ng-model="picFile" name="attachement" accept="image/png, image/jpeg, image/jpg, application/msword, application/vnd.ms-excel, application/pdf " />
</div>
<div id="image"class="image" style="width:200px;height:200px;background-image:url('');"></div> <!-- div with id="image"-->
</form>
<script>
var app = angular.module('myApp', ['ngFileUpload']);
app.controller('myCtrl', ['$scope', '$http', '$timeout', '$compile', 'Upload',
function($scope, $http, $timeout, $compile, Upload) {
$scope.onChange = function(files) {
if (files[0] == undefined) return;
if($scope.isImage(files[0].name.split(".").pop())){ // checking if image
var path = URL.createObjectURL(files[0]); // creating a path for file
document.getElementById('image').style.backgroundImage = "url(" + path + ")"; // setting it as background image of div
}else{
alert("not Image");
}
}
$scope.isImage = function(ext) {
if (ext) {
return ext == "jpg" || ext == "jpeg" || ext == "gif" || ext == "png"
}
}
}
]);
</script>
</body>
I've added comments for changes made.
