AngularJS File-image Upload ng-file-upload | angular-file-upload

Rate this post

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]

Angularjs File or Image Uploading
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: {

READ :  Angular Remove Item From Comma Separated string

‘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]

Angularjs Simple file or Image Uploading Example
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

[/php]
index.html
[php]

[/php]

READ :  Creating Dynamic Graphs and Charts using Vuejs

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);
};

READ :  Angular 2 Installation CLI setup environment

}]);
[/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]

Example

Leave a Reply

Your email address will not be published.