I am creating a web app in which I am storing user images in my folder, after a while I found an example which helps me,
but I am getting the error
HTTP Error 403.14 - Forbidden The Web server is configured to not list
the contents of this directory.
and my code is
source
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
</head>
body
<div ng-app="myApp" ng-controller="myCtrl">
<input type="file" file-model="myFile" />
<button ng-click="uploadFile()">upload me</button>
save
</div>
script
<script>
//inject angular file upload directives and services.
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
})
.success(function () {
})
.error(function () {
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function ($scope, fileUpload) {
$scope.a = function () {
console.log('called');
}
$scope.uploadFile = function () {
console.log('called');
var file = $scope.myFile;
console.log('file is ');
console.dir(file);
var uploadUrl = "http://localhost:9206//file//";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>
and the url is
http://localhost:9206//file//
let me explain this
this is my one page application, I want to save image in my folder called file,
when a user uploaded his/her image, the image should be stored in the folder,
but instead of this I am getting this error
(HTTP Error 403.14 - Forbidden)
what I need to do now?
It appears that the problem can be fixed by enabling the IIS. You can enable and configure the Internet Information Service (IIS) on your computer (given that you are using localhost) by following the instructions on this link:
https://msdn.microsoft.com/en-us/library/ms181052(v=vs.80).aspx
Related
I want to invoke a custom directive inside another custom directive's template.
Please find below code snippets -
Scenario 1 (Not working)
angular.module('myApp')
.directive('customOnChange', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeFunc = scope.$eval(attrs.customOnChange);
element.bind('change', function (event) {
var files = event.target.files;
onChangeFunc(files);
});
element.bind('click', function () {
element.val('');
});
}
};
})
.directive('writePost', function () {
return {
restrict: 'E',
link: function (scope) {
scope.changeUserProfileImage = function (files) {
console.log(files); // I should receive uploaded files here.
};
},
templateUrl: function () {
return 'writePost.html';
}
};
});
index.html
<write-post></write-post>
writePost.html
<input type="file" ng-model="file" name="file"
id="photo-upload1" custom-on-change="changeUserProfileImage"
value="Change Image"
title="Change Image"/>
The error I am receiving when I upload a file -
Uncaught TypeError: onChangeFunc is not a function
Scenario 2 (Working)
Although independently I am able to call customOnChange directive from index.html. Working code snippet -
index.html
<input type="file" ng-model="file" name="file"
id="photo-upload1" custom-on-change="changeUserProfileImage"
value="Change Image"
title="Change Image"/>
myCtrl.js
angular.module('myApp')
.controller('myCtrl', ['$scope', function ($scope) {
$scope.changeUserProfileImage = function (files) {
console.log(files); // I am receiving uploaded files here.
};
}]);
Can someone help me identifying, where I am going wrong in first scenario ?
link in directive definition defaults to postLink - it executes after template with its directives is parsed. (read more here https://docs.angularjs.org/api/ng/service/$compile#pre-linking-function)
As a solution you can move $eval inside callback:
element.bind('change', function (event) {
var onChangeFunc = scope.$eval(attrs.customOnChange);
var files = event.target.files;
onChangeFunc(files);
});
Correct way:
If you want run function - let it be function in html:
custom-on-change="changeUserProfileImage(files)"
Now run it as function:
element.bind('change', function (event) {
var files = event.target.files;
scope.$eval(attrs.customOnChange, {files: event.target.files});
});
Things i did :
used inappbrowser
used google doc
used webview
so i have tried all these methods to show the pdf file in android device using ionic. But no use, i can see the download button in all these methods. Can any one tell me how can i display pdf without download option for user.
my code :
<div class="col col-50 clsGrid" ng-click="showFile('http://www.orimi.com/pdf-test.pdf')">
</div>
my pdf file :
http://www.orimi.com/pdf-test.pdf
My JS :
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$ionicLoading.show({
duration: 1000
});
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.showFile = function(FileUrl) {
var file = FileUrl;
console.log(file);
//var openurl = cordova.InAppBrowser.open(file, '_blank');
// var openurl = cordova.InAppBrowser.open(file,'_blank', 'location=yes');
// var openurl = cordova.InAppBrowser.open("https://docs.google.com/viewer?url=" + file, '_blank');
// var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true', '_blank');
//window.open("https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true",'_blank');
var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true&toolbar=0&navpanes=0&scrollbar=0', '_blank');
}
I tried all ways. But not able to find the solution.If any one know it will be usefull.If any expert in this, i can send my demo project for reference .
Thanks in advance !
You will need to use ng-pdfviewer.
AngularJS PDF viewer directive using pdf.js.
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
and in your AngularJS code:
var app = angular.module('testApp', [ 'ngPDFViewer' ]);
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);
I'm building a basic AngularJS Login page and the $window.location.href did not re-direct the page to a new html in my system, hosted by WAMP. I even tried re-directing it to google. Nothing happens. I tried all the available solutions here and nothing seems to work. Any solutions ?
JS followed by HTML
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.submit = function() {
if ($scope.username && $scope.password) {
var user = $scope.username;
var pass = $scope.password;
if (pass == "admin" && user == "admin#admin.com") {
alert("Login Successful");
$window.location.href = "http://google.com"; //Re-direction to some page
} else if (user != "admin#admin.com") {
alert("Invalid username");
} else if (pass != "admin" && user == "admin#admin.com") {
alert("Invalid password");
}
} else {
alert("Invalid Login");
}
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="login.js"></script>
<link rel="stylesheet" href="login.css">
</head>
<body ng-controller="MainCtrl">
<form>
<label>Username:</label>
<input type="email" ng-model="username" class="lab1" />
</br>
</br>
<label></label>Password:</label>
<input type="password" ng-model="password" class="lab2">
</br>
<button type="submit" ng-click="submit()" class="buttonclass">login</button>
</form>
</body>
</html>
In angular js you can use $location. Inject it in your controller :
app.controller('MainCtrl', function($scope, $location) { ... }
And if you want to redirect to google use its url() method :
$location.url('http://google.fr');
you can also use path() method for relative url :
$location.path('home'); // will redirect you to 'yourDomain.xx/home'
https://docs.angularjs.org/api/ng/service/$location
It is worth noting the current documentation for $location. Specifically the quote:
When should I use $location?
Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.
What does it not do?
It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.
If you need to redirect the browser to a new page, $window.location is definitely recommended.
Try this,
var homeApp = angular.module('HomeApp', []);
homeApp.controller('HomeController', function ($scope, $http, $window) {
$scope.loginname = "Login To Demo App";
$scope.login = function () {
var name = $scope.username;
var pwd = $scope.password;
var req = {
method: 'POST',
url: '../Account/LoginAccount',
headers: {
'Content-Type': undefined
},
params: { username: name, password: pwd }
}
$http(req).then(function (responce) {
var url = '';
if (responce.data == "True") {
url = '../Account/WelcomePage';
$window.location.href = url;
}
else {
url = '../Account/Login';
$window.location.href = url;
}
}, function (responce) {
});
}
});
You can use $window.location.href in AngularJS
app.controller('MainCtrl', function ($scope,$window) {
$scope.formData = {};
$scope.submitForm = function (formData){
$window.location.href = "jobs";
};
})
Angular has its own location handler named $location which I prefer to use in angular app;
app.controller('MainCtrl', function($scope, $location) {
inject to your controller and use as following;
$location.path('http://foo.bar')
My two cents -
I could not get $window.location.href or $location.path to work to navigate away from a page. In the documentation for $location (under caveats) it says:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
$location Caveats
Documentation for $window is... lacking. Regardless, neither of the services worked for me in the controller (though $location.path works in my index.run file).
In this project I am using ui-router, so doing this worked:
$state.go('state.name'); -- where state.name is the string of the state/page name to which the user wants to go, i.e. 'index.users'
How to upload the image in angularjs and mysql and node.js?
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "myApp">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
</script>
</body>
</html>
AngularJs is a client side language. so it is not able to direct save data to MySql.
If any data is store in a database or in a server you must used any server side language.
You are create a web service that can tack response from client side (AngularJS) and send proper response.
File Upload in Mysql using NodeJs
fs.open(temp_path, 'r', function (status, fd) {
if (status) {
console.log(status.message);
return;
}
var buffer = new Buffer(getFilesizeInBytes(temp_path));
fs.read(fd, buffer, 0, 100, 0, function (err, num) {
var query = "INSERT INTO `files` SET ?",
values = {
file_type: 'img',
file_size: buffer.length,
file: buffer
};
mySQLconnection.query(query, values, function (er, da) {
if (er)throw er;
});
});
});
function getFilesizeInBytes(filename) {
var stats = fs.statSync(filename)
var fileSizeInBytes = stats["size"]
return fileSizeInBytes
}
I do experiments with node.js and socket.io and it works fine locally.
I can read an html file and manage an interactive button for several users.
So i uploaded it on Cloud9 but i have an error ENOENT trying to find the html file.
It's in root (like in local) and the line is fs.readFile('ex.html' etc...
Here is the code of a test to open an html file and i have the enoent error on the console :
var http = require('http');
var fs = require('fs');
http.createServer(function(request, response) {
response.writeHead(200, {
'Content-Type': 'text/html'
});
fs.readFile('ex.html', function(err, data){
if(err) throw err;
response.end(data);
});
}).listen(process.env.PORT, process.env.IP);
Here is another program (full) that displays a blank page...
server :
var http = require('http');
var fs = require('fs');
// Creation du serveur
var app = http.createServer(function (req, res) {
// On lit notre fichier app.html
fs.readFile('app.html', 'utf-8', function(error, content) {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(content);
});
});
var io = require("socket.io");
io = io.listen(app);
io.sockets.on('connection', function (socket) {
socket.on('joue', function () {
socket.broadcast.emit('joue2');
}); // joue
}); // connection
app.listen(process.env.PORT, process.env.IP);
client (app.html) :
<html><head> <title>Hello</title></head><body>
<button id="button">clic</button>
<div id="render">a</div>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
var button = document.getElementById('button');
var render = document.getElementById('render');
button.addEventListener("click", clique, false);
function clique() {
socket.emit('joue');
}
socket.on('joue2', function () {
if (render.innerHTML == 'a') {
render.innerHTML = 'clic multi';
} else {
render.innerHTML = 'a';
}
});
</script></body></html>
I have installed socket.io on the server and all files are in the root of the folder node.js.
I already asked to Cloud9 but they said it works for them...
Sorry for my english and if im a beginner.
Thank you for your help :)
I guess your ex.html file is in node.js directory.
Try fs.readFile('node.js/ex.html', ...