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
<title>Angularjs File or Image Uploading</title> <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a> <form name="form" role="form"> <br /> <img style="width:300px"> </form> 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]); } });
filedo_upload.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
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
include libs
<title>Angularjs Simple file or Image Uploading Example</title> <a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a>
index.html
<div class="file-upload"> <button>upload me</button> </div>
app.js
We can write our own fileUpload service to reuse it in the controller
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); }; }]);
save_filedata.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 . "<br>" . $conn->error; } $conn->close(); ?>