index.html

<meta lang="en" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agregore Drag and Drop</title>
<style>
  @import url("agregore://theme/vars.css");
  html {
    background: var(--ag-theme-background);
    color: var(--ag-theme-text);
    font-family: var(--ag-theme-font-family);
  }
  #uploadBox {
    padding: 1em;
    border: 0.25em solid var(--ag-theme-primary);
    border-radius: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  a {
    color: var(--ag-theme-secondary);
    padding: 0.15em 0.5em;
    border-radius: 0.5em;
  }

  main {
    margin: 1em;
  }
</style>
<main>
  <label for="protocolSelect">
    Protocol:
    <select id="protocolSelect">
      <option value="ipfs" selected>
        Inter-Planetary File System (IPFS://)
      </option>
      <option value="hyper">Hypercore-Protocol (HYPER://)</option>
    </select>
  </label>
  <section id="uploadBox">
    <h1>Drop a file to upload it</h1>
  </section>
  <ul id="uploadListBox"></ul>
  <footer>
    <a href="https://github.com/AgregoreWeb/agregore-drag-and-drop"
      >Source Code</a
    >
  </footer>
</main>
<script>
	function $(query) {
    return document.querySelector(query)
}

const uploadBox = $('#uploadBox')
uploadBox.ondragover = () => false
uploadBox.ondrop = async (e) => {
    e.preventDefault()
    const { dataTransfer } = e
    if(!dataTransfer) return

    await uploadFiles(dataTransfer.files);
}

const uploadListBox = $('#uploadListBox')

const protocolSelect = $('#protocolSelect')

async function uploadFiles(files) {
    const protocol = protocolSelect.value;

    const formData = new FormData();
    // Append each file to the FormData
    for (const file of files) {
        formData.append('file', file, file.name);
    }

    // Construct the URL based on the protocol
    let url;
    if (protocol === 'hyper') {
        const hyperdriveUrl = await generateHyperdriveKey('drag-and-drop');
        url = `${hyperdriveUrl}`;
    } else {
        url = `ipfs://bafyaabakaieac/`;
    }

    // Perform the upload for each file
    try {
        const response = await fetch(url, {
            method: 'PUT',
            body: formData,
        });

        if (!response.ok) {
            addError(files, await response.text());
        }
        const urlResponse = protocol === 'hyper' ? response.url : response.headers.get('Location');
        addURL(urlResponse);
    } catch (error) {
        console.error(`Error uploading ${files}:`, error);
    }
}



async function generateHyperdriveKey(name) {
    try {
        const response = await fetch(`hyper://localhost/?key=${name}`, { method: 'POST' });
        if (!response.ok) {
            throw new Error(`Failed to generate Hyperdrive key: ${response.statusText}`);
        }
        return await response.text();  // This returns the hyper:// URL
    } catch (error) {
        console.error('Error generating Hyperdrive key:', error);
        throw error;
    }
}

function addURL(url) {
    uploadListBox.innerHTML += `<li><a href="${url}">${url}</a></li>`
}

function addError(name, text) {
    uploadListBox.innerHTML += `<li class="log">Error in ${name}: ${text}</li>`
}
</script>