@chainplatform/file
Version:
The library allows you to select file with react-native without ejecting support both react-native and react-native-web.
120 lines (115 loc) • 5.25 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Select</title>
<meta name="author" content="santran686@gmail.com">
<meta name="author" content="chainplatform.net">
<style>
* {
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
margin: 0px;
width: 100%
}
button {
background: red;
border-width: 0px;
color: white;
padding: 8px 15px;
font-size: 13px;
cursor: pointer;
border-radius: 4px;
width: 100%;
}
</style>
</head>
<body>
<button id="button" onclick="document.getElementById('file').click();">Open</button>
<form enctype="multipart/form-data" id="form_upload">
<input type='file' name="file" id="file" style="display: none;" onchange="readURL(this)" />
<input type="hidden" id="language" name="language" value="">
<input type="hidden" id="os" name="os" value="">
<input type="hidden" id="version" name="version" value="">
</form>
<script>
const parsedUrl = new URL(window.location.href), style_button = parsedUrl.searchParams.get("style_button"), file_text = parsedUrl.searchParams.get("file_text"), file_types = parsedUrl.searchParams.get("file_types");
let button = document.getElementById("button");
let input = document.getElementById("upload");
if (style_button != "") {
button.style = style_button;
}
if (file_text == "") {
file_text = "Open";
}
button.setAttribute('content', file_text);
button.textContent = file_text;
if (style_button != "") {
input.accept = file_types;
}
function readURL(input) {
var url = input.value;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
var filename = input.files[0].name;
if (e.target.result.includes("image")) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
let ratio = this.width / this.height;
let result = { isFile: true, datas: { filename: filename, ext: ext, metas: { width: this.width, height: this.height, ratio: ratio }, datas: e.target.result } };
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(result), '*');
};
} else {
let result = { isFile: true, datas: { filename: filename, ext: ext, metas: { width: 0, height: 0, ratio: 0 }, datas: e.target.result } };
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(result), '*');
}
}
reader.readAsDataURL(input.files[0]);
}
}
async function sendData(infos) {
document.getElementById("os").value = infos.data.os;
document.getElementById("language").value = infos.data.language;
document.getElementById("version").value = infos.data.version;
const formData = new FormData(document.getElementById("form_upload"));
try {
let headers = { Authorization: 'Bearer ' + infos.data.token };
const response = await fetch(infos.data.api, {
method: infos.data.method,
body: formData,
headers: headers
});
let responseJson = await response.json();
let result = { uploadResult: "response", datas: responseJson };
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(result), '*');
if (typeof responseJson.status != "undefined" && responseJson.status == 1) {
document.getElementById("form_upload").reset();
let result = { isFile: true, datas: null };
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(result), '*');
}
} catch (e) {
let result = { uploadResult: "error", datas: e };
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(result), '*');
}
}
window.addEventListener("message", function (events) {
let infos = events.data;
if (typeof events.data != "object") {
infos = JSON.parse(events.data);
}
if (infos.event == "uploadFile") {
sendData(infos);
}
});
</script>
</body>
</html>