CODEWITHSUNDEEP
javascriptandroidhtmlwebviewblob
Ilya Gazman
Ilya Gazman

Reputation: 32271

How to pass a Blob object from javascript to Android?

I have a Blob object inside my WebView, how can I pass it to Android?
I want to save it to local file on device.

I been trying to use:

var url = webkitURL.createObjectURL(myBlob);

But I wasn't been able to download it to device.

Upvotes: 14

Views: 6471

Answers (3)

VulfCompressor
VulfCompressor

Reputation: 1410

I haven't tried this, but i was able to found some information pointing to the usage of Javascript Interfaces with WebViews. Basically you can assign Java Classes to work like Javascript classes in your WebView (and exchange information between both sides). I'm not a pro at JavaScript object types, so i'll leave that to you.

First, create a JavaScriptHandler class with a reference to your activity that controls the WebView: 

public class JavaScriptHandler {
    MyActivity parentActivity;

    public JavaScriptHandler(MyActivity activity) {
        parentActivity = activity;
    }

    public void doSomething(<Your blob format> data){    
        // .............
        // ..Some code..
        // .............
    }
}

After that you'll be adding your JavaScriptHandler to your WebView in your main Activity. Don't forget to enable JavaScript in your WebView!

myWebView = (WebView)this.findViewById(R.id.myWebView);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JavaScriptHandler(this), "MyHandler");

The first parameter passed to addJavaScriptInterface() is the JavaScript interface object itself. The second parameter is the name of the global JavaScript variable which the JavaScript interface object is bound to.

Now all you gotta do is call your Java method with JavaScript. 

<html>
<head>
    <script type="text/javascript">
        function sendBlob() {
            MyHandler.doSomething(<Your Blob>);
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Click me!" onclick="sendBlob()" />
    </form>
</body>
</html>

Upvotes: 7

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

You can use simple file downloader using JavaScript.

Here is a sample to download blob as file.

var saveData = (function() {
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  return function(data, fileName) {
    var json = JSON.stringify(data),
      blob = new Blob([json], {
        type: "octet/stream"
      }),
      url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  };
}());

var data = {
    x: 42,
    s: "hello, world",
    d: new Date()
  },
  fileName = "my-download.json";

saveData(data, fileName);

Upvotes: 1

Ilya Gazman
Ilya Gazman

Reputation: 32271

I found a solution by converting the blob to Base64 String

 var reader = new window.FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
                var base64data = reader.result;                
                // send base64data string to android as a method param
  }

Upvotes: 8

Related Questions