Copy drag/drop from blog edit to project (#6)
This commit is contained in:
parent
f8aa839353
commit
213f90a0b1
|
|
@ -5,6 +5,7 @@
|
|||
<script src="{{ static "js/tabs.js" }}"></script>
|
||||
<script src="{{ static "js/image_selector.js" }}"></script>
|
||||
<script src="{{ static "js/templates.js" }}"></script>
|
||||
<script src="{{ static "js/base64.js" }}"></script>
|
||||
|
||||
<style>
|
||||
#desc-preview:empty::after {
|
||||
|
|
@ -12,6 +13,10 @@
|
|||
color: var(--dimmer-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#description.drop {
|
||||
box-shadow: inset 0px 0px 5px yellow;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
|
|
@ -156,6 +161,17 @@
|
|||
<textarea id="description" class="w-100 h5 minh-5 mono lh-copy" name="description">
|
||||
{{- .ProjectSettings.Description -}}
|
||||
</textarea>
|
||||
<div class="flex justify-end items-center mt2">
|
||||
<div class="upload_bar flex-grow-1">
|
||||
<div class="instructions">
|
||||
Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
|
||||
</div>
|
||||
<div class="progress flex">
|
||||
<div class="progress_text mr3"></div>
|
||||
<div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b mt3 mb2">Preview:</div>
|
||||
<div id="desc-preview" class="w-100"></div>
|
||||
</div>
|
||||
|
|
@ -196,6 +212,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(mark): copied NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}
|
||||
</div>
|
||||
<script>
|
||||
let csrf = JSON.parse({{ csrftokenjs .Session }});
|
||||
|
|
@ -366,6 +383,230 @@
|
|||
logoMaxFileSize,
|
||||
document.querySelector(".dark_logo")
|
||||
);
|
||||
|
||||
|
||||
//////////////////
|
||||
// Asset upload //
|
||||
//////////////////
|
||||
|
||||
const maxFileSize = {{ .MaxFileSize }};
|
||||
const uploadUrl = {{ .UploadUrl }};
|
||||
const submitButton = document.querySelector("#project_form [data-name=Description] input[type=submit]");
|
||||
const submitText = submitButton.value;
|
||||
const fileInput = document.querySelector('#file_input');
|
||||
const uploadBar = document.querySelector('.upload_bar');
|
||||
const uploadProgress = document.querySelector('.upload_bar .progress');
|
||||
const uploadProgressText = document.querySelector('.upload_bar .progress_text');
|
||||
const uploadProgressBar = document.querySelector('.upload_bar .progress_bar');
|
||||
const uploadProgressBarFill = document.querySelector('.upload_bar .progress_bar > div');
|
||||
let fileCounter = 0;
|
||||
let enterCounter = 0;
|
||||
let uploadQueue = [];
|
||||
let currentUpload = null;
|
||||
let currentXhr = null;
|
||||
let currentBatchSize = 0;
|
||||
let currentBatchDone = 0;
|
||||
|
||||
fileInput.addEventListener("change", function(ev) {
|
||||
if (fileInput.files.length > 0) {
|
||||
importUserFiles(fileInput.files);
|
||||
}
|
||||
});
|
||||
|
||||
description.addEventListener("dragover", function(ev) {
|
||||
let effect = "none";
|
||||
for (let i = 0; i < ev.dataTransfer.items.length; ++i) {
|
||||
if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") {
|
||||
effect = "copy";
|
||||
break;
|
||||
}
|
||||
}
|
||||
ev.dataTransfer.dropEffect = effect;
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
description.addEventListener("dragenter", function(ev) {
|
||||
enterCounter++;
|
||||
let droppable = false;
|
||||
for (let i = 0; i < ev.dataTransfer.items.length; ++i) {
|
||||
if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") {
|
||||
droppable = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (droppable) {
|
||||
description.classList.add("drop");
|
||||
}
|
||||
});
|
||||
|
||||
description.addEventListener("dragleave", function(ev) {
|
||||
enterCounter--;
|
||||
if (enterCounter == 0) {
|
||||
description.classList.remove("drop");
|
||||
}
|
||||
});
|
||||
|
||||
function makeUploadString(uploadNumber, filename) {
|
||||
return `Uploading file #${uploadNumber}: \`${filename}\`...`;
|
||||
}
|
||||
|
||||
description.addEventListener("drop", function(ev) {
|
||||
enterCounter = 0;
|
||||
description.classList.remove("drop");
|
||||
|
||||
if (ev.dataTransfer && ev.dataTransfer.files) {
|
||||
importUserFiles(ev.dataTransfer.files)
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
description.addEventListener("paste", function(ev) {
|
||||
const files = ev.clipboardData?.files ?? [];
|
||||
if (files.length > 0) {
|
||||
importUserFiles(files)
|
||||
}
|
||||
});
|
||||
|
||||
function importUserFiles(files) {
|
||||
let items = [];
|
||||
for (let i = 0; i < files.length; ++i) {
|
||||
let f = files[i];
|
||||
if (f.size < maxFileSize) {
|
||||
items.push({ file: f, error: null });
|
||||
} else {
|
||||
items.push({ file: null, error: `\`${f.name}\` is too big! Max size is ${maxFileSize} but the file is ${f.size}.` });
|
||||
}
|
||||
}
|
||||
|
||||
let cursorStart = description.selectionStart;
|
||||
let cursorEnd = description.selectionEnd;
|
||||
|
||||
let toInsert = "";
|
||||
let linesToCursor = description.value.substr(0, cursorStart).split("\n");
|
||||
let cursorLine = linesToCursor[linesToCursor.length-1].trim();
|
||||
if (cursorLine.length > 0) {
|
||||
toInsert = "\n\n";
|
||||
}
|
||||
for (let i = 0; i < items.length; ++i) {
|
||||
if (items[i].file) {
|
||||
fileCounter++;
|
||||
toInsert += makeUploadString(fileCounter, items[i].file.name) + "\n\n";
|
||||
queueUpload(fileCounter, items[i].file);
|
||||
} else {
|
||||
toInsert += `${items[i].error}\n\n`;
|
||||
}
|
||||
}
|
||||
|
||||
description.value = description.value.substring(0, cursorStart) + toInsert + description.value.substring(cursorEnd, description.value.length);
|
||||
doMarkdown();
|
||||
uploadNext();
|
||||
}
|
||||
|
||||
function replaceUploadString(upload, newString) {
|
||||
let cursorStart = description.selectionStart;
|
||||
let cursorEnd = description.selectionEnd;
|
||||
let uploadString = makeUploadString(upload.uploadNumber, upload.file.name);
|
||||
let insertIndex = description.value.indexOf(uploadString)
|
||||
description.value = description.value.replace(uploadString, newString);
|
||||
if (cursorStart <= insertIndex + uploadString.length) {
|
||||
description.selectionStart = cursorStart;
|
||||
} else {
|
||||
description.selectionStart = cursorStart - uploadString.length + newString.length;
|
||||
}
|
||||
if (cursorEnd <= insertIndex + uploadString.length) {
|
||||
description.selectionEnd = cursorEnd;
|
||||
} else {
|
||||
description.selectionEnd = cursorEnd - uploadString.length + newString.length;
|
||||
}
|
||||
doMarkdown();
|
||||
}
|
||||
|
||||
function replaceUploadStringError(upload) {
|
||||
replaceUploadString(upload, `There was a problem uploading your file \`${upload.file.name}\`.`);
|
||||
}
|
||||
|
||||
function queueUpload(uploadNumber, file) {
|
||||
uploadQueue.push({
|
||||
uploadNumber: uploadNumber,
|
||||
file: file
|
||||
});
|
||||
|
||||
currentBatchSize++;
|
||||
uploadProgressText.textContent = `Uploading files ${currentBatchDone+1}/${currentBatchSize}`;
|
||||
}
|
||||
|
||||
function uploadDone(ev) {
|
||||
try {
|
||||
if (currentXhr.status == 200 && currentXhr.response) {
|
||||
if (currentXhr.response.url) {
|
||||
let url = currentXhr.response.url;
|
||||
let newString = `[${currentUpload.file.name}](${url})`;
|
||||
if (currentXhr.response.mime.startsWith("image")) {
|
||||
newString = "!" + newString;
|
||||
}
|
||||
|
||||
replaceUploadString(currentUpload, newString);
|
||||
} else if (currentXhr.response.error) {
|
||||
replaceUploadString(currentUpload, `Upload failed for \`${currentUpload.file.name}\`: ${currentXhr.response.error}.`);
|
||||
} else {
|
||||
replaceUploadStringError(currentUpload);
|
||||
}
|
||||
} else {
|
||||
replaceUploadStringError(currentUpload);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
replaceUploadStringError(currentUpload);
|
||||
}
|
||||
currentUpload = null;
|
||||
currentXhr = null;
|
||||
currentBatchDone++;
|
||||
uploadNext();
|
||||
}
|
||||
|
||||
function updateUploadProgress(ev) {
|
||||
if (ev.lengthComputable) {
|
||||
let progress = ev.loaded / ev.total;
|
||||
uploadProgressBarFill.style.width = Math.floor(progress * 100) + "%";
|
||||
}
|
||||
}
|
||||
|
||||
function uploadNext() {
|
||||
if (currentUpload == null) {
|
||||
next = uploadQueue.shift();
|
||||
if (next) {
|
||||
uploadProgressText.textContent = `Uploading files ${currentBatchDone+1}/${currentBatchSize}`;
|
||||
uploadBar.classList.add("uploading");
|
||||
uploadProgressBarFill.style.width = "0%";
|
||||
submitButton.disabled = true;
|
||||
submitButton.value = "Uploading files...";
|
||||
|
||||
try {
|
||||
let utf8Filename = strToUTF8Arr(next.file.name);
|
||||
let base64Filename = base64EncArr(utf8Filename);
|
||||
// NOTE(mark): copied from NOTE(asaf): We use XHR because fetch can't do upload progress reports. Womp womp. https://youtu.be/Pubd-spHN-0?t=2
|
||||
currentXhr = new XMLHttpRequest();
|
||||
currentXhr.upload.addEventListener("progress", updateUploadProgress);
|
||||
currentXhr.open("POST", uploadUrl, true);
|
||||
currentXhr.setRequestHeader("Hmn-Upload-Filename", base64Filename);
|
||||
currentXhr.responseType = "json";
|
||||
currentXhr.addEventListener("loadend", uploadDone);
|
||||
currentXhr.send(next.file);
|
||||
currentUpload = next;
|
||||
} catch (err) {
|
||||
replaceUploadStringError(next);
|
||||
console.error(err);
|
||||
uploadNext();
|
||||
}
|
||||
} else {
|
||||
submitButton.disabled = false;
|
||||
submitButton.value = submitText;
|
||||
uploadBar.classList.remove("uploading");
|
||||
currentBatchSize = 0;
|
||||
currentBatchDone = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -402,6 +402,9 @@ type ProjectEditData struct {
|
|||
|
||||
APICheckUsernameUrl string
|
||||
LogoMaxFileSize int
|
||||
|
||||
MaxFileSize int
|
||||
UploadUrl string
|
||||
}
|
||||
|
||||
func ProjectNew(c *RequestContext) ResponseData {
|
||||
|
|
@ -428,6 +431,9 @@ func ProjectNew(c *RequestContext) ResponseData {
|
|||
|
||||
APICheckUsernameUrl: hmnurl.BuildAPICheckUsername(),
|
||||
LogoMaxFileSize: ProjectLogoMaxFileSize,
|
||||
|
||||
MaxFileSize: AssetMaxSize(c.CurrentUser),
|
||||
UploadUrl: c.UrlContext.BuildAssetUpload(),
|
||||
}, c.Perf)
|
||||
return res
|
||||
}
|
||||
|
|
@ -552,6 +558,9 @@ func ProjectEdit(c *RequestContext) ResponseData {
|
|||
|
||||
APICheckUsernameUrl: hmnurl.BuildAPICheckUsername(),
|
||||
LogoMaxFileSize: ProjectLogoMaxFileSize,
|
||||
|
||||
MaxFileSize: AssetMaxSize(c.CurrentUser),
|
||||
UploadUrl: c.UrlContext.BuildAssetUpload(),
|
||||
}, c.Perf)
|
||||
return res
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue