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.
