70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React, {Component} from 'react';
|
|
import {Button, Linking, Text, View} from 'react-native';
|
|
|
|
import WebView from 'react-native-webview';
|
|
|
|
const HTML = `
|
|
<!DOCTYPE html>\n
|
|
<html>
|
|
<head>
|
|
<title>Uploads</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=320, user-scalable=no">
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font: 62.5% arial, sans-serif;
|
|
background: #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
<label for="images-only">Images only file upload</label>
|
|
<input name="images-only" type="file" accept="image/*">
|
|
</p>
|
|
<p>
|
|
<label for="video-only">Video only file upload</label>
|
|
<input name="video-only" type="file" accept="video/*">
|
|
</p>
|
|
<p>
|
|
<label for="any-file">Any file upload</label>
|
|
<input name="any-file" type="file">
|
|
</p>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
type Props = {};
|
|
type State = {};
|
|
|
|
export default class Uploads extends Component<Props, State> {
|
|
state = {};
|
|
|
|
render() {
|
|
return (
|
|
<View>
|
|
<View style={{ height: 120 }}>
|
|
<WebView
|
|
source={{html: HTML}}
|
|
automaticallyAdjustContentInsets={false}
|
|
/>
|
|
</View>
|
|
<Text>
|
|
Android limitation: If the file input should show camera options for the user,
|
|
and the app has the ability to request the camera permission, then the user must
|
|
grant permission first in order to see the options. Since this example app does
|
|
have the permission declared, you must allow it in settings to be able to see
|
|
camera options. If your app does not have the camera permission declared, then
|
|
there is no restriction to showing the camera options.
|
|
</Text>
|
|
<Button
|
|
title="Open settings"
|
|
onPress={() => Linking.openSettings()}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|