Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Adding Support for Uploading Multiple Files #803

Merged
merged 4 commits into from
Jun 12, 2024
Merged

Fix: Adding Support for Uploading Multiple Files #803

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ce2539
added support for uploading multiple files at a time.
MythicalCow Jun 7, 2024
5c73682
Merge branch 'khoj-ai:master' into file-explorer-fix
MythicalCow Jun 7, 2024
9e7f452
optimized multiple file upload to use a batch upload
MythicalCow Jun 10, 2024
85f92f1
allowing files to upload even if there is one unsupported file
MythicalCow Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 84 additions & 68 deletions src/khoj/interface/web/chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -801,17 +801,18 @@
if (overlayText == null) {
dropzone.classList.add('dragover');
var overlayText = document.createElement("div");
overlayText.innerHTML = "Select a file or drag + drop it here to share it with Khoj";
overlayText.innerHTML = "Select file(s) or drag + drop it here to share it with Khoj";
overlayText.className = "dropzone-overlay";
overlayText.id = "dropzone-overlay";
dropzone.appendChild(overlayText);
}

const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.multiple = true;
fileInput.addEventListener('change', function() {
const selectedFile = fileInput.files[0];
uploadDataForIndexing(selectedFile);
const selectedFiles = fileInput.files;
uploadDataForIndexing(selectedFiles);
});

// Remove overlay text after file input is closed
Expand All @@ -835,90 +836,105 @@
fileInput.click();
}

function uploadDataForIndexing(file) {
function uploadDataForIndexing(files) {
var dropzone = document.getElementById('chat-body');

if (!file || (!allowedExtensions.includes(file.type) && !allowedFileEndings.includes(file.name.split('.').pop()))) {
dropzone.classList.remove('dragover');
if (file) {
alert("Sorry, that file type is not yet supported");
}
var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
overlayText.remove();
for (let file of files) {
if (!file || (!allowedExtensions.includes(file.type) && !allowedFileEndings.includes(file.name.split('.').pop()))) {
dropzone.classList.remove('dragover');
if (file) {
alert("Sorry, that file type is not yet supported");
sabaimran marked this conversation as resolved.
Show resolved Hide resolved
}
var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
overlayText.remove();
}
return;
}
return;
}

const fileName = file.name;
var fileContents = null;

var reader = new FileReader();
const formData = new FormData();


var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
// Display loading spinner
var loadingSpinner = document.createElement("div");
overlayText.innerHTML = "Uploading file for indexing";
overlayText.innerHTML = "Uploading file(s) for indexing";
loadingSpinner.className = "spinner";
overlayText.appendChild(loadingSpinner);
}

reader.onload = function (event) {
fileContents = event.target.result;
let fileType = file.type;
if (fileType === "") {
if (fileName.split('.').pop() === "org") {
fileType = "text/org";
} else if (fileName.split('.').pop() === "md") {
fileType = "text/markdown";
} else if (fileName.split('.').pop() === "txt") {
fileType = "text/plain";
} else if (fileName.split('.').pop() === "html") {
fileType = "text/html";
} else if (fileName.split('.').pop() === "pdf") {
fileType = "application/pdf";
}
}
// Create an array of Promises for file reading
const fileReadPromises = Array.from(files).map(file => {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = function (event) {
let fileContents = event.target.result;
let fileType = file.type;
let fileName = file.name;
if (fileType === "") {
let fileExtension = fileName.split('.').pop();
if (fileExtension === "org") {
fileType = "text/org";
} else if (fileExtension === "md") {
fileType = "text/markdown";
} else if (fileExtension === "txt") {
fileType = "text/plain";
} else if (fileExtension === "html") {
fileType = "text/html";
} else if (fileExtension === "pdf") {
fileType = "application/pdf";
} else {
// Skip this file if its type is not supported
resolve();
return;
}
}

let fileObj = new Blob([fileContents], { type: fileType });
formData.append("files", fileObj, file.name);
console.log(formData);
let fileObj = new Blob([fileContents], { type: fileType });
formData.append("files", fileObj, file.name);
resolve();
};
reader.onerror = reject;
sabaimran marked this conversation as resolved.
Show resolved Hide resolved
reader.readAsArrayBuffer(file);
});
});

fetch("/api/v1/index/update?force=false&client=web", {
method: "POST",
body: formData,
})
.then((data) => {
console.log(data);
dropzone.classList.remove('dragover');
var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
overlayText.remove();
}
// Display indexing success message
flashStatusInChatInput("✅ File indexed successfully");
renderAllFiles();
addFileFilterToConversation(fileName);
loadFileFiltersFromConversation();
})
.catch((error) => {
console.log(error);
dropzone.classList.remove('dragover');
var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
overlayText.remove();
}
// Display indexing failure message
flashStatusInChatInput("⛔️ Failed to upload file for indexing");
// Wait for all files to be read before making the fetch request
Promise.all(fileReadPromises)
.then(() => {
return fetch("/api/v1/index/update?force=false&client=web", {
method: "POST",
body: formData,
});
};

reader.readAsArrayBuffer(file);
})
.then((data) => {
console.log(data);
dropzone.classList.remove('dragover');
var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
overlayText.remove();
}
// Display indexing success message
flashStatusInChatInput("✅ File indexed successfully");
sabaimran marked this conversation as resolved.
Show resolved Hide resolved
renderAllFiles();
for (let file of files) {
addFileFilterToConversation(file.name);
}
loadFileFiltersFromConversation();
})
.catch((error) => {
console.log(error);
dropzone.classList.remove('dragover');
var overlayText = document.getElementById("dropzone-overlay");
if (overlayText != null) {
overlayText.remove();
}
// Display indexing failure message
flashStatusInChatInput("⛔️ Failed to upload file for indexing");
});
}


function setupDropZone() {
var dropzone = document.getElementById('chat-body');

Expand Down
Loading