jedi nerd jedi nerd - 2 months ago 24
AngularJS Question

Display a loading directive while loading a file

I want to display a loading icon when I upload an image larger than 4MB to my program. I will supply the code I have for the directive loading animation and the code that is used when uploading an image. I am currently trying to use

mdDialog
although that may not be what I need to do. So the section of code that this is occurring is
if (fileSize < 8000000 && fileSize > 4000000)
. However the directive loading animation isn't appearing properly. So I am not sure how to make that happen?

image-upload

uploader.onAfterAddingFile = function(fileItem) {
if($scope.entityType == 'facility') {
var attachmentType = $scope.fileType;
var fileType = fileItem.file.type.split('/')[0];

if (fileType != "image") attachmentType = "file";
else if (attachmentType != "floorplan") attachmentType = "photo";

// -- clear file upload if not an image file
if (attachmentType == "file") {
uploader.clearQueue();
}
else {
fileItem.formData = [
{
"entityType": 'facility',
"purpose": 'facility_' + attachmentType,
"targetEntityId": $scope.targetEntityId
}
];

//THIS IS WHERE WE UPLOAD
$scope.uploader.uploadAll();
}
}
else if (!$scope.accept || $scope.accept.includes("image")) {
var fileSize = fileItem.file.size;
fileType = fileItem.file.type.split('/')[0];

if (fileSize > 8000000) {
uploader.clearQueue();
console.log("Error, the selected file is too large. Image must be less than 8MB.")
}
else if (fileSize < 8000000 && fileSize > 4000000) {
$mdDialog.show({
templateUrl: 'controls/load-animate/load-animate-directive.tpl.html',
controllerAs: 'loadAnimate'
});
fileItem.formData = [
{
"targetEntityId": $scope.targetEntityId,
"entityType": $scope.entityType
}
];
$mdDialog.hide();
$scope.uploader.uploadAll();
}
else if (fileType != "image") {
uploader.clearQueue();
console.log("Error, the selected file is not an image.");
}
else {
fileItem.formData = [
{
"targetEntityId": $scope.targetEntityId,
"entityType": $scope.entityType
}
];

$scope.uploader.uploadAll();
}
}
else {
fileItem.formData = [
{
"targetEntityId": $scope.targetEntityId,
"entityType": $scope.entityType
}
];

$scope.uploader.uploadAll();
}
};

uploader.onCompleteItem = function(fileItem, response, status, headers) {
if (response.ok) {

$scope.uploadFn({response: response});
}
};
};

init();
}
}());


load-animate-directive.tpl.html

<div id="load-animate-contain" class="layout-column layout-align-center-center">
<div class="layout-column layout-align-center-center">
<img id="load-circle-top" class="its-spinning" src="/images/img.loadCircle-top.png" />
<img id="load-circle-bottom" src="/images/img.loadCircle-bottom.png" />
<p class="m2head its-blinking">Loading...</p>
</div>
</div>

Answer

In your fileUploadCtrl() you could do something like set $scope.loading = true/false based on where you are in the process, then in your view do

<load-animate ... ng-show="loading"></load-animate>