Support Images

[curran]

As a user editing files, I want to be able to add an image to my list of files.

Possible interactions:

• Drag & drop an image file into the sidebar
• Paste an image with Ctrl+V when the sidebar (or a folder) is focused
• Click a dedicated button "add image"
• In the "create file" modal, add an option to upload a file

Since the files are all represented as strings, I think it makes sense to encode it using base64 encoding. This will require some server-side changes to sync properly to binary on disk.

[curran]

Some ideas from ChatGPT:

Sure, here is a sample JavaScript code snippet that demonstrates how you can handle the interactions for adding an image file to your list of files and encode it using Base64:

// Function to handle the drop event
function handleDrop(event) {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    if (file) {
        encodeFileToBase64(file);
    }
}

// Function to handle paste event
function handlePaste(event) {
    const items = event.clipboardData.items;
    for (let i = 0; i < items.length; i++) {
        if (items[i].kind === 'file') {
            const file = items[i].getAsFile();
            encodeFileToBase64(file);
        }
    }
}

// Function to handle file input change event
function handleFileInputChange(event) {
    const file = event.target.files[0];
    if (file) {
        encodeFileToBase64(file);
    }
}

// Function to encode file to Base64
function encodeFileToBase64(file) {
    const reader = new FileReader();
    reader.onload = function(event) {
        const base64String = event.target.result.split(',')[1];
        // Now you can use the base64String, e.g., add it to your list of files
        console.log(base64String);
    };
    reader.readAsDataURL(file);
}

// Event listeners for drag & drop, paste, and file input
document.addEventListener('drop', handleDrop);
document.addEventListener('paste', handlePaste);

const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', handleFileInputChange);

// Example of the "add image" button
const addButton = document.getElementById('add-image-button');
addButton.addEventListener('click', () => {
    fileInput.click();
});

HTML for file input and button:

<input type="file" id="file-input" style="display: none;">
<button id="add-image-button">Add Image</button>

This code provides a basic implementation of the interactions you described:

• Drag & drop an image file into the sidebar.
• Paste an image with Ctrl+V when the sidebar (or a folder) is focused.
• Click a dedicated button "add image".
• In the "create file" modal, add an option to upload a file.

When an image file is added through any of these interactions, it is encoded to a Base64 string, which you can then use as needed in your application.