Mercurial
diff mrjunejune/src/tools/file_converter/index.js @ 93:be91a73d801a
[MrJuneJune] Updated my website.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Fri, 02 Jan 2026 18:02:22 -0800 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/tools/file_converter/index.js Fri Jan 02 18:02:22 2026 -0800 @@ -0,0 +1,114 @@ +async function convertImageToWebP() +{ + const input = document.getElementById('imageInput'); + const btn = document.getElementById('convertImageBtn'); + const loading = document.getElementById('imageLoading'); + const result = document.getElementById('imageResult'); + const message = document.getElementById('imageMessage'); + const download = document.getElementById('imageDownload'); + + if (!input.files || !input.files[0]) + { + alert('Please select an image file first'); + return; + } + + const file = input.files[0]; + + // Show loading state + btn.disabled = true; + loading.classList.add('show'); + result.classList.remove('show', 'success', 'error'); + download.style.display = 'none'; + + try { + const response = await fetch('/api/convert/image-to-webp', { + method: 'POST', + body: file, + headers: { + 'Content-Type': file.type + } + }); + + loading.classList.remove('show'); + result.classList.add('show'); + + if (response.ok) { + const data = await response.json(); + + download.href = data.download_url; + download.download = file.name.replace(/\.[^/.]+$/, '') + '.webp'; + download.style.display = 'inline-block'; + + message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.'; + result.classList.add('success'); + } else { + const text = await response.text(); + message.textContent = 'Conversion failed: ' + text; + result.classList.add('error'); + } + } catch (error) { + loading.classList.remove('show'); + result.classList.add('show', 'error'); + message.textContent = 'Error: ' + error.message; + } finally { + btn.disabled = false; + } +} + +async function convertVideoToMP4() { + const input = document.getElementById('videoInput'); + const btn = document.getElementById('convertVideoBtn'); + const loading = document.getElementById('videoLoading'); + const result = document.getElementById('videoResult'); + const message = document.getElementById('videoMessage'); + const download = document.getElementById('videoDownload'); + + if (!input.files || !input.files[0]) { + alert('Please select a video file first'); + return; + } + + const file = input.files[0]; + + // Show loading state + btn.disabled = true; + loading.classList.add('show'); + result.classList.remove('show', 'success', 'error'); + download.style.display = 'none'; + + try { + const response = await fetch('/api/convert/video-to-mp4', { + method: 'POST', + body: file, + headers: { + 'Content-Type': file.type + } + }); + + loading.classList.remove('show'); + result.classList.add('show'); + + if (response.ok) { + const data = await response.json(); + + download.href = data.download_url; + download.download = file.name.replace(/\.[^/.]+$/, '') + '.mp4'; + download.style.display = 'inline-block'; + + message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.'; + result.classList.add('success'); + } else { + const text = await response.text(); + message.textContent = 'Conversion failed: ' + text; + result.classList.add('error'); + } + } catch (error) { + loading.classList.remove('show'); + result.classList.add('show', 'error'); + message.textContent = 'Error: ' + error.message; + } finally { + btn.disabled = false; + } +} +