Bouton d’envoi de fichier HTML personnalisé avec glisser-déposer

(
  mkdir native-upload &&
  cd native-upload &&
  touch index.html styles.css enhance.js server.mts
)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Native file upload</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="enhance.js" defer></script>
  </head>
  <body>
    <main>
      <h1>Upload a file</h1>
      <form id="upload-form" aria-label="File upload" action="/upload"
        method="post" enctype="multipart/form-data">
        <section id="drop-area" aria-label="File selection">
          <label for="file-input">Choose a file</label>
          <p id="file-help">One file, up to 1 MiB. Nothing is saved.</p>
          <input id="file-input" name="file" type="file" required
            aria-describedby="file-help" />
          <p id="drop-hint" hidden>Or drop one file here, then choose Upload.</p>
        </section>
        <p id="selection-status" role="status" aria-atomic="true"></p>
        <button type="submit">Upload</button>
      </form>
    </main>
  </body>
</html>

:root { color-scheme: light dark; }
:root.dark { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 1rem/1.5 system-ui, sans-serif;
  background: Canvas;
  color: CanvasText;
}
main { max-width: 36rem; margin: 2rem auto; padding: 1.25rem; }
label { font-weight: 600; }
input[type='file'] { display: block; width: 100%; font: inherit; }
input[type='file']::file-selector-button,
button {
  font: inherit;
  padding: 0.6rem 0.9rem;
  border: 1px solid ButtonText;
  border-radius: 0.4rem;
  background: ButtonFace;
  color: ButtonText;
  cursor: pointer;
}
input[type='file']::file-selector-button { margin-inline-end: 0.75rem; }
input:focus-visible,
button:focus-visible { outline: 3px solid Highlight; outline-offset: 4px; }
#drop-area { border: 2px dashed GrayText; padding: 1rem; }
#drop-area.dragover { border-color: Highlight; border-style: solid; }
#selection-status { overflow-wrap: anywhere; }

import type { IncomingMessage, ServerResponse } from 'node:http'

import { createHash } from 'node:crypto'
import { readFile } from 'node:fs/promises'
import { createServer } from 'node:http'
import { parseArgs } from 'node:util'

const { values } = parseArgs({ options: { port: { type: 'string', default: '0' } } })
const port = Number(values.port)
if (!/^\d+$/.test(values.port) || !Number.isInteger(port) || port > 65535) {
  throw new Error('Use --port with an integer from 0 to 65535.')
}
const maxFileBytes = 1024 * 1024
const maxRequestBytes = 2 * 1024 * 1024
const assets = new Map<string, { body: Buffer; type: string }>()
for (const [route, file, type] of [
  ['/', 'index.html', 'text/html; charset=utf-8'],
  ['/styles.css', 'styles.css', 'text/css; charset=utf-8'],
  ['/enhance.js', 'enhance.js', 'text/javascript; charset=utf-8'],
]) {
  assets.set(route, { body: await readFile(new URL(file, import.meta.url)), type })
}
let origin = ''

function reply(response: ServerResponse, status: number, message: string): void {
  response.writeHead(status, {
    'Content-Type': 'text/plain; charset=utf-8',
    'Cache-Control': 'no-store',
    'X-Content-Type-Options': 'nosniff',
  })
  response.end(`${message}\n\nNothing was saved. Use Back to return to the form.\n`)
}

async function handle(request: IncomingMessage, response: ServerResponse): Promise<void> {
  if (request.headers.host !== new URL(origin).host) {
    request.resume()
    reply(response, 403, 'Use the printed loopback URL.')
    return
  }
  const asset = assets.get(request.url ?? '')
  if (request.method === 'GET' && asset) {
    response.writeHead(200, { 'Content-Type': asset.type })
    response.end(asset.body)
    return
  }
  if (request.method === 'GET' && request.url === '/favicon.ico') {
    response.writeHead(204).end()
    return
  }
  if (request.method !== 'POST' || request.url !== '/upload') {
    request.resume()
    reply(response, 404, 'Route not found.')
    return
  }
  if (request.headers.origin !== origin) {
    request.resume()
    reply(response, 403, 'Submit the form served by this receiver.')
    return
  }

  const chunks: Buffer[] = []
  let bytes = 0
  // Preserve the connection for readable feedback when stopping the read loop early.
  for await (const chunk of request.iterator({ destroyOnReturn: false })) {
    if (!Buffer.isBuffer(chunk)) throw new Error('Expected request bytes')
    bytes += chunk.length
    if (bytes > maxRequestBytes) {
      request.resume()
      reply(response, 413, 'Request exceeds 2 MiB. Choose a smaller file.')
      return
    }
    chunks.push(chunk)
  }

  let data: FormData
  try {
    data = await new Request(origin, {
      method: 'POST',
      headers: { 'Content-Type': request.headers['content-type'] ?? '' },
      body: Buffer.concat(chunks),
    }).formData()
  } catch {
    reply(response, 400, 'Could not read the multipart form.')
    return
  }
  const file = data.get('file')
  if ([...data.keys()].length !== 1 || !(file instanceof File) || file.name === '') {
    reply(response, 400, 'Choose exactly one file in the file field.')
    return
  }
  if (file.size > maxFileBytes) {
    reply(response, 413, 'File exceeds 1 MiB. Choose a smaller file.')
    return
  }
  const receipt = {
    name: file.name,
    bytes: file.size,
    sha256: createHash('sha256').update(new Uint8Array(await file.arrayBuffer())).digest('hex'),
  }
  reply(response, 200, `Received one file.\n${JSON.stringify(receipt, null, 2)}`)
}

const server = createServer((request, response) => {
  void handle(request, response).catch(() => {
    console.error('Upload handler failed.')
    if (!response.headersSent) reply(response, 500, 'Could not process the upload.')
    else response.destroy()
  })
})
server.requestTimeout = 30000
server.on('error', () => {
  console.error('Could not start the receiver. Check that the port is available.')
  process.exitCode = 1
})
server.listen(port, '127.0.0.1', () => {
  const address = server.address()
  if (!address || typeof address === 'string') throw new Error('Missing TCP address')
  origin = `http://127.0.0.1:${address.port}`
  console.log(`Open ${origin}/`)
})

node native-upload/server.mts

const form = document.getElementById('upload-form')
const input = document.getElementById('file-input')
const area = document.getElementById('drop-area')
const status = document.getElementById('selection-status')
const hint = document.getElementById('drop-hint')
const maxFileBytes = 1024 * 1024

function checkSelection(files) {
  const file = files[0]
  if (files.length !== 1 || !file) {
    input.value = ''
    status.textContent = 'Choose exactly one file.'
    return false
  }
  if (file.size > maxFileBytes) {
    input.value = ''
    status.textContent = 'File exceeds 1 MiB. Choose a smaller file.'
    return false
  }
  status.textContent = `Selected: ${file.name}. Choose Upload to send it.`
  return true
}

input.addEventListener('change', () => checkSelection(input.files))
form.addEventListener('submit', (event) => {
  if (!checkSelection(input.files)) event.preventDefault()
})
area.addEventListener('dragover', (event) => {
  event.preventDefault()
  area.classList.add('dragover')
})
area.addEventListener('dragleave', () => area.classList.remove('dragover'))
area.addEventListener('drop', (event) => {
  event.preventDefault()
  area.classList.remove('dragover')
  if (!event.dataTransfer || !checkSelection(event.dataTransfer.files)) return
  try {
    input.files = event.dataTransfer.files
  } catch {
    input.value = ''
    status.textContent = 'Could not select this drop. Use the file picker.'
  }
})
hint.hidden = false