{"id":9446,"date":"2014-05-22T13:02:24","date_gmt":"2014-05-22T18:02:24","guid":{"rendered":"http:\/\/jianmingli.com\/wp\/?p=9446"},"modified":"2014-05-22T13:02:24","modified_gmt":"2014-05-22T18:02:24","slug":"jquery-file-upload","status":"publish","type":"post","link":"https:\/\/jianmingli.com\/wp\/?p=9446","title":{"rendered":"JQuery File Upload"},"content":{"rendered":"
\n

Contents<\/h2>\n
    \n\t
  1. \n\t\tDatabase Table<\/a>\n\t<\/li>\n\t
  2. \n\t\tRESTful Service<\/a>\n\t\t
      \n\t\t\t
    1. \n\t\t\t\tDirectory Structure<\/a>\n\t\t\t<\/li>\n\t\t\t
    2. \n\t\t\t\tJDeveloper Libraries and Classpath<\/a>\n\t\t\t<\/li>\n\t\t\t
    3. \n\t\t\t\tweb.xml<\/a>\n\t\t\t<\/li>\n\t\t\t
    4. \n\t\t\t\tJersey RESTful Service Java File<\/a>\n\t\t\t<\/li>\n\t\t<\/ol>\n\t
    5. \n\t\tjQuery Script<\/a>\n\t<\/li>\n\t
    6. \n\t\tTest HTML Page<\/a>\n\t\t
        \n\t\t\t
      1. \n\t\t\t\tUpload Page<\/a>\n\t\t\t<\/li>\n\t\t\t
      2. \n\t\t\t\tDownload Page<\/a>\n\t\t\t<\/li>\n\t\t<\/ol>\n\t
      3. \n\t\tReferences<\/a>\n\t<\/li>\n<\/ol>\n<\/ol>\n<\/div>\n
         <\/div>\n

        Database Table<\/h2><\/span>\n
        \r\nCREATE TABLE \"TEST_ATTACHMENT\" \r\n(\t\r\n\t\"ID\" VARCHAR2(20 BYTE) NOT NULL ENABLE, \r\n\t\"ATTACHMENT\" BLOB, \r\n\tCONSTRAINT \"TEST_ATTACHMENT_PK\" PRIMARY KEY (\"ID\")\r\n);\r\n<\/pre>\n
        RESTful Service<\/h2><\/span>\n
        * See this post<\/a> on how to setup RESTful service using JDeveloper<\/p>\n
        Directory Structure<\/h3><\/span>\n
        \"\"<\/a><\/h6><\/span>\n
        JDeveloper Libraries and Classpath<\/h3><\/span>\n
        * Make sure to include matching<\/strong> versions of jersey-multipart.jar<\/strong> and mimepull.jar<\/strong><\/p>\n
        \"\"<\/a><\/h6><\/span>\n
        web.xml<\/h3><\/span>\n
        \r\n\r\n\r\n  \r\n    jersey<\/servlet-name>\r\n    com.sun.jersey.spi.container.servlet.ServletContainer<\/servlet-class>\r\n    1<\/load-on-startup>\r\n  <\/servlet>\r\n  \r\n    jersey<\/servlet-name>\r\n    \/jersey\/*<\/url-pattern>\r\n  <\/servlet-mapping>\r\n<\/web-app>\r\n<\/pre>\n
        Jersey RESTful Service Java File<\/h3><\/span>\n
        * This is the POJO Java file with Jersey annotation:<\/p>\n
        \r\npackage test.att.rs;\r\n\r\n\r\nimport com.sun.jersey.core.header.FormDataContentDisposition;\r\nimport com.sun.jersey.multipart.FormDataParam;\r\n\r\nimport java.io.IOException;\r\nimport java.io.InputStream;\r\n\r\nimport java.util.Collections;\r\nimport java.util.List;\r\n\r\nimport javax.naming.Context;\r\nimport javax.naming.InitialContext;\r\nimport javax.naming.NamingException;\r\n\r\nimport javax.ws.rs.Consumes;\r\nimport javax.ws.rs.GET;\r\nimport javax.ws.rs.POST;\r\nimport javax.ws.rs.Path;\r\nimport javax.ws.rs.PathParam;\r\nimport javax.ws.rs.Produces;\r\nimport javax.ws.rs.QueryParam;\r\nimport javax.ws.rs.core.MediaType;\r\nimport javax.ws.rs.core.Response;\r\n\r\nimport org.apache.commons.io.IOUtils;\r\n\r\nimport test.att.ejb.AttSessionEJB;\r\nimport test.att.ejb.TestAttachment;\r\n\r\n\r\n@Path(\"\/attRS\")\r\npublic class AttRS {\r\n    private static String[] whiteList = {\".pdf\", \".doc\"};\r\n    private AttSessionEJB attBean;\r\n    private String mappedName = \r\n        \"FLASApp-TestAttachment-AttSessionEJB#test.att.ejb.AttSessionEJB\";\r\n\r\n    private boolean inWhiteList(String fileName){\r\n        for (String str : whiteList){\r\n            if (fileName.endsWith(str)){\r\n                return true;\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    \r\n    public AttRS() {\r\n        super();\r\n        Context ctx = null;\r\n        try {\r\n            ctx = getIniCtx();\r\n            attBean = (AttSessionEJB)ctx.lookup(mappedName);\r\n        } catch (NamingException e) {\r\n            throw new RuntimeException(e);\r\n        }\r\n\r\n    }\r\n\r\n    @GET\r\n    @Produces( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })\r\n    public List listAttachments() {\r\n        System.out.println(\"listAttachments...\");\r\n        List all = attBean.getTestAttachmentFindAll();\r\n        \/\/TODO sort list\r\n        Collections.sort(all);\r\n        return all;\r\n    }\r\n    \r\n    @GET\r\n    @Path(\"{attId}\")\r\n    @Produces( { MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })\r\n    public TestAttachment findById(@PathParam(\"attId\") String id){\r\n        System.out.println(\"findById: \" + id);\r\n        TestAttachment att = attBean.findByPrimaryKey(id);\r\n        att.setAttachment(null);\r\n        return att;\r\n    }\r\n\r\n    @POST\r\n    @Consumes(MediaType.MULTIPART_FORM_DATA)\r\n    public Response create(\r\n        @FormDataParam(\"attId\") String id, \r\n        @FormDataParam(\"file\") InputStream is, \r\n        @FormDataParam(\"file\") FormDataContentDisposition fileDetails) {\r\n        System.out.println(\"Adding attachment with id \" + id \r\n                           + \" and file name: \" + fileDetails.getFileName());\r\n        if (!inWhiteList(fileDetails.getFileName())){\r\n            return Response.status(400).entity(\"File type not supported.\").build();\r\n        }\r\n        TestAttachment att = new TestAttachment();\r\n        att.setId(id);\r\n        try {\r\n            byte[] ba = IOUtils.toByteArray(is);\r\n            System.out.println(\"InputStream size: \" + ba.length);\r\n            att.setAttachment(ba);\r\n            att.setFileName(fileDetails.getFileName());\r\n        } catch (IOException e) {\r\n            System.err.println(e.getMessage());\r\n            return Response.status(400).entity(\"Error saving file\").build();\r\n        }\r\n        attBean.persistTestAttachment(att);\r\n        return Response.status(200).entity(\"OK\").build();\r\n    }\r\n    \r\n    @GET\r\n    @Path(\"\/downloadFile\")\r\n    @Produces(MediaType.APPLICATION_OCTET_STREAM)\r\n    public Response downloadFile(@QueryParam(value = \"attId\") String id){\r\n        TestAttachment att = attBean.findByPrimaryKey(id);\r\n        System.out.println(\"Attachment size: \" + att.getAttachment().length);\r\n        String fn = att.getId();\r\n        if (att != null && att.getFileName() != null){\r\n            fn = att.getFileName();\r\n        }\r\n        return Response\r\n            .ok(att.getAttachment(), MediaType.APPLICATION_OCTET_STREAM)\r\n            .header(\"content-disposition\", \"attachment; filename = \" + att.getFileName()).build();\r\n    }\r\n\r\n    private static Context getIniCtx() throws NamingException {\r\n        return new InitialContext();\r\n    }\r\n\r\n}\r\n<\/pre>\n
        jQuery Script<\/h2><\/span>\n
        * Download into js<\/em> folder (see previous directory structure)
        \n– jquery-1.8.3.js<\/em>
        \n– jquery.form.js<\/em>
        \n– purl.js<\/em>
        \n* jQuery script:<\/p>\n
        \r\n\r\nvar rootURL = \"http:\/\/127.0.0.1:7101\/FLASApp-TestAttachment-context-root\/jersey\/attRS\";\r\nvar currentAtt;\r\n\r\n\/**\r\n * Find all attachments\r\n *\/\r\nfunction findAll() {\r\n    console.log(\"findAll...\");\r\n    $.ajax( {\r\n        type : 'GET', \r\n        url : rootURL, \r\n        dataType : \"json\",\r\n        success : renderList\r\n    });\r\n}\r\n\r\n\/**\r\n * Find attachment by Id\r\n *\/\r\nfunction findById(){\r\n    var id = $.url().param('attId');\r\n    console.log(\"findById: \" + id);\r\n    $.ajax( {\r\n        type : 'GET', \r\n        url : rootURL + '\/' + id, \r\n        dataType : \"json\",\r\n        success : function(data){\r\n            console.log(\"findById success\");\r\n            currentAtt = data;\r\n            renderDetails(currentAtt);\r\n        },\r\n        error : function (jqXHR, textStatus, errorThrown) {\r\n            console.log('findById error: ' + textStatus + errorThrown);\r\n            alert('findById error: ' + textStatus + errorThrown);\r\n        }\r\n    });\r\n}\r\n\r\n\/**\r\n * Render attachment details\r\n * @param att \r\n *\/\r\nfunction renderDetails(att){\r\n    console.log(\"renderDetails...\");\r\n    $('#attId').empty();\r\n    $('#attId').append(att.id);\r\n    $('#fileName').empty();\r\n    $('#fileName').append(downloadUrl(att));\r\n}\r\n\r\n\/**\r\n * Render a list of all attachments\r\n * @param data \r\n *\/\r\nfunction renderList(data) {\r\n    console.log(\"renderList...\");\r\n    \/\/ JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one')\r\n    var list = data == null ? [] : (data instanceof Array ? data : [data]);\r\n\r\n    $('#attList li').remove();\r\n    $.each(list, function (index, att) {\r\n        var attUrl = rootURL + '\/downloadFile?attId=' + att.id;\r\n        var item = '
      4. ' + att.id + '<\/a>';\r\n        if (att.fileName){\r\n            item += '    ' + downloadUrl(att);\r\n        }\r\n        item += '<\/li>';\r\n        $('#attList').append(item);\r\n    });\r\n}\r\n\r\n\/**\r\n * Build a file download URL\r\n *\/\r\nfunction downloadUrl(att) {\r\n    var attUrl = rootURL + '\/downloadFile?attId=' + att.id;\r\n    var dlurl;\r\n    if (att.fileName){\r\n        dlurl = '' + att.fileName + '<\/a>';\r\n    }\r\n    return dlurl;\r\n}\r\n\r\n\/**\r\n * Upload an attachment\r\n * Requires IE 10 and above since IE 9 and below do not support\r\n * file API and FormData.\r\n *\/\r\nfunction uploadAttachment() {\r\n    console.log('uploadAttachment...');\r\n    var attId = $('#attId').val();\r\n    var file = $('#file').get(0).files[0];\r\n    var formData = new FormData();\r\n    formData.append('attId', attId);\r\n    formData.append('file', file);\r\n    console.log('file size: ' + file.size);\r\n    $.ajax( {\r\n        type : 'POST', \r\n        url : rootURL, \r\n        data : formData, \r\n        processData : false, \r\n        contentType : false, \r\n        success : function (data, textStatus, jqXHR) {\r\n            console.log(\"File uploaded successfully.\");\r\n            findAll();\r\n        },\r\n        error : function (jqXHR, textStatus, errorThrown) {\r\n            console.log('uploadAttachment error: ' + textStatus + errorThrown);\r\n            alert('uploadAttachment error: ' + textStatus + errorThrown);\r\n        }\r\n    });\r\n}\r\n\r\n\/**\r\n * Upload an attachment using jQuery Form Plugin\r\n * which supports ajax file upload for IE9 and below\r\n *\/\r\nfunction uploadAttachmentWithJQueryForm() {\r\n    console.log('uploadAttachmentWithJQueryForm...');\r\n    var options = {\r\n        type : 'POST', \r\n        url : rootURL, \r\n        success : function (data, textStatus, jqXHR) {\r\n            console.log(\"File uploaded successfully.\");\r\n            findAll();\r\n        },\r\n        error : function (jqXHR, textStatus, errorThrown) {\r\n            console.log('uploadAttachment error: ' + textStatus + errorThrown);\r\n            alert('uploadAttachment error: ' + textStatus + errorThrown);\r\n        }\r\n    };\r\n\r\n    $('#attForm').ajaxSubmit(options);\r\n}\r\n<\/pre>\n
        Test HTML Page<\/h2><\/span>\n
        Upload Page<\/h3><\/span>\n
        * This is the test html page (p1.html<\/em>) used to upload file:<\/p>\n
        \r\n\r\n\r\n    \r\n        <\/meta>\r\n    <\/head>\r\n    \r\n    \r\n        
          <\/ul>\r\n\r\n        
          \r\n            ID: \r\n            \r\n            Attachment: \r\n            \r\n            \r\n        <\/form>\r\n\r\n