I have want to upload the picture from user to the server. The response tell me the upload was success but there is no file in my server.
Here is html
<button class="btn-group" ngf-select ng-model="userData.picFile" name="picFile" ngf-pattern="'image/*'"
ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
ngf-resize="{width: 100, height: 100}">Select</button>
And this is my Controller
var profilePic = "profile_"+localStorageFactory.get('userdata').username;
/////////////////////////////upload//////////////////////////////////////////
$scope.submit = function() {
if ($scope.userData.picFile) {
$scope.upload($scope.userData.picFile);
}
};
// upload on file select or drop
$scope.upload = function (file) {
Upload.upload({
url: 'https://pettention.ga/pettention/img/profile',
data: {file: file,
name: profilePic}
}).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);
});
};
I have call upload function when submit form. And this is Response Message
Success IMG_0067.JPGuploaded. Response: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Sorry for my bad in English. Thank you.
Related
Right now, I have the file being uploaded to a folder as soon as the file is selected from the window that opens. I need this file to be only selected and then eventually upload when the form submit occurs. I also need to save the name of the file being uploaded, so that it can be saved to the database. Here is some of my code:
HTML
<form id="requisitionForm"
name="$parent.requisitionForm"
method="post"
class="form-horizontal"
enctype="multipart/form-data">
<input type="file"
id="quoteAttachment"
name="quoteAttachment"
ngf-select="upload($file)"
class="form-control fixInput"
data-ng-model="vm.requisition.pOR_Detail.quote_Attachment"
data-ng-disabled="vm.disableEditing" />
<button type="button"
data-ng-show="!vm.itemToEdit.iD && !vm.disableEditing2 && (vm.newRequisition || vm.requisition.status_ID === 1)"
class="btn btn-primary dissolve-animation"
data-ng-click="vm.saveAndSubmit()">Save & Submit</button>
</form>
Javascript
$scope.upload = function (file) {
Upload.upload({
url: '../../UploadHandler2.ashx',
data: { file: file, 'username': 'TEST' }
}).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);
});
};
function saveAndSubmit() {
if ($scope.requisitionForm.$valid) {
isSave = true;
datacontext
.save(vm.requisition, vm.newRequisition)
.then(function (data) {
vm.newRequisition = false;
grabEmailsAndSend(vm.requisition, 'submitted');
});
$window.history.back();
}
else {
logError('Error: <br> Invalid Form please fill out the required fields');
}
}
You don't have to upload the file immediately. Just capture the file when it is selected using another function and variable.
HTML
<input type="file"
ngf-select="fileSelected($file)"
/>
Javascript
var selectedFile;
$scope.fileSelected = function(file) {
selectedFile = file;
};
function uploadFile(file) {
Upload.upload({
url: '../../UploadHandler2.ashx',
data: { file: file, 'username': 'TEST' }
}).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);
});
}
function saveAndSubmit() {
uploadFile(selectedFile); // <------------you can call here
if ($scope.requisitionForm.$valid) {
isSave = true;
datacontext
.save(vm.requisition, vm.newRequisition)
.then(function (data) {
// <----------------------- or here, or anywhere, really
vm.newRequisition = false;
grabEmailsAndSend(vm.requisition, 'submitted');
});
$window.history.back();
}
else {
logError('Error: <br> Invalid Form please fill out the required fields');
}
}
I am new with angularjs, why I am getting error 403 forbidden?
The directory in the server has got all the permissions.
Error:
angular.js:10765 GET http://....../ 403 (Forbidden)
Controller:
$scope.submit = function() {
if ($scope.form.file.$valid && $scope.file) {
console.log($scope.file);
$scope.save($scope.file);
}
};
$scope.save = function (file) {
console.log('conferma');
Upload.upload({
url: '/uix/circolari/uploadCircolari',
data: {file: file}
}).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);
});
};
Thanks for the help.
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);
});
I am trying to upload files using Node Api on server and i m using ngfileupload angular Module to handle image on front end.
below is my code:
app.controller('MyCtrl',['Upload','$window',function(Upload,$window){
var vm = this;
vm.submit = function(){
if (vm.upload_form.file.$valid && vm.file) {
vm.upload(vm.file);
}
}
vm.upload = function (file) {
Upload.upload({
url: '/api/upload',
data:{file:file} model
}).then(function (resp) {
if(resp.data.error_code === 0){ //validate success
$window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
} else {
$window.alert('an error occured');
}
}, function (resp) {
console.log('Error status: ' + resp.status);
$window.alert('Error status: ' + resp.status);
}, function (evt) {
console.log(evt);
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
vm.progress = 'progress: ' + progressPercentage + '% ';
});
};
}]);
and my node api code is
apiRoutes.put('/upload', function(req, res){
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function(fieldname,file,filename){
var filePath=path.join(__dirname, './public/file', filename);
fstream=fs.createWriteStream(filePath);
file.pipe(fstream);
fstream.on('close', function(){
console.log("File Saved...........");
});
});
});
Now problem is that , when i hit upload button its showing an alert Error Status:404 and an error:
Not allowed to load local resource: file:///C:/fakepath/IMG-20160126-WA0013.jpg
I dont know how to fix it...
please help me
NgFileUpload send POST request by default. Your api router accepts PUT requests only.
Try to change apiRoutes.put... to apiRouter.post... or set
Upload.upload({
url: '/api/upload',
data: {file:file},
method: 'PUT'
})
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));
});
}
}
});