You Probably Don't Need a Server For That

You probably don't need a server for basic file processing tasks. In the past, converting file formats or performing cryptographic operations required uploading files to a server. However, modern web browsers offer built-in functionality to handle these tasks.

The File object, obtained from an input type=file, is a Blob that can be read directly using the arrayBuffer() method. This allows developers to work with file data without the need for a server. Additional methods like text() and stream() are also available on Blob, but FileReader callback usage is unnecessary for relatively modern browsers.

Drag and drop functionality provides the same data through a different event. To handle dropped files, prevent the default browser navigation and remove the active class from the dropzone element after processing the files.

For hashing files, the Web Crypto API provides native support for SHA-256 and SHA-512 algorithms. This requires a secure context (HTTPS) and runs off the main thread, ensuring a smooth user experience. However, deploying to plain HTTP will result in the digest function being undefined, causing confusion.

Image format conversion can be achieved using the canvas element. Decode the image into a canvas, then encode it out of the canvas. The createImageBitmap() method decodes the image off the main thread, preventing UI jank for large images. toBlob() with a quality argument allows lossy compression for formats like JPEG. Two important considerations are the loss of transparency when converting PNGs with alpha channels to JPEG and the need to fill the canvas with a solid color before converting to a non-transparent format.