Merge 344bc599a5 into 80d4d8e128
Matthew Richardson
1 day ago
committed by
GitHub
commit
64f189766a
@ -0,0 +1,376 @@
|
||||
<script>
|
||||
import { download, upload } from '@tauri-apps/plugin-upload'
|
||||
import { open } from '@tauri-apps/plugin-dialog'
|
||||
import { JsonView } from '@zerodevx/svelte-json-view'
|
||||
import { appDataDir } from '@tauri-apps/api/path'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let onMessage
|
||||
|
||||
let downloadUrl = 'https://httpbin.org/json'
|
||||
let downloadFolder = ''
|
||||
let downloadPath = ''
|
||||
let downloadProgress = null
|
||||
let downloadResult = null
|
||||
let isDownloading = false
|
||||
|
||||
let uploadUrl = 'https://httpbin.org/post'
|
||||
let uploadFilePath = ''
|
||||
let uploadProgress = null
|
||||
let uploadResult = null
|
||||
let isUploading = false
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const defaultDir = await appDataDir()
|
||||
if (!downloadFolder) {
|
||||
downloadFolder = defaultDir
|
||||
updateDownloadPath()
|
||||
}
|
||||
} catch (error) {
|
||||
onMessage({ error: `Failed to get default directory: ${error.toString()}` })
|
||||
}
|
||||
})
|
||||
|
||||
async function selectDownloadFolder() {
|
||||
try {
|
||||
const selected = await open({
|
||||
directory: true,
|
||||
multiple: false,
|
||||
defaultPath: downloadFolder || undefined
|
||||
})
|
||||
if (selected) {
|
||||
downloadFolder = selected
|
||||
updateDownloadPath()
|
||||
}
|
||||
} catch (error) {
|
||||
onMessage({ error: error.toString() })
|
||||
}
|
||||
}
|
||||
|
||||
function getFilenameFromUrl(url) {
|
||||
try {
|
||||
const urlObj = new URL(url)
|
||||
let pathname = urlObj.pathname
|
||||
|
||||
// Remove leading slash
|
||||
if (pathname.startsWith('/')) {
|
||||
pathname = pathname.substring(1)
|
||||
}
|
||||
|
||||
// If pathname is empty or ends with slash, use a default name
|
||||
if (!pathname || pathname.endsWith('/')) {
|
||||
return 'downloaded-file.json'
|
||||
}
|
||||
|
||||
// Extract filename from pathname
|
||||
const segments = pathname.split('/')
|
||||
let filename = segments[segments.length - 1]
|
||||
|
||||
// If no extension, try to infer from URL or use default
|
||||
if (!filename.includes('.')) {
|
||||
// Check if URL suggests a file type
|
||||
if (url.includes('json') || urlObj.searchParams.has('format') && urlObj.searchParams.get('format') === 'json') {
|
||||
filename += '.json'
|
||||
} else if (url.includes('xml')) {
|
||||
filename += '.xml'
|
||||
} else if (url.includes('csv')) {
|
||||
filename += '.csv'
|
||||
} else {
|
||||
filename += '.txt'
|
||||
}
|
||||
}
|
||||
|
||||
return filename
|
||||
} catch (error) {
|
||||
return 'downloaded-file.json'
|
||||
}
|
||||
}
|
||||
|
||||
function updateDownloadPath() {
|
||||
if (downloadFolder && downloadUrl) {
|
||||
const filename = getFilenameFromUrl(downloadUrl)
|
||||
downloadPath = `${downloadFolder}/${filename}`
|
||||
} else {
|
||||
downloadPath = ''
|
||||
}
|
||||
}
|
||||
|
||||
// Update download path when URL changes
|
||||
$: if (downloadUrl) {
|
||||
updateDownloadPath()
|
||||
}
|
||||
|
||||
async function selectUploadFile() {
|
||||
try {
|
||||
const selected = await open({
|
||||
directory: false,
|
||||
multiple: false
|
||||
})
|
||||
if (selected) {
|
||||
uploadFilePath = selected
|
||||
}
|
||||
} catch (error) {
|
||||
onMessage({ error: error.toString() })
|
||||
}
|
||||
}
|
||||
|
||||
async function startDownload() {
|
||||
if (!downloadUrl || !downloadFolder) {
|
||||
onMessage({ error: 'Please provide both URL and download folder' })
|
||||
return
|
||||
}
|
||||
|
||||
// Ensure download path is updated
|
||||
updateDownloadPath()
|
||||
|
||||
if (!downloadPath) {
|
||||
onMessage({ error: 'Could not generate download path' })
|
||||
return
|
||||
}
|
||||
|
||||
isDownloading = true
|
||||
downloadProgress = null
|
||||
downloadResult = null
|
||||
|
||||
try {
|
||||
await download(
|
||||
downloadUrl,
|
||||
downloadPath,
|
||||
(progress) => {
|
||||
downloadProgress = {
|
||||
progress: progress.progress,
|
||||
progressTotal: progress.progressTotal,
|
||||
total: progress.total,
|
||||
transferSpeed: progress.transferSpeed,
|
||||
percentage: progress.total > 0 ? Math.round((progress.progressTotal / progress.total) * 100) : 0
|
||||
}
|
||||
},
|
||||
new Map([
|
||||
['User-Agent', 'Tauri Upload Plugin Demo']
|
||||
])
|
||||
)
|
||||
|
||||
downloadResult = {
|
||||
success: true,
|
||||
message: `File downloaded successfully to: ${downloadPath}`,
|
||||
finalProgress: downloadProgress
|
||||
}
|
||||
|
||||
onMessage({
|
||||
type: 'download',
|
||||
result: downloadResult
|
||||
})
|
||||
} catch (error) {
|
||||
downloadResult = {
|
||||
success: false,
|
||||
error: error.toString()
|
||||
}
|
||||
onMessage({ error: error.toString() })
|
||||
} finally {
|
||||
isDownloading = false
|
||||
}
|
||||
}
|
||||
|
||||
async function startUpload() {
|
||||
if (!uploadUrl || !uploadFilePath) {
|
||||
onMessage({ error: 'Please provide both URL and file path' })
|
||||
return
|
||||
}
|
||||
|
||||
isUploading = true
|
||||
uploadProgress = null
|
||||
uploadResult = null
|
||||
|
||||
try {
|
||||
const response = await upload(
|
||||
uploadUrl,
|
||||
uploadFilePath,
|
||||
(progress) => {
|
||||
uploadProgress = {
|
||||
progress: progress.progress,
|
||||
progressTotal: progress.progressTotal,
|
||||
total: progress.total,
|
||||
transferSpeed: progress.transferSpeed,
|
||||
percentage: progress.total > 0 ? Math.round((progress.progressTotal / progress.total) * 100) : 0
|
||||
}
|
||||
},
|
||||
new Map([
|
||||
['User-Agent', 'Tauri Upload Plugin Demo']
|
||||
])
|
||||
)
|
||||
|
||||
uploadResult = {
|
||||
success: true,
|
||||
response: response,
|
||||
finalProgress: uploadProgress
|
||||
}
|
||||
|
||||
onMessage({
|
||||
type: 'upload',
|
||||
result: uploadResult
|
||||
})
|
||||
} catch (error) {
|
||||
uploadResult = {
|
||||
success: false,
|
||||
error: error.toString()
|
||||
}
|
||||
onMessage({ error: error.toString() })
|
||||
} finally {
|
||||
isUploading = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-semibold mb-4 text-gray-800">File Download</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="download-url" class="block text-sm font-medium text-gray-700 mb-1">Download URL:</label>
|
||||
<input
|
||||
id="download-url"
|
||||
bind:value={downloadUrl}
|
||||
type="url"
|
||||
placeholder="https://example.com/file.json"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
disabled={isDownloading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="download-folder" class="block text-sm font-medium text-gray-700 mb-1">Download folder:</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
id="download-folder"
|
||||
bind:value={downloadFolder}
|
||||
type="text"
|
||||
placeholder="Select download folder..."
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
disabled={isDownloading}
|
||||
/>
|
||||
<button
|
||||
on:click={selectDownloadFolder}
|
||||
class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 disabled:opacity-50"
|
||||
disabled={isDownloading}
|
||||
>
|
||||
Browse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if downloadPath}
|
||||
<div class="bg-blue-50 border border-blue-200 p-3 rounded-md">
|
||||
<div class="text-sm text-blue-800">
|
||||
<strong>File will be saved as:</strong>
|
||||
<div class="font-mono text-xs mt-1 break-all">{downloadPath}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
on:click={startDownload}
|
||||
class="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={isDownloading || !downloadUrl || !downloadFolder}
|
||||
>
|
||||
{isDownloading ? 'Downloading...' : 'Download File'}
|
||||
</button>
|
||||
|
||||
{#if downloadProgress}
|
||||
<div class="bg-white p-3 rounded border">
|
||||
<div class="flex justify-between text-sm text-gray-600 mb-1">
|
||||
<span>Progress: {downloadProgress.percentage}%</span>
|
||||
<span>Speed: {Math.round(downloadProgress.transferSpeed / 1024)} KB/s</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
class="bg-blue-500 h-2 rounded-full transition-all duration-300"
|
||||
style="width: {downloadProgress.percentage}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">
|
||||
{Math.round(downloadProgress.progressTotal / 1024)} KB / {Math.round(downloadProgress.total / 1024)} KB
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if downloadResult}
|
||||
<div class="bg-white p-3 rounded border">
|
||||
<JsonView json={downloadResult} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 class="text-lg font-semibold mb-4 text-gray-800">File Upload</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="upload-url" class="block text-sm font-medium text-gray-700 mb-1">Upload URL:</label>
|
||||
<input
|
||||
id="upload-url"
|
||||
bind:value={uploadUrl}
|
||||
type="url"
|
||||
placeholder="https://httpbin.org/post"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
disabled={isUploading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="upload-file" class="block text-sm font-medium text-gray-700 mb-1">File to upload:</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
id="upload-file"
|
||||
bind:value={uploadFilePath}
|
||||
type="text"
|
||||
placeholder="Select file to upload..."
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
disabled={isUploading}
|
||||
/>
|
||||
<button
|
||||
on:click={selectUploadFile}
|
||||
class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 disabled:opacity-50"
|
||||
disabled={isUploading}
|
||||
>
|
||||
Browse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={startUpload}
|
||||
class="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={isUploading || !uploadUrl || !uploadFilePath}
|
||||
>
|
||||
{isUploading ? 'Uploading...' : 'Upload File'}
|
||||
</button>
|
||||
|
||||
{#if uploadProgress}
|
||||
<div class="bg-white p-3 rounded border">
|
||||
<div class="flex justify-between text-sm text-gray-600 mb-1">
|
||||
<span>Progress: {uploadProgress.percentage}%</span>
|
||||
<span>Speed: {Math.round(uploadProgress.transferSpeed / 1024)} KB/s</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
class="bg-green-500 h-2 rounded-full transition-all duration-300"
|
||||
style="width: {uploadProgress.percentage}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">
|
||||
{Math.round(uploadProgress.progressTotal / 1024)} KB / {Math.round(uploadProgress.total / 1024)} KB
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if uploadResult}
|
||||
<div class="bg-white p-3 rounded border">
|
||||
<JsonView json={uploadResult} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in new issue