Advanced Tutorial: File Uploads and Forms

// Upload a file with progress tracking
await hyperclay.uploadFileBasic(file, {
    onProgress: (percent) => {
        progressBar.style.width = percent + '%';
    },
    onComplete: (result) => {
        console.log('Uploaded:', result.url);
        // Add image to gallery
        gallery.innerHTML += `<img src="${result.url}">`;
    },
    onError: (error) => {
        console.error('Upload failed:', error);
    }
});

<div class="upload-zone" 
     ondrop="handleDrop(event)" 
     ondragover="event.preventDefault()">
    Drag files here
</div>
 
<script>
async function handleDrop(event) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    
    for (const file of files) {
        await hyperclay.uploadFile(file);
    }
}
</script>

// Send form data to site owner
async function handleSubmit(form) {
    const data = getDataFromForm(form);
    
    await hyperclay.sendMessage(data, 
        'Message sent successfully!',
        () => form.reset()
    );
}

// Generate and save a JSON file
const data = { /* your data */ };
 
const result = await hyperclay.createFile({
    fileName: 'backup.json',
    fileBody: JSON.stringify(data)
});
 
console.log('File created:', result.url);

// Upload multiple files concurrently
const uploads = files.map(file => 
    hyperclay.uploadFile(file)
);
const results = await Promise.all(uploads);

// Resize before upload (pseudo-code)
const canvas = document.createElement('canvas');
// ... resize logic ...
const blob = await canvas.toBlob();
const resizedFile = new File([blob], 'image.jpg');
await hyperclay.uploadFile(resizedFile);

// Upload files, then send form with URLs
const attachments = [];
for (const file of files) {
    const result = await hyperclay.uploadFile(file);
    attachments.push(result.url);
}
 
formData.attachments = attachments;
await hyperclay.sendMessage(formData);

// Generate CSV from DOM
const csv = /* generate CSV string */;
await hyperclay.createFile({
    fileName: 'export.csv',
    fileBody: csv
});

// Show progress
progressBar.style.width = percent + '%';
 
// Toast notifications
toast('Upload complete!');
toast('Error uploading', 'error');

try {
    await hyperclay.uploadFile(file);
} catch (error) {
    if (error.message.includes('size')) {
        toast('File too large');
    }
}

if (file.size > 10 * 1024 * 1024) {
    throw new Error('File too large');
}
if (!file.type.startsWith('image/')) {
    throw new Error('Images only');
}

<!-- Camera capture -->
<input type="file" accept="image/*" capture="environment">