I am designing an image and doing saving.The image is first time binding in view.When am redesigning the same
image and saving again.But view is not updating.
$scope.$on('Save', function () {
vm.save();
if (vm.scenarioStoryBoardData.ScenarioStoryBoard.isDesigner) {
var file = vm.DrawStateService.getBlob();
file.name = vm.parentScenario.replace(" ", "") + "_scenario_storyboard.png";
Upload.upload({
url: BodStudioServicesEndpoint + "TechnologyStoryboardImage/Upload?UserId=" + LoggedInUserGUID,
method: "POST",
data: { file: file },
cache: false
}).then(function (resp) {
vm.scenarioStoryBoardData.ScenarioStoryBoard.ImgSrc = resp.data;
$scope.$parent.studio.saveBodData();
}, function (resp) {
console.log('Error');
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
});
}
else
$scope.$parent.studio.saveBodData();
});
<img ng-click="scenarioStoryboard.importGallery();scenarioStoryboard.currParentIndex = -1;scenarioStoryboard.isAllowToDelete = true;" class="img-responsive" ng-if="scenarioStoryboard.scenarioStoryBoardData.ScenarioStoryBoard.ImgSrc" ng-src="{{scenarioStoryboard.imagesUrl}}{{scenarioStoryboard.scenarioStoryBoardData.ScenarioStoryBoard.ImgSrc}}" />
Related
I want to add my uploaded file by ng-file-upload to another data which i sending to my Java backend. I wondering how to do it, when I have to put url in my .upload. In this case that can't work cause sendMail sending firstly file, next the text data. How can I fix it?
$scope.sendMail = function(){
$scope.uploadFiles = function(file) {
$scope.attach = file;
file.upload = Upload.upload({
data: {file: file}
});
}
$scope.emailData = new EmailData();
$scope.emailData.to = "myMail#a.com";
$scope.emailData.from = "yourMail#a.com";
$scope.emailData.type = "TYPE";
$scope.emailData.title = $scope.data.title;
$scope.emailData.descr = $scope.data.description;
$scope.emailData.template = "template";
$scope.emailData.file = $scope.attach;
$http.post("sendemail", $scope.emailData, {headers: {'Content-Type': 'application/json'} })
.then(function (response) {
$scope.succes = true;
},
function(fail) {
$scope.error = true;
});
}
this is example from ng-file-upload Github
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
as you see you can send what you want inside data
use content-type: multipart form/data & make use form-data; have a look at this link https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
I'm using ng-file-upload to upload multiple files to the server. The server responds back after a while (~10 seconds). In this time I would like to show a spinner on the screen.
I'm currently showing a spinner like this
<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif"/>
but it is there permanently. How can I make it so that it appears only for the time until the response is back from the server?
my upload code follows:
Upload.upload({
url: 'http://localhost:8080/myapp',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
$scope.text = response.data.text;
$scope.notext = response.data.notext;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
If I got you right...
html:
<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif" ng-hide="loaderHidden"/>
js:
$scope.loaderHidden = true;
function upload() {
$scope.loaderHidden = false;
Upload.upload({
url: 'http://localhost:8080/myapp',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.loaderHidden = true;
$scope.result = response.data;
$scope.text = response.data.text;
$scope.notext = response.data.notext;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
then just call upload()
How do i track if a upload is success and redirect to a certain page using angular and ng-file upload (https://github.com/danialfarid/ng-file-upload)
Currently it uploads the file but i need to show an error if the form is failed to insert to mysql or show the success page
Below is my angular function
Upload.upload({
url: 'api/upload-image.php',
method: 'POST',
file: file,
data: {
'awesomeThings': $scope.awesomeThings,
'targetPath' : '/media/'
}
})
in my php code
$status = $this->Upload_tools->add($data);
If an upload is access status will return true or else false
if success i want to show this page
$location.path('/show/'+qid);
See example code in ng-file-upload read.me:
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
Now, your code will be something like this:
$scope.upload = function (file) {
Upload.upload({
url: 'api/upload-image.php',
method: 'POST',
file: file,
data: {
'awesomeThings': $scope.awesomeThings,
'targetPath' : '/media/'
}
}).then(function (resp) {
//Success case code
$location.path('/show/'+qid);
}, function (resp) {
//Error case code
}, function (evt) {
//progress calculation
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
With this directive: ng-file-upload
How can I upload sequentially (in order, queue) multiple files one by one? I'm thinking about chained promises, but I don't know how can I combine promises and directive.
This is an example to upload multiple files, but all at the same time and not in order.
This is my code:
for (var i = 0; i < files.length; i++) {
Upload.upload({
url: config.base+'/upload/',
data: {
file: files[i],
}
}).then(function (response) {
vm.reloadImatges();
vm.upload.progress=0;
vm.upload.files--;
}, function (resp) {
}, function (evt) {
vm.upload.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}
I found a solution, maybe not the best, but it works
http://jsfiddle.net/erLax2fm/2/
Code below:
var doSomething = function (index) {
var defer = $q.defer();
Upload.upload({
url: url: config.base+'/upload/',
data: {
file: objects[index]
}
}).then(function (response) {
objects[index].processed = true;
if (objects[++index]) {
defer.resolve(index);
} else {
defer.reject();
}
}, function (response) {
}, function (evt) {
vm.upload.progress = parseInt(100.0 * evt.loaded / evt.total);
});
defer.promise.then(doSomething);
};
doSomething(0);
I am using this ng-file-upload module and i used ngf-pattern to restrict image file type those only allowable to upload. In case someone upload wrong file type, then, I need to display a box that should show error box to user Invalid file type has been uploaded.
On my below code, for example, I have used supported images file type jpg on ngf-pattern. I should display error in case I upload png file
On the same, I want to display the error on wrong file type is uploaded.
Please help me on this.
HTML CODE
<div ng-controller="AssetsUploadController">
<div class="assetsUploadSection">
<div ngf-drop="uploadFiles($files, $invalidFiles)" class="assets-drop-box" ngf-drag-over-class="assets-dragover" ngf-multiple="true" ngf-pattern="'image/jpg,image/jpeg,videos/*,application/pdf'"><img src="dragDrop.png"/>
<button ngf-select="uploadFiles($files, $invalidFiles)" multiple type="button">Upload Assets</button></div></div>
</div>
Angular code
var app = angular.module('myApp', ['ngFileUpload']);
app.controller('ImageController', function ($scope, Upload,$timeout) {
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
$scope.uploadFiles = function (files) {
$scope.files = files;
console.log('upload files'+ files);
if (files && files.length) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}
});