forked from rDrama/rDrama
use indexedDB instead of localstorage for saving files since:
-it has no size limit (localstorage has 5MB) -it can store files directly (dont have to convert to base64 like localstorage)master
parent
4f2cba6af7
commit
681c987f51
|
@ -508,23 +508,12 @@ function handle_files(input, newfiles) {
|
||||||
|
|
||||||
autoExpand(ta)
|
autoExpand(ta)
|
||||||
|
|
||||||
if (typeof checkForRequired === "function") checkForRequired();
|
if (typeof checkForRequired === "function")
|
||||||
|
checkForRequired();
|
||||||
if (location.pathname.endsWith('/submit')) {
|
if (typeof savetext === "function")
|
||||||
files_b64 = JSON.parse(localStorage.getItem("files_b64")) || [];
|
savetext();
|
||||||
for (const file of newfiles) {
|
if (typeof submit_save_files === "function")
|
||||||
if (!file.type.startsWith('image/'))
|
submit_save_files("textarea", newfiles);
|
||||||
continue
|
|
||||||
fileReader = new FileReader();
|
|
||||||
fileReader.onload = function () {
|
|
||||||
files_b64.push([file.name, file.type, this.result]);
|
|
||||||
localStorage.setItem("files_b64", JSON.stringify(files_b64));
|
|
||||||
savetext()
|
|
||||||
};
|
|
||||||
fileReader.filename = file.name
|
|
||||||
fileReader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -541,8 +530,6 @@ if (file_upload) {
|
||||||
fileReader.readAsDataURL(file_upload.files[0]);
|
fileReader.readAsDataURL(file_upload.files[0]);
|
||||||
fileReader.onload = function () {
|
fileReader.onload = function () {
|
||||||
document.getElementById('image-preview').setAttribute('src', this.result);
|
document.getElementById('image-preview').setAttribute('src', this.result);
|
||||||
const str = JSON.stringify([file.name, file.type, this.result])
|
|
||||||
localStorage.setItem("attachment_b64", str);
|
|
||||||
document.getElementById('image-preview').classList.remove('d-none');
|
document.getElementById('image-preview').classList.remove('d-none');
|
||||||
document.getElementById('image-preview').classList.add('mr-2');
|
document.getElementById('image-preview').classList.add('mr-2');
|
||||||
document.getElementById('image-preview').nextElementSibling.classList.add('mt-3');
|
document.getElementById('image-preview').nextElementSibling.classList.add('mt-3');
|
||||||
|
@ -561,6 +548,10 @@ if (file_upload) {
|
||||||
else {
|
else {
|
||||||
document.getElementById('submit-btn').disabled = false;
|
document.getElementById('submit-btn').disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (typeof submit_save_files === "function") {
|
||||||
|
submit_save_files("attachment", [file]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
file_upload.onchange = process_url_image
|
file_upload.onchange = process_url_image
|
||||||
|
|
|
@ -197,8 +197,7 @@ function submit(form) {
|
||||||
localStorage.setItem(id, value)
|
localStorage.setItem(id, value)
|
||||||
}
|
}
|
||||||
|
|
||||||
localStorage.removeItem("attachment_b64")
|
clear_files()
|
||||||
localStorage.removeItem("files_b64")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
location.href = "/post/" + post_id
|
location.href = "/post/" + post_id
|
||||||
|
@ -220,36 +219,98 @@ function submit(form) {
|
||||||
xhr.send(formData);
|
xhr.send(formData);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function array_to_file(array) {
|
|
||||||
const res = await fetch(array[2]);
|
|
||||||
const blob = await res.blob();
|
|
||||||
return new File([blob], array[0], {type: array[1]});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//SAVE FILES
|
||||||
|
|
||||||
|
const indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
|
||||||
|
|
||||||
|
const open = indexedDB.open("files", 1);
|
||||||
|
|
||||||
|
open.onupgradeneeded = () => {
|
||||||
|
const db = open.result;
|
||||||
|
db.createObjectStore("files", {keyPath:"kind"});
|
||||||
|
db.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function restore_attachment() {
|
function submit_save_files(kind, files) {
|
||||||
const array = JSON.parse(localStorage.getItem("attachment_b64"))
|
const open = indexedDB.open("files", 1);
|
||||||
if (!array) return
|
open.onsuccess = () => {
|
||||||
|
const db = open.result;
|
||||||
|
const tx = db.transaction("files", "readwrite");
|
||||||
|
const store = tx.objectStore("files");
|
||||||
|
|
||||||
const list = new DataTransfer();
|
tx.oncomplete = () => {
|
||||||
const file = await array_to_file(array)
|
db.close();
|
||||||
list.items.add(file);
|
};
|
||||||
|
|
||||||
document.getElementById("file-upload").files = list.files
|
store.put({kind:kind, files:files});
|
||||||
process_url_image()
|
|
||||||
}
|
|
||||||
|
|
||||||
async function restore_files() {
|
|
||||||
oldfiles["post-text"] = []
|
|
||||||
const files_b64_get = JSON.parse(localStorage.getItem("files_b64"))
|
|
||||||
if (!files_b64_get) return
|
|
||||||
const list = new DataTransfer();
|
|
||||||
for (const array of files_b64_get) {
|
|
||||||
const file = await array_to_file(array)
|
|
||||||
list.items.add(file);
|
|
||||||
oldfiles["post-text"].push(file)
|
|
||||||
}
|
}
|
||||||
document.getElementById("file-upload-submit").files = list.files
|
|
||||||
}
|
}
|
||||||
|
|
||||||
restore_attachment()
|
|
||||||
restore_files()
|
//RESTORE FILES
|
||||||
|
|
||||||
|
function submit_restore_files(kind, id) {
|
||||||
|
const open = indexedDB.open("files", 1);
|
||||||
|
open.onsuccess = () => {
|
||||||
|
const db = open.result;
|
||||||
|
const tx = db.transaction("files", "readwrite");
|
||||||
|
const store = tx.objectStore("files");
|
||||||
|
|
||||||
|
tx.oncomplete = () => {
|
||||||
|
db.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
const get_files = store.get(kind);
|
||||||
|
|
||||||
|
get_files.onsuccess = () => {
|
||||||
|
let files = get_files.result
|
||||||
|
if (!files) return
|
||||||
|
files = files.files
|
||||||
|
|
||||||
|
const list = new DataTransfer();
|
||||||
|
for (const file of files) {
|
||||||
|
list.items.add(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(id).files = list.files
|
||||||
|
|
||||||
|
if (kind == "attachment") {
|
||||||
|
process_url_image()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
oldfiles["post-text"] = new DataTransfer();
|
||||||
|
for (const file of files) {
|
||||||
|
oldfiles["post-text"].items.add(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
submit_restore_files("attachment", "file-upload")
|
||||||
|
submit_restore_files("textarea", "file-upload-submit")
|
||||||
|
|
||||||
|
|
||||||
|
//CLEAR FILES
|
||||||
|
|
||||||
|
function clear_files() {
|
||||||
|
const open = indexedDB.open("files", 1);
|
||||||
|
open.onsuccess = () => {
|
||||||
|
const db = open.result;
|
||||||
|
const tx = db.transaction("files", "readwrite");
|
||||||
|
const store = tx.objectStore("files");
|
||||||
|
|
||||||
|
tx.oncomplete = () => {
|
||||||
|
db.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
store.clear();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue