unable to receive as an image from ajax to java but able to receive the bytes of image

Question

I am sending an image to server side. The image I am receiving form third party as base64 format and in order to reduce the transfer bandwidth I am sending this data as binary(decode is must). Please note I need this as binary data only in server side.

The problem I am facing: Consider an example, If I send 5kb file from js to java. I am able to receive and see the file where it is saved. But the file seems corrupted and unable to open in ms paint or any other image app. I can able to see the form(image) item in bytes on java debugger! I have been tried lot with below codes and I am unable to find what is the real issue?

JSP code :

function oneMore(){
var base64ImageData = "/9j/4AAQSkZJRgABAQEAYABgAAD/2wCEAA0JCgsKCA"
var converted = Base64.decode(base64ImageData);
//(this is just an sample)
    var formdata = new FormData();
        formdata.append("image", converted);

        /* var formdata = new FormData();
        formdata.append("image", image); */
        $.ajax({
            url : '/RegisterServlet_2/servlet/Register',
            type : "POST",
            data : formdata,
            enctype : 'multipart/form-data',
            processData : false,
            contentType : false
        }).done(function(data)
        {
            alert('File upload completed ...');
        }).fail(function(jqXHR, textStatus)
        {
            alert('File upload failed ...');
        });
    }
</script>

</head>
<body >
    <input type="button" id="testId" name="testName" value="Tester" onclick="oneMore();">
</body>

java side :

import java.awt.Image;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;

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

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class Register extends HttpServlet
{
    private static final long serialVersionUID = -4562252992447370243L;

    // location to store file uploaded
    private static final String UPLOAD_DIRECTORY = "D:/";

    // upload settings
    private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB
    private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB
    private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    { 
        // checks if the request actually contains upload file
        if (!ServletFileUpload.isMultipartContent(request))
            return;

        // configures upload settings
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // sets memory threshold - beyond which files are stored in disk
        factory.setSizeThreshold(MEMORY_THRESHOLD);
        // sets temporary location to store files
        factory.setRepository(new File(System.getProperty("catalina.base"), "temp"));
        System.out.println(factory.getRepository());

        ServletFileUpload upload = new ServletFileUpload(factory);

        // sets maximum size of upload file
        upload.setFileSizeMax(MAX_FILE_SIZE);

        // sets maximum size of request (include file + form data)
        upload.setSizeMax(MAX_REQUEST_SIZE);

        // constructs the directory path to store upload file
        // this path is relative to application's directory
        String uploadPath = UPLOAD_DIRECTORY;

        try
        {
            // parses the request's content to extract file data
            @SuppressWarnings("unchecked")
            List<FileItem> formItems = upload.parseRequest(request);

            if (formItems != null && formItems.size() > 0)
            {
                // iterates over form's fields
                for (FileItem item : formItems)
                {
                    if(item==null)
                        continue;

                    String filePath = uploadPath + File.separator + "Image" + System.currentTimeMillis() + ".jpg";
                    File storeFile = new File(filePath);
                    System.out.println(storeFile);

                    // saves the file on disk
                    item.write(storeFile);

                    InputStream is = item.getInputStream();
                    BufferedImage image = ImageIO.read(is);

                    ImageIO.write(image, "jpg", storeFile);



                }
            }
        } catch (Exception ex)
        {
            ex.printStackTrace();
        }
    }
}

What I am missing here? Thanks in advance!

Answer 1

I can able to transfer image by simply follow changes in java script with blob conversion:

function oneMore()

{
    var base64ImageData = "/9j/4AAQSkZJRgABAQEAYABgAAD/2wCEAA0JCgs"
    var formData = reduceImgTransferBandwidth(base64ImageData);

  //   debugger;
    $.ajax({
        url : '/RegisterServlet_2/servlet/Register',
        type : "POST",
        data : formData,
           enctype: 'multipart/form-data',
        processData : false,
        contentType : false
    }).done(function(data)
    {
        //alert('File upload completed ...');
    }).fail(function(jqXHR, textStatus)
    {
        //alert('File upload failed ...');
    });
}



    function reduceImgTransferBandwidth(pimagedata)
    {
        var form = document.createElement("myForm");
        var ImageURL = "data:image/gif;base64," + pimagedata;
        var block = ImageURL.split(";");
        var contentType = block[0].split(":")[1];
        var realData = block[1].split(",")[1];
        var blob = b64toBlob(realData, contentType);
        var formDataToUpload = new FormData(form);

        formDataToUpload.append("image", blob);

        return formDataToUpload;

    }

    function b64toBlob(b64Data, contentType, sliceSize)
    {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize)
        {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++)
            {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, {
            type : contentType
        });
        return blob;
    }

unable to receive as an image from ajax to java but able to receive the bytes of image

Question

1 answers

solution1
0 ACCPTED 2017-09-27 06:09:36

unable to receive as an image from ajax to java but able to receive the bytes of image

Question

1 answers

solution1 0 ACCPTED 2017-09-27 06:09:36

solution1
0 ACCPTED 2017-09-27 06:09:36