How to upload a file to blobstore using angularjs?

Question

I am creating a audio file uploading system for my project. In this case I am using angularjs app and I use html too. I have written the back end of my application using the google app engine. In this case the problem I found was I followed the google blobstore api and I did the file uploading using a jsp page. But I want to get it done by and html page. And the problem is that there is a java code in the jsp which makes a call to createUploadUrl method in the blobstore api. But in a html page I cannot do it. I tried to do it in the following way using angularjs.

<div class="container">

	<h1>Audio Upload</h1>

	<form method="post" enctype="multipart/form-data">

		<input type="text" name="foo" ng-model="audio.foo"/>
		<input type="file" name="myFile" ng-model="audio.myFile"/>
		<input type="submit" value="Submit" ng-click="upload(audio)"/>

	</form>

</div>

here is the code for the html page.

And the following is the controller for the html page.

function AudioUpload( $http,$filter, $timeout, $scope, $location, $rootScope) {

	console.log("=========================");
	console.log("Audio Upload Controller...");
	$scope.upload = function(audio) {
		$('.line-loader').show();
		$http({
			url : '/upload',
			method : "POST",
			//data : $.param(audio),
			headers : {
				'Content-Type' : 'audio/mp3; charset=UTF-8'
			}
		}).success(function(data) {
			console.log(audio.myFile+"Audio Successfully Uploaded...")

		})

	}

}

And here are the servlets that are being used to get this task done

Serve Servlet

package xxx.xxxx.fileupload;

import java.io.IOException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.appengine.api.blobstore.BlobKey;
import com.google.appengine.api.blobstore.BlobstoreService;
import com.google.appengine.api.blobstore.BlobstoreServiceFactory;

public class Serve extends HttpServlet {
    private BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();

    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse res)
        throws IOException {
            BlobKey blobKey = new BlobKey(req.getParameter("blob-key"));
            blobstoreService.serve(blobKey, res);
        }
}

Upload Servlet

package xxx.xxxxx.fileupload;

import java.io.IOException;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.appengine.api.blobstore.BlobKey;
import com.google.appengine.api.blobstore.BlobstoreService;
import com.google.appengine.api.blobstore.BlobstoreServiceFactory;

public class Upload extends HttpServlet {
	private BlobstoreService blobstoreService = BlobstoreServiceFactory
			.getBlobstoreService();

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {

		

		Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(req);
		List<BlobKey> blobKeys = blobs.get("myFile");

		if (blobKeys == null || blobKeys.isEmpty()) {
			res.sendRedirect("/");
		} else {
			res.sendRedirect("/serve?blob-key="
					+ blobKeys.get(0).getKeyString());
		}
	}
}

I need to get upload the file using an html page and this is the code that is in the index.jsp page which works fine with these servlets.

Index.jsp

<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>

<%
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
%>


<html>
    <head>
    <meta http-equiv="Content-Type" content="audio/mp3; charset=ISO-8859-1">
        <title>Upload Test</title>
    </head>
    <body>
        <form action="<%= blobstoreService.createUploadUrl("/upload1") %>" method="post" enctype="multipart/form-data">
            <input type="text" name="foo">
            <input type="file" name="myFile">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Can anybody please help me to complete my code using angularjs and html without using jsp. Thank you.

Shel · Accepted Answer · 2015-04-02 06:18:37Z

2

Angular doesn't yet support file inputs yet, so you need a directive to get the file from the input. The file can be assigned to the controller, then you can conduct the upload with $http from there.

(function(){
  angular.module('app',[]);

  angular.module('app')
  .controller('FileCtrl', FileCtrl)
  .directive('fileDirective', fileDirective);
  
  function FileCtrl(){
    var vm = this;
    vm.myFile;
    vm.upload = function(){
      // upload stuff goes here
    }
    
  }
  
  fileDirective.$inject = ['$log'];
  function fileDirective($log){
    var directive = {
      restrict: 'A',
      link: link,
      scope: {
        fileDirective: '=fileDirective',
        file: '=name'
    }
    }
    return directive;
    
    function link(scope, element, attrs, controller){
      $log.debug(scope);
      element.bind('change', function(){
        var fileSelected = element[0].files[0];
        $log.debug(fileSelected);
        scope.$apply(function () {
          scope.file = fileSelected;
          $log.debug(scope.file);
        });
      });
    }
  }
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" class="container" ng-controller="FileCtrl as audio">

	<h1>Audio Upload</h1>

	<form method="post" enctype="multipart/form-data">
		<input type="text" name="foo" ng-model="audio.foo"/>
		<input type="file" name="audio.myFile" file-Directive="audio.myFile"/>
		<input type="submit" value="Submit" ng-click="audio.upload(audio)"/>

	</form>
  <p>Your file name is: {{audio.myFile.name}}</p>

</div>

answered Apr 2, 2015 at 6:18

Shel

645 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vibhatha Abeykoon Over a year ago

thanks a lot for the code and I am new to the angular and I really appreciate your help. I cannot put a positive feedback cus the system won't let me cus I am new. And thanks a lot. :) :) :)

Shel Over a year ago

I understand about the feedback -- I'm new too and still trying to figure out how the site works. Glad I could help!

Collectives™ on Stack Overflow

How to upload a file to blobstore using angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related