AngularJS File-image Upload ng-file-upload | angular-file-upload
AngularJS File Upload Example & Tutorial
we have used HTML Form, CSS and AngularJS and PHP server.This Example Show to you how to upload the file using AngularJS.AngularJS $http protocols is a service that provides simple functionalities to receive all the headers (get) and send (post) method to information to a remote protocols HTTP server side send data.AngularJS File-image Upload server script ng-file-upload
index.html
[php]
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
var app = angular.module(‘live-App’,[]);
app.controller(‘liveCtrl’, function($scope, $http) {
//create a form array
$scope.form = [];
//create a file
$scope.files = [];
$scope.myformsubmit = function() {
$scope.form.image = $scope.files[0];
//http server method post
$http({
method : ‘POST’,
url : ‘/filedo_upload.php’,
processData: false,
transformRequest: function (data) {
var formData = new FormData();
formData.append(“image”, $scope.form.image);
return formData;
},
data : $scope.form,
headers: {
‘Content-Type’: undefined
}
}).success(function(data){
console.log(data);
});
};
$scope.myfileupload = function(element) {
$scope.latestfile = element.files[0];
var fdread = new Filefdread();
fdread.onload = function(event) {
$scope.filedata_source = event.target.result
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}
fdread.readAsDataURL(element.files[0]);
}
});
[/php]
filedo_upload.php
[php]
[/php]
SETUP THE PROJECT STRUCTURE
Example is working on bellow listed three things, you can see.
1.index.html
2.app.js
3.save_filedata.php
The post explains to the very easy ways to different stages involved in simple uploading a file or images on angularjs. Hope you will search it very useful.
File Upload Using AngularJS with php server script Example 2
include libs
[php]
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
[/php]
index.html
[php]
[/php]
app.js
We can write our own fileUpload service to reuse it in the controller
[php]
var liveApp = angular.module(‘liveApp’, []);
liveApp.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]);
});
});
}
};
}]);
liveApp.service(‘fileUpload’, [‘$http’, function ($http) {
this.uploadFileToUrl = function(file, fileuploadquery, name){
var filedcontent = new FormData();
filedcontent.append(‘file’, file);
filedcontent.append(‘name’, name);
$http.post(fileuploadquery, filedcontent, {
transformRequest: angular.identity,
headers: {‘Content-Type’: undefined,’Process-Data’: false}
})
.success(function(){
console.log(“Data Success”);
})
.error(function(){
console.log(“error display”);
});
}
}]);
liveApp.controller(‘liveCtrl’, [‘$scope’, ‘fileUpload’, function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.filename;
console.log(‘file is ‘ );
console.dir(file);
var fileuploadquery = “save_filedata.php”;
var text = $scope.name;
fileUpload.uploadFileToUrl(file, fileuploadquery, text);
};
}]);
[/php]
save_filedata.php
[php]
connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
$sql_query = “INSERT INTO products (name,filename) VALUES (‘”.$name.”‘,'”.basename($_FILES[“file”][“name”]).”‘)”;
if ($conn->query($sql_query) === TRUE) {
echo json_encode($_FILES[“file”]); // simple create new file uploaded
} else {
echo “Error: ” . $sql_query . “
” . $conn->error;
}
$conn->close();
?>
[/php]