All geek questions in one place

Upload image and save it in local storage using angularjs

I want to have a button on my page from where I can download the image from the local system, and then I want to save this image in my local storage.

I want to learn how to corner here.

+6
source share
2 answers

You want to encode the image as a base line 64 and save it in local storage.

See this answer for an example of how to convert an image to a base string of 64. toDataURL() returns a string that you can save in the same way as usual, you save the string in a JSON object.

To display the image, you use something like this:

 <img src="data:image/jpeg;base64,blahblahblah"></img>

where blahblahblah is the returned string.

+8
source

Follow below to upload and save image using AngularJS

Create an index.php file and initialize the application and create an AngularJS controller.

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-route.min.js"></script> <script src="app.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div> <input type="file" file-model="myFile"/> <button ng-click="uploadFile()">upload me</button> </div> </body> </html>

After that, create app.js and write the code to upload the image using AngularJS.

 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 ' + JSON.stringify(file)); var uploadUrl = "post.php"; fileUpload.uploadFileToUrl(file, uploadUrl); }; }]);

After that, create a post.php file to load the file into memory.

 <?php $upload_dir = "images/"; if(isset($_FILES["file"]["type"])) { $validextensions = array("jpeg", "jpg", "png", "gif"); $temporary = explode(".", $_FILES["file"]["name"]); $file_extension = end($temporary); if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension, $validextensions)) { if ($_FILES["file"]["error"] > 0){ echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>"; } else { if (file_exists($upload_dir.$_FILES["file"]["name"])) { echo 'File already exist'; } else { $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable $filename = rand().$_FILES['file']['name']; $targetPath = $upload_dir.$filename; // Target path where file is to be stored move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file echo 'success'; } } } } ?>

Create an image folder. Hope this helps you. For reference: http://jsfiddle.net/JeJenny/ZG9re/

+1
source

Source: https://habr.com/ru/post/952872/

More articles:


All Articles