14

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.

Ilya Gazman
  • 31,250
  • 24
  • 137
  • 216

3 Answers3

8

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
  }
Ilya Gazman
  • 31,250
  • 24
  • 137
  • 216
  • Thanks, but then how does Android java turn that base64 encoded string back into binary? – dangerChihuahua007 Jun 29 '15 at 18:35
  • @DavidFaux Use `android.util.Base64`, and take a look on what you are getting from the WebView, I don't remember if it been prefixed with mime type. But as for the decoding, `android.util.Base64` should do the work. – Ilya Gazman Jun 29 '15 at 22:51
  • 2
    Thanks, this works nicely for small blobs like under 10mb. I think the hex64 encoding crashes Chromium for larger blobs like size 50mb. – dangerChihuahua007 Jul 01 '15 at 08:33
  • @DavidFaux Than you can split it for packages under 10MB and processes those. – Ilya Gazman Jul 01 '15 at 11:04
7

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>
alditis
  • 4,633
  • 3
  • 49
  • 76
VulfCompressor
  • 1,390
  • 1
  • 11
  • 26
1

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);
Laxmikant Dange
  • 7,606
  • 6
  • 40
  • 65