Live
x
<html> <head> <script src="https://js.bytescale.com/sdk/v3"></script> </head> <body> <h1>Please select a file...</h1> <input type="file" onchange="onFileSelected(event)" /> <script> // DOM Elements const d = document const h1 = d.getElementsByTagName("h1")[0] const uploadButton = d.getElementsByTagName("input")[0] // import * as Bytescale from "@bytescale/sdk"; const uploadManager = new Bytescale.UploadManager({ // --------------------------------------------- // TODO: insert your API key (www.bytescale.com) // --------------------------------------------- apiKey: "free" }); // File input handler. const onFileSelected = async (event) => { uploadButton.remove(); const file = event.target.files[0] try { const { fileUrl } = await uploadManager.upload({ data: file, onProgress: ({ progress }) => { h1.innerHTML = `File uploading... ${progress}%`; } }); h1.innerHTML = ` File uploaded: <br/> <br/> <a href="${fileUrl}" target="_blank">${fileUrl}</a>`; } catch (error) { h1.innerHTML = `Please try another file:<br/><br/>${error.message}`; } } </script> </body></html>
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.