Add Blob downloading feature (Android)

[devmuhnnad]

This fixes #2951, #2526, #2207, #1945, #1790, #909, #295 and #2526

I have tested the feature on a React native project, and it worked perfectly 🌟

Usage

function App(): JSX.Element {
  return <WebView blobDownloadingEnabled={true} source={{uri: 'https://pdfturn.com/'}} />;
}

For security purposes, the Blob Downloading Feature is not enabled by default, blobDownloadingEnabled prop is used.

Is this a Breaking Change

No, I have developed this feature to be independent, not affecting others.

THANKS.

PART OF GTC OPEN SOURCE INTIATIVE

[WANG-Lisa]

I tried branch code of blob-download-feature in react-native-webview repo, when download blob, it shows error
"Refused to connect to 'blob:xxxxx" because it violates the following Content Security Policy directive: "default-src ". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'blob:' must be added explicitly.

I hope this issue can be fixed in blob-download-feature PR.

[devmuhnnad]

Hi @WANG-Lisa, thanks for reporting this,
can you provide more information about how you tested the feature, is it on Android? Did you make sure that the blobDownloadingEnabled prop was set to true?

Also if you can provide a repo with the project you have faced the issue with, that would be helpful,

Thanks.

[WANG-Lisa]

Hi @WANG-Lisa, thanks for reporting this, can you provide more information about how you tested the feature, is it on Android? Did you make sure that the blobDownloadingEnabled prop was set to true?

Also if you can provide a repo with the project you have faced the issue with, that would be helpful,

Thanks.

@devmuhnnad Thanks for your quick response.
I install blob-download-feature branch in my package.json, my webview is something like this

<WebView
	source={{ uri: 'blob:https://xxx' }}
	startInLoadingState={true}
	javaScriptEnabled
        blobDownloadingEnabled
        allowFileAccess
        domStorageEnabled
        mixedContentMode='always'
        allowUniversalAccessFromFileURLs
	renderLoading={() => (
	<ActivityIndicator
		style={styles.indicator}
		size='large'
	/>
	)}
	onMessage={handleMessage}
	originWhitelist={['https:*', 'blob:*']}
/>

I test it on android simulator, here is the info of simulator

in logcat, it print this error:

"Refused to connect to 'blob:xxxxx" because it violates the following Content Security Policy directive: "default-src ". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'blob:' must be added explicitly.

[devmuhnnad]

Hi @WANG-Lisa, I see that you are using the source prop wrong!
You should pass a valid URL that starts with "http" or "https",
I think that there's a misunderstanding about blob-download-feature
it allows you to download blobs when a trigger occurs,
like clicking on a button on the website you are using the Webview for.

[WANG-Lisa]

Hi @WANG-Lisa, I see that you are using the source prop wrong! You should pass a valid URL that starts with "http" or "https", I think that there's a misunderstanding about blob-download-feature it allows you to download blobs when a trigger occurs, like clicking on a button on the website you are using the Webview for.

My fault to this misunderstanding. Actually my case is what you indicate. I load an https page in webview, then in this https page, I want to download a pdf which type is blob. Once I click the download button, it shows Content Security Policy error.

[devmuhnnad]

@WANG-Lisa it would help if you share with me a repo of your project

[WANG-Lisa]

@WANG-Lisa it would help if you share with me a repo of your project

As the repo is confidential, I can't share it out. However, I find that if the blob is of type pdf or csv, it will show the error I indicate, others like 'application/json', it's ok to download.

[devmuhnnad]

@WANG-Lisa I understand.
I have tried with pdf blobs, and it worked!
I can't reproduce your issue.

[WANG-Lisa]

I'll try to reintegrate after this PR is merged. Looking forward to this feature to be released asap.
Thanks @devmuhnnad for your help anyway.

[rootedy-ffit]

Hi @devmuhnnad, can you help me? I tried to install from this PR with yarn:
yarn add react-native-webview/react-native-webview#3022/head
But when I run i got this error:
Error: Unable to resolve module ./lib/WebView
And the folder "./lib" really doesn't exist. How can I use this PR?

[TheAlmightyBob]

Suggested change

	ReactNativeWebViewDownloader.downloadFile(JSON.stringify(message));
	ReactNativeWebViewDownloader.downloadFile(JSON.stringify(message));

[TheAlmightyBob]

Suggested change

	ext = "bin";
	ext = "bin";

[TheAlmightyBob]

Suggested change

	};
	};

[github-actions]

Hello 👋, this PR has been opened for more than 2 months with no activity on it. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically

[piechoo]

@devmuhnnad Could you please take a look :) ?

[devmuhnnad]

Hi, sorry for the delay,
I have applied the required changes,
Please tell me if I have missed out anything.

[piechoo]

@TheAlmightyBob Could you please take a look :) ?

[AntoineThibi]

Why would it be a Android only feature ? Can't it be done for iOS also ?

[SergioAN007]

Hello.
This PR still not merged? Any updates?
Thanks

[Salmankhan033]

@devmuhnnad Please make it for IOS

[Salmankhan033]

Hi @devmuhnnad, can you help me? I tried to install from this PR with yarn: yarn add react-native-webview/react-native-webview#3022/head But when I run i got this error: Error: Unable to resolve module ./lib/WebView And the folder "./lib" really doesn't exist. How can I use this PR?

Go to the file and replace it by

import WebView from './src/index';

export { WebView };
export default WebView;

[Sreejit7]

@jamonholmgren @Titozzz can this PR be merged?

[ainnotate]

I've a blob (audio/wav) and I'll have to save/download the blob as a .wav file.

@devmuhnnad you mentioned we should pass a valid URL that starts with "http" or "https". Does this mean that I'll not be able to use this patch to save my blob as a wav file?

[linonetwo]

@ainnotate When you create blob url it auto add HTTP to it, see #2858 (comment)

var link = document.createElement("a");
var blob = new Blob(["sdfa"], {type: "text/html"});
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download","filename");
document.body.appendChild(link);
// <a href=​"blob:​http:​/​/​localhost/​cf8ae139-a28c-43ec-9943-86ff2e0d10d0" download=​"filename">​</a>​

link.click();

[sparcbr]

With this will I be able to use: URL.createObjectURL(blob) ?

[bfarias-nex]

Hello people, when is this pr going to be merge? I have the same problem. Help please.

[tra4less]

any progress?