Skip to content

Instantly share code, notes, and snippets.

@goldalworming
Created September 15, 2014 07:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save goldalworming/deb85761135f22159e15 to your computer and use it in GitHub Desktop.
Save goldalworming/deb85761135f22159e15 to your computer and use it in GitHub Desktop.
multiple upload angular.js controller
//////////////////////////upload
$scope.httpMethod="POST";
$scope.howToSend=1;
$scope.fileReaderSupported = window.FileReader != null;
$scope.uploadRightAway = true;
$scope.hasUploader = function(index,idx) {
return $scope.tmpstore[idx].upload[index] != null;
};
$scope.abort = function(index,idx) {
$scope.tmpstore[idx].upload[index].abort();
$scope.tmpstore[idx].upload[index] = null;
};
$scope.removethis = function(obj,idx){
obj.splice(idx,1);
};
$scope.onFileSelect = function($files,storeto,idx) {
// if ( storeto instanceof Array){
// }else{
// storeto = [];
// $scope.onFileSelect($files,storeto);
// return
// }
$scope.tmpstore[idx] = {};
$scope.tmpstore[idx].selectedFiles = [];
$scope.tmpstore[idx].progress = [];
if ($scope.tmpstore[idx].upload && $scope.tmpstore[idx].upload.length > 0) {
for (var i = 0; i < $scope.tmpstore[idx].upload.length; i++) {
if ($scope.tmpstore[idx].upload[i] != null) {
$scope.tmpstore[idx].upload[i].abort();
}
}
}
$scope.tmpstore[idx].upload = [];
$scope.tmpstore[idx].uploadResult = [];
$scope.tmpstore[idx].selectedFiles = $files;
$scope.tmpstore[idx].dataUrls = [];
for ( var i = 0; i < $files.length; i++) {
var $file = $files[i];
if (window.FileReader && $file.type.indexOf('image') > -1) {
var fileReader = new FileReader();
fileReader.readAsDataURL($files[i]);
function setPreview(fileReader, index) {
fileReader.onload = function(e) {
$timeout(function() {
$scope.tmpstore[idx].dataUrls[index] = e.target.result;
});
}
}
setPreview(fileReader, i);
}
$scope.tmpstore[idx].progress[i] = -1;
if ($scope.uploadRightAway) {
$scope.start(i,storeto,idx);
}
}
}
$scope.start = function(index,storeto,idx) {
$scope.tmpstore[idx].progress[index] = 0;
if ($scope.howToSend == 1) {
$scope.tmpstore[idx].upload[index] = $upload.upload({
url : 'appdata.php/grid/upload',
method: $scope.httpMethod,
headers: {'myHeaderKey': 'myHeaderVal'},
data : {
myModel : $scope.myModel
},
file: $scope.tmpstore[idx].selectedFiles[index],
fileFormDataName: 'myFile'
}).then(function(response) {
// $scope.uploadResult.push(response.data);
storeto.push(response.data);
}, null, function(evt) {
$scope.tmpstore[idx].progress[index] = parseInt(100.0 * evt.loaded / evt.total);
});
} else {
var fileReader = new FileReader();
fileReader.readAsArrayBuffer($scope.selectedFiles[index]);
fileReader.onload = function(e) {
$scope.upload[index] = $upload.http({
url: 'upload',
headers: {'Content-Type': $scope.selectedFiles[index].type},
data: e.target.result
}).then(function(response) {
// $scope.uploadResult.push(response.data.result);
storeto.push(response.data);
}, null, function(evt) {
// Math.min is to fix IE which reports 200% sometimes
$scope.progress[index] = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}
}
/////////////////////////end upload
<td style="border: 1px; width:10%">
<input type="file" class="somefile bs-file-input" multiple ng-file-select="onFileSelect($files,newobj.ATTACHMENT,'newobj')">
<div class="row m-t-sm" ng-show="tmpstore['newobj'].selectedFiles != null">
<div class="col-lg-12 col-sm-12" ng-repeat="f in tmpstore['newobj'].selectedFiles">
<section class="panel">
<div class="panel-body">
<a ng-if="newobj.ATTACHMENT[$index].url" href="{{newobj.ATTACHMENT[$index].url}}" target="_blank" class="text-center">view file</a>
<a ng-click="removethis(tmpstore['newobj'].selectedFiles,$index);" class="text-center"> close</a>
<button class="button" ng-click="start($index)" ng-show="tmpstore['newobj'].progress[$index] < 0">Start</button>
<div class="progress progress-sm m-t-sm" ng-show="tmpstore['newobj'].progress[$index] >= 0">
<div class="progress-bar progress-bar-info progress-striped active" style="width: {{tmpstore['newobj'].progress[$index]}}%">{{tmpstore['newobj'].progress[$index]}}%</div>
</div>
<button class="button" ng-click="abort($index,'newobj')" ng-show="hasUploader($index,'newobj') && tmpstore['newobj'].progress[$index] < 100">Abort</button>
</div>
</section>
</div>
</div>
</td>
<td>
<div ng-show="!value.editing" ng-repeat="(key2, value2) in value.ATTACHMENT" ng-click="value2.x.option=!value2.x.option"> <a href="{{value2.url}}" target="_blank"><i class="icon-paper-clip"></i>{{key2+1}}</a></div>
<div ng-show="value.editing" ng-repeat="(key2, value2) in value.ATTACHMENT"> <a ng-click="value2.x.option=!value2.x.option"><i class="icon-paper-clip"></i></a> <a ng-click="removeattch(value.ATTACHMENT,key2);" style="cursor:pointer;">Delete File {{key2+1}}</a></div>
<input ng-show="value.editing" type="file" class="somefile bs-file-input" multiple ng-file-select="onFileSelect($files,value.ATTACHMENT,key)">
<div class="row m-t-sm" ng-show="tmpstore[key].selectedFiles != null">
<div class="col-lg-12 col-sm-12" ng-repeat="f in tmpstore[key].selectedFiles">
<section class="panel">
<div class="panel-body">
<a ng-if="value.ATTACHMENT[$index].url" href="{{value.ATTACHMENT[$index].url}}" target="_blank" class="text-center">view file</a>
<a ng-click="removethis(tmpstore[key].selectedFiles,$index);" class="text-center"> close</a>
<button class="button" ng-click="start($index)" ng-show="tmpstore[key].progress[$index] < 0">Start</button>
<div class="progress progress-sm m-t-sm" ng-show="tmpstore[key].progress[$index] >= 0">
<div class="progress-bar progress-bar-info progress-striped active" style="width: {{tmpstore[key].progress[$index]}}%">{{tmpstore[key].progress[$index]}}%</div>
</div>
<button class="button" ng-click="abort($index,key)" ng-show="hasUploader($index,key) && tmpstore[key].progress[$index] < 100">Abort</button>
</div>
</section>
</div>
</div>
<span ng-show="value.editing" style="color:red;">don't forget to save changes</span>
</td>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment