Add Blob downloading feature (Android)

android/src/main/assets/blobDownloader.js

@@ -0,0 +1,45 @@
+// This is used because download from native side won't have session changes.
+
+window.reactNativeDownloadBlobUrl = function reactNativeDownloadBlobUrl(url) {
+	var req = new XMLHttpRequest();
+	req.open('GET', url, true);
+	req.responseType = 'blob';
+
+	req.onload = function(event) {
+		var blob = req.response;
+		saveBlob(blob);
+	};
+	req.send();
+
+	function sendMessage(message) {
+	    ReactNativeWebViewDownloader.downloadFile(JSON.stringify(message));
+	}
+
+	function saveBlob(blob, filename) {
+    var reader = new FileReader();
+    reader.readAsDataURL(blob);
+    let fileName = "";
+
+
+    reader.onloadend = function() {
+
+    const popularExts = ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "jpg", "jpeg", "png", "gif", "bmp", "tiff", "tif", "svg", "mp3", "mp4", "avi", "mov", "wmv", "flv", "ogg", "webm", "mkv", "zip", "rar", "7z", "tar", "gz", "bz2", "iso", "dmg", "exe", "apk", "torrent", "epub", "mobi", "azw", "azw3", "djvu", "djv", "fb2", "rtf", "odt", "odp", "ods", "odg", "odf", "odb", "csv", "tsv", "ics", "vcf", "msg", "eml", "emlx", "mht", "mhtml", "xps", "oxps", "ps", "rtfd", "key", "numbers", "pages", "apk", "torrent", "epub", "mobi", "azw", "azw3", "djvu", "djv", "fb2", "rtf", "odt", "odp", "ods", "odg", "odf", "odb", "csv", "tsv", "ics", "vcf", "msg", "eml", "emlx", "mht", "mhtml", "xps", "oxps", "ps", "rtfd", "key", "numbers", "pages"];
+    let ext = blob.type.split("/")[1];
+    if (!ext || !popularExts.includes(ext)) {
+    ext = "bin";
+    }
+
+    fileName = `${filename || "download"}.${ext}`;
+
+    sendMessage({
+        event: 'file',
+        fileName,
+        data: reader.result
+    });
+
+    }
+    };
+
+ }
+
+

android/src/main/java/com/reactnativecommunity/webview/RNCWebView.java

@@ -6,9 +6,12 @@
 import android.content.Context;
 import android.graphics.Rect;
 import android.os.Build;
+import android.os.Environment;
 import android.text.TextUtils;
 import android.util.AttributeSet;
 
+import android.util.Base64;
+import android.util.Log;
 import android.view.ActionMode;
 import android.view.Menu;
 import android.view.MenuItem;
@@ -19,6 +22,7 @@
 import android.webkit.WebChromeClient;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
+import android.widget.Toast;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.CatalystInstance;
@@ -44,6 +48,11 @@
 import org.json.JSONException;
 import org.json.JSONObject;
 
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
 import java.io.UnsupportedEncodingException;
 import java.net.URLEncoder;
 import java.util.List;
@@ -56,6 +65,10 @@ public class RNCWebView extends WebView implements LifecycleEventListener {
     String injectedJSBeforeContentLoaded;
     protected static final String JAVASCRIPT_INTERFACE = "ReactNativeWebView";
 
+    protected static final String DOWNLOAD_INTERFACE = "ReactNativeWebViewDownloader";
+
+    String downloadingMessage = "File Downloaded!";
+
     /**
      * android.webkit.WebChromeClient fundamentally does not support JS injection into frames other
      * than the main frame, so these two properties are mostly here just for parity with iOS & macOS.
@@ -64,6 +77,8 @@ public class RNCWebView extends WebView implements LifecycleEventListener {
     protected boolean injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true;
 
     protected boolean messagingEnabled = false;
+
+    protected boolean downloadingBlobEnabled = false;
     protected @Nullable
     String messagingModuleName;
     protected @Nullable
@@ -248,6 +263,10 @@ protected RNCWebViewBridge createRNCWebViewBridge(RNCWebView webView) {
         return new RNCWebViewBridge(webView);
     }
 
+  protected RNCWebViewDownloadBridge createRNCWebViewDownloadBlobBridge(RNCWebView webView) {
+    return new RNCWebViewDownloadBridge(webView);
+  }
+
     protected void createCatalystInstance() {
       ThemedReactContext reactContext = (ThemedReactContext) this.getContext();
 
@@ -271,6 +290,26 @@ public void setMessagingEnabled(boolean enabled) {
         }
     }
 
+  @SuppressLint("AddJavascriptInterface")
+  public void setDownloadingBlobEnabled(boolean enabled) {
+    if (downloadingBlobEnabled == enabled) {
+      return;
+    }
+
+      downloadingBlobEnabled = enabled;
+
+    if (enabled) {
+      addJavascriptInterface(createRNCWebViewDownloadBlobBridge(this), DOWNLOAD_INTERFACE);
+    } else {
+      removeJavascriptInterface(DOWNLOAD_INTERFACE);
+    }
+  }
+
+
+  public void setDownloadingMessage(String message) {
+      downloadingMessage = message;
+  }
+
     protected void evaluateJavascriptWithFallback(String script) {
         evaluateJavascript(script, null);
     }
@@ -283,6 +322,22 @@ public void callInjectedJavaScript() {
         }
     }
 
+    public void injectBlobDownloaderJS(){
+      // get blobDownloaderJS from assets and inject it
+      String blobDownloaderJS = null;
+      try {
+        InputStream inputStream = this.getContext().getAssets().open("blobDownloader.js");
+        int size = inputStream.available();
+        byte[] buffer = new byte[size];
+        inputStream.read(buffer);
+        inputStream.close();
+        blobDownloaderJS = new String(buffer, "UTF-8");
+      } catch (IOException e) {
+        e.printStackTrace();
+      }
+      evaluateJavascriptWithFallback("(function() {\n" + blobDownloaderJS + ";\n})();" );
+    }
+
     public void callInjectedJavaScriptBeforeContentLoaded() {
         if (getSettings().getJavaScriptEnabled() &&
                 injectedJSBeforeContentLoaded != null &&
@@ -401,8 +456,71 @@ protected class RNCWebViewBridge {
         public void postMessage(String message) {
           mWebView.onMessage(message);
         }
+
+
+
     }
 
+  protected class RNCWebViewDownloadBridge {
+    RNCWebView mWebView;
+
+    RNCWebViewDownloadBridge(RNCWebView c) {
+      mWebView = c;
+    }
+
+    /**
+     * This method is called whenever JavaScript running within the web view calls:
+     * - window[JAVASCRIPT_INTERFACE].postMessage
+     */
+
+    @JavascriptInterface
+    public void downloadFile(String json) {
+      //parse json
+      try {
+        JSONObject jsonObject = null;
+        jsonObject = new JSONObject(json);
+        String url = jsonObject.getString("data");
+        String fileName = jsonObject.getString("fileName");
+        //decode base64 string and save to file
+        File path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS);
+
+        File file = new File(path, fileName);
+
+          if(!path.exists())
+            path.mkdirs();
+
+
+          // if file exists, change name to avoid overwrite
+          int i = 1;
+          while(file.exists()) {
+            file = new File(path, fileName.substring(0, fileName.lastIndexOf(".")) + "(" + i + ")" + fileName.substring(fileName.lastIndexOf(".")));
+            i++;
+          }
+
+          if(!file.exists())
+            file.createNewFile();
+
+          String base64EncodedString = url.substring(url.indexOf(",") + 1);
+          byte[] decodedBytes = Base64.decode(base64EncodedString, Base64.DEFAULT);
+          OutputStream os = new FileOutputStream(file);
+          os.write(decodedBytes);
+          os.close();
+
+          Toast.makeText(mWebView.getContext(), downloadingMessage, Toast.LENGTH_LONG).show();
+
+
+
+      } catch (JSONException e) {
+        e.printStackTrace();
+      } catch (IOException e) {
+        Log.i("ReactNative", "IOException: " + e.getMessage());
+        e.printStackTrace();
+      }
+
+
+    }
+  }
+
 
     protected static class ProgressChangedFilter {
         private boolean waitingForCommandLoadUrl = false;

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewClient.java

@@ -60,6 +60,8 @@ public void onPageFinished(WebView webView, String url) {
 
             reactWebView.callInjectedJavaScript();
 
+            reactWebView.injectBlobDownloaderJS();
+
             emitFinishEvent(webView, url);
         }
     }

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt

@@ -13,8 +13,10 @@ import android.view.ViewGroup
 import android.view.WindowManager
 import android.webkit.CookieManager
 import android.webkit.DownloadListener
+import android.webkit.JavascriptInterface
 import android.webkit.WebSettings
 import android.webkit.WebView
+import androidx.annotation.RequiresApi
 import androidx.webkit.WebSettingsCompat
 import androidx.webkit.WebViewFeature
 import com.facebook.react.bridge.ReadableArray
@@ -24,6 +26,8 @@ import com.facebook.react.common.build.ReactBuildConfig
 import com.facebook.react.uimanager.ThemedReactContext
 import org.json.JSONException
 import org.json.JSONObject
+import java.io.BufferedInputStream
+import java.io.ByteArrayOutputStream
 import java.io.UnsupportedEncodingException
 import java.net.MalformedURLException
 import java.net.URL
@@ -81,6 +85,7 @@ class RNCWebViewManagerImpl {
         setAllowUniversalAccessFromFileURLs(webView, false)
         setMixedContentMode(webView, "never")
 
+
         // Fixes broken full-screen modals/galleries due to body height being 0.
         webView.layoutParams = ViewGroup.LayoutParams(
             ViewGroup.LayoutParams.MATCH_PARENT,
@@ -90,6 +95,16 @@ class RNCWebViewManagerImpl {
             WebView.setWebContentsDebuggingEnabled(true)
         }
         webView.setDownloadListener(DownloadListener { url, userAgent, contentDisposition, mimetype, contentLength ->
+
+            Log.i("ReactNative", mimetype);
+            if(url.startsWith("blob:")){
+                Log.i("ReactNative", "Downloading " + url);
+                downloadBlob(url, webView)
+                return@DownloadListener
+            }
+            // print the url
+
+
             webView.setIgnoreErrFailedForThisURL(url)
             val module = webView.themedReactContext.getNativeModule(RNCWebViewModule::class.java) ?: return@DownloadListener
             val request: DownloadManager.Request = try {
@@ -105,6 +120,8 @@ class RNCWebViewManagerImpl {
 
             val downloadMessage = "Downloading $fileName"
 
+
+
             //Attempt to add cookie, if it exists
             var urlObj: URL? = null
             try {
@@ -137,6 +154,31 @@ class RNCWebViewManagerImpl {
         return webView
     }
 
+
+
+  class RNCWebViewBridge internal constructor() {
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    @JavascriptInterface
+    fun downloadFile() {
+      Log.i("ReactNative", "invoked by js");
+    }
+
+
+  }
+
+    fun downloadBlob(url : String, webview: RNCWebView){
+       injectJs(webview, "window.reactNativeDownloadBlobUrl('" + url + "');");
+    }
+
+    fun injectJs(webview: RNCWebView, js: String){
+        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
+          webview.evaluateJavascript(js, null);
+        } else {
+          webview.loadUrl("javascript:$js");
+        }
+    }
+
     private fun setupWebChromeClient(
         webView: RNCWebView,
     ) {
@@ -499,6 +541,11 @@ class RNCWebViewManagerImpl {
         view.setMessagingEnabled(value)
     }
 
+  fun setBlobDownloadingEnabled(view: RNCWebView, value: Boolean) {
+    view.setDownloadingBlobEnabled(value)
+    view.setDownloadingMessage(getDownloadingMessageOrDefault())
+  }
+
     fun setMediaPlaybackRequiresUserAction(view: RNCWebView, value: Boolean) {
         view.settings.mediaPlaybackRequiresUserGesture = value
     }

android/src/oldarch/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -180,6 +180,11 @@ public void setMessagingEnabled(RNCWebView view, boolean value) {
         mRNCWebViewManagerImpl.setMessagingEnabled(view, value);
     }
 
+    @ReactProp(name = "blobDownloadingEnabled")
+    public void setBlobDownloadingEnabled(RNCWebView view, boolean value) {
+        mRNCWebViewManagerImpl.setBlobDownloadingEnabled(view, value);
+    }
+
     @ReactProp(name = "menuItems")
     public void setMenuCustomItems(RNCWebView view, @Nullable ReadableArray items) {
         mRNCWebViewManagerImpl.setMenuCustomItems(view, items);

src/RNCWebViewNativeComponent.ts

@@ -227,6 +227,7 @@ export interface NativeProps extends ViewProps {
   webviewDebuggingEnabled?: boolean;
   mediaPlaybackRequiresUserAction?: boolean;
   messagingEnabled: boolean;
+  blobDownloadingEnabled: boolean;
   onLoadingError: DirectEventHandler<WebViewErrorEvent>;
   onLoadingFinish: DirectEventHandler<WebViewNavigationEvent>;
   onLoadingProgress: DirectEventHandler<WebViewNativeProgressEvent>;

src/WebView.android.tsx

@@ -41,6 +41,7 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
   allowFileAccess = false,
   saveFormDataDisabled = false,
   cacheEnabled = true,
+  blobDownloadingEnabled = false,
   androidLayerType = "none",
   originWhitelist = defaultOriginWhitelist,
   setSupportMultipleWindows = true,
@@ -79,7 +80,7 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
     }
   }, []);
 
-  const { onLoadingStart, onShouldStartLoadWithRequest, onMessage, viewState, setViewState, lastErrorEvent, onHttpError, onLoadingError, onLoadingFinish, onLoadingProgress, onRenderProcessGone } = useWebViewLogic({
+  const { onLoadingStart,  onShouldStartLoadWithRequest, onMessage, viewState, setViewState, lastErrorEvent, onHttpError, onLoadingError, onLoadingFinish, onLoadingProgress, onRenderProcessGone } = useWebViewLogic({
     onNavigationStateChange,
     onLoad,
     onError,
@@ -175,7 +176,7 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
     {...otherProps}
     messagingEnabled={typeof onMessageProp === 'function'}
     messagingModuleName={messagingModuleName}
-
+    blobDownloadingEnabled={blobDownloadingEnabled}
     hasOnScroll={!!otherProps.onScroll}
     onLoadingError={onLoadingError}
     onLoadingFinish={onLoadingFinish}

src/WebViewTypes.ts

@@ -1068,6 +1068,13 @@ export interface WebViewSharedProps extends ViewProps {
    */
   javaScriptEnabled?: boolean;
 
+  /**
+   * Boolean value to enable downloading blob files in the `WebView`.
+   * default value is `false`.
+   * @platform android
+   */
+  blobDownloadingEnabled?: boolean;
+
   /**
    * A Boolean value indicating whether JavaScript can open windows without user interaction.
    * The default value is `false`.