I recently started working with Angular and decided to use the angular-file-upload project from GitHub here. I'm currently in the process of setting up the backend for my application, but I'd like to be able to display dropped files locally in the browser. Is there a way to achieve this?
This is what my view code looks like:
<div ng-controller="MyCtrl">
<input type="file" ng-file-select="onFileSelect($files)">
<div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div>
<div id="image_drop_box" ng-file-drop="onFileSelect($files)"
ng-file-drag-over-class="optional-css-class-name-or-function"
ng-show="dropSupported">drop files here</div>
<div ng-file-drop-available="dropSupported=true" ng-show="!dropSupported">HTML5 Drop File is not supported!</div>
<button ng-click="upload.abort()">Cancel Upload</button>
</div>
And the logic implemented in the controller is as follows:
.controller('MyCtrl', function($scope){
$scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
//upload logic
});
}
};
});