How to read javascript BLOB data sent over websocket on java websocket server

Question

I am trying to upload a picture file on my webpage through javascript as a BLOB type of file, then send that file to my java websocket server to store the file on the server used for the webpage.

My code on the websocker server java side is as to read the BLOB data and write the file is as follows,

public void testMethod(final WebMessage message){
    ByteBuffer b = null;
    try {
        b = message.getByteBufferArg(0);
    } catch (WebMessageException e2) {
        // TODO Auto-generated catch block
        e2.printStackTrace();
    }
    File file = new File("/user/Desktop/pic.jpg");
    try {
        file.createNewFile();
    } catch (IOException e1) {
        // TODO Auto-generated catch block
        e1.printStackTrace();
    }
    try {
        FileOutputStream stream = new FileOutputStream(file.getAbsoluteFile());
        stream.write(b.array());
        logger.info("done writing file");
        stream.close();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        logger.trace(e.getMessage());
    }
}

Then when I try to open the picture it says Error interpreting JPEG image file (Not a JPEG file: starts with 0x00 0x00).

Basically I would like to know then how I can read this BLOB data that was sent to my websocket server, and how can I write this data out to a useable file?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

So the only way to read from a Blob is using a FileReader (https://developer.mozilla.org/en-US/docs/Web/API/FileReader), once you've read the data from a blob (I would just read in a BinaryArray - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString) You can then directly just send that to your file in an output stream.

From the documentation - https://developer.mozilla.org/en/docs/Web/API/Blob:

Example for extracting data from a Blob

The only way to read content from a Blob is to use a FileReader. The following code reads the content of a Blob as a typed array.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

By using other methods of FileReader, it is possible to read the contents of a Blob as a string or a data URL.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 19, 2016 at 14:41

khancock

1471 silver badge11 bronze badges

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

Comments

jgr208 · Accepted Answer · 2016-08-19 13:54:14Z

0

The way to solve this is to not send the data as a BLOB from the javascript side, you need to read the data into some readable format. In this case I use the FileReader API to read the BLOB data as a dataurl. After it is read using that method, the data is in base64 readable format and can be sent over the websocket and written out to a file on the other side after the base64 String is decoded.

edited Aug 19, 2016 at 13:54

answered Aug 19, 2016 at 13:36

jgr208

3,15210 gold badges42 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to read javascript BLOB data sent over websocket on java websocket server

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related