Created
September 15, 2014 07:54
-
-
Save goldalworming/deb85761135f22159e15 to your computer and use it in GitHub Desktop.
multiple upload angular.js controller
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//////////////////////////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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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