How to Handle File Downloads in Retool

1// JS Query: downloadTableAsCSV
2// Triggered by 'Export CSV' button click
3
4const rows = query1.data; // Array of row objects from your query
5
6if (!rows || rows.length === 0) {
7  utils.showNotification({
8    title: 'No data to export',
9    notificationType: 'warning',
10  });
11  return;
12}
13
14// Build CSV header from first row's keys
15const headers = Object.keys(rows[0]);
16const csvHeader = headers.map(h => `"${h}"`).join(',');
17
18// Build CSV rows — escape quotes in values
19const csvRows = rows.map(row =>
20  headers.map(h => {
21    const val = row[h];
22    if (val === null || val === undefined) return '';
23    const str = String(val).replace(/"/g, '""');
24    return `"${str}"`;
25  }).join(',')
26);
27
28const csvContent = [csvHeader, ...csvRows].join('\n');
29
30// Trigger download
31utils.downloadFile(csvContent, 'export.csv', 'text/csv');
32
33utils.showNotification({
34  title: 'Download started',
35  description: `Exporting ${rows.length} rows`,
36  notificationType: 'success',
37});

1// Generate timestamped filename
2const now = new Date();
3const dateStr = now.toISOString().slice(0, 10); // '2026-03-30'
4const timeStr = now.toTimeString().slice(0, 5).replace(':', '-'); // '14-35'
5const filename = `orders_export_${dateStr}_${timeStr}.csv`;
6
7// Pass to downloadFile:
8utils.downloadFile(csvContent, filename, 'text/csv');

1// JS Query: downloadPDF
2// getPDFData is a query that returns { pdf_base64: '...' }
3
4const pdfBase64 = getPDFData.data[0]?.pdf_base64;
5
6if (!pdfBase64) {
7  utils.showNotification({
8    title: 'PDF not available',
9    notificationType: 'error',
10  });
11  return;
12}
13
14// Download PDF
15utils.downloadFile(
16  pdfBase64,
17  `invoice_${table1.selectedRow.data.invoice_number}.pdf`,
18  'application/pdf'
19);
20
21// Common MIME types:
22// 'text/csv' — CSV
23// 'application/pdf' — PDF
24// 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' — .xlsx
25// 'application/json' — JSON
26// 'image/png' — PNG
27// 'image/jpeg' — JPEG

1// JS Query: downloadFromS3
2// Calls a backend endpoint to get a presigned URL
3
4// Step 1: Get presigned URL from your API
5await getPresignedURL.trigger({
6  additionalScope: {
7    fileKey: table1.selectedRow.data.s3_key,
8    expiresIn: 300, // 5 minutes
9  },
10});
11
12const presignedUrl = getPresignedURL.data?.url;
13
14if (!presignedUrl) {
15  utils.showNotification({
16    title: 'Download failed',
17    description: 'Could not generate download URL.',
18    notificationType: 'error',
19  });
20  return;
21}
22
23// Step 2: Open the presigned URL — browser downloads directly from S3
24window.open(presignedUrl, '_blank');
25
26// Alternatively, for forced download (not browser preview):
27const a = document.createElement('a');
28a.href = presignedUrl;
29a.download = table1.selectedRow.data.filename;
30a.click();

1// JS Query: downloadFilteredData
2// Exports only records matching current filters
3
4// Re-run the query with current filters to get filtered data
5await getOrders.trigger();
6const filteredRows = getOrders.data;
7
8// Build CSV from filtered data (same CSV logic as step 1)
9const headers = ['id', 'order_number', 'customer_name', 'status', 'total_amount', 'created_at'];
10const csvHeader = headers.join(',');
11const csvRows = filteredRows.map(row =>
12  headers.map(h => `"${String(row[h] ?? '').replace(/"/g, '""')}"`).join(',')
13);
14
15const filename = `orders_filtered_${statusFilter.value || 'all'}_${new Date().toISOString().slice(0, 10)}.csv`;
16utils.downloadFile([csvHeader, ...csvRows].join('\n'), filename, 'text/csv');