How to Upload Files Using Retool

1// Accept field examples:
2// All images: image/*
3// PDFs only: application/pdf
4// CSV and Excel: .csv,.xlsx
5// Images and PDFs: image/*,application/pdf
6// Common document types: .pdf,.doc,.docx,.txt
7
8// Allow multiple file selection:
9// Enable 'Allow multiple files' toggle in Inspector

1// Access file properties:
2{{ filePicker1.value[0].name }}       // 'document.pdf'
3{{ filePicker1.value[0].type }}       // 'application/pdf'
4{{ filePicker1.value[0].size }}       // 245789 (bytes)
5{{ filePicker1.value[0].contents }}   // 'JVBERi0xLjQK...' (Base64)
6
7// Display file size in KB:
8{{ Math.round(filePicker1.value[0]?.size / 1024) + ' KB' }}
9
10// Check if a file is selected:
11{{ filePicker1.value?.length > 0 }}
12
13// For multiple files, iterate:
14{{ filePicker1.value.map(f => f.name).join(', ') }}

1// JS Query: validateAndUpload
2// Trigger: Upload button click
3
4const file = filePicker1.value[0];
5
6if (!file) {
7  utils.showNotification({
8    title: 'No file selected',
9    description: 'Please select a file before uploading.',
10    notificationType: 'warning',
11  });
12  return;
13}
14
15// Validate file type
16const allowedTypes = ['image/png', 'image/jpeg', 'application/pdf'];
17if (!allowedTypes.includes(file.type)) {
18  utils.showNotification({
19    title: 'Invalid file type',
20    description: `Only PNG, JPEG, and PDF files are accepted. You selected: ${file.type}`,
21    notificationType: 'error',
22  });
23  return;
24}
25
26// Validate file size (5MB limit)
27const MAX_SIZE_BYTES = 5 * 1024 * 1024;
28if (file.size > MAX_SIZE_BYTES) {
29  utils.showNotification({
30    title: 'File too large',
31    description: `Maximum file size is 5MB. Your file is ${Math.round(file.size / 1024 / 1024 * 10) / 10}MB.`,
32    notificationType: 'error',
33  });
34  return;
35}
36
37// Proceed with upload...

1// SQL query: insertFile
2-- Run mode: Manual (triggered from JS Query)
3INSERT INTO user_files (user_id, file_name, file_type, file_size, file_data, uploaded_at)
4VALUES (
5  {{ userId }},
6  {{ fileName }},
7  {{ fileType }},
8  {{ fileSize }},
9  {{ fileData }},
10  NOW()
11)
12RETURNING id;
13
14// JS Query: uploadToDatabase
15const file = filePicker1.value[0];
16// (validation omitted — see previous step)
17
18await insertFile.trigger({
19  additionalScope: {
20    userId: currentUser.id,
21    fileName: file.name,
22    fileType: file.type,
23    fileSize: file.size,
24    fileData: file.contents,  // Base64 string
25  }
26});
27
28utils.showNotification({ title: 'Uploaded', notificationType: 'success' });
29filePicker1.clearValue();

1// Step 1 — SQL or REST query: getPresignedUrl
2// This calls your backend API that generates an S3 presigned URL
3// Returns: { upload_url: 'https://bucket.s3.amazonaws.com/...?X-Amz-Signature=...' }
4
5// JS Query: uploadToS3
6const file = filePicker1.value[0];
7// (validation omitted)
8
9// Step 1: Get presigned URL from backend
10await getPresignedUrl.trigger({
11  additionalScope: {
12    fileName: file.name,
13    fileType: file.type,
14  }
15});
16
17const presignedUrl = getPresignedUrl.data.upload_url;
18const s3Key = getPresignedUrl.data.s3_key;
19
20// Step 2: Decode Base64 to binary and upload to S3
21const base64Data = file.contents;
22const binaryStr = atob(base64Data);
23const bytes = new Uint8Array(binaryStr.length);
24for (let i = 0; i < binaryStr.length; i++) {
25  bytes[i] = binaryStr.charCodeAt(i);
26}
27const blob = new Blob([bytes], { type: file.type });
28
29const uploadResponse = await fetch(presignedUrl, {
30  method: 'PUT',
31  body: blob,
32  headers: { 'Content-Type': file.type },
33});
34
35if (!uploadResponse.ok) {
36  throw new Error(`S3 upload failed: ${uploadResponse.status}`);
37}
38
39// Step 3: Store the S3 URL in the database
40const publicUrl = `https://your-bucket.s3.amazonaws.com/${s3Key}`;
41await saveFileRecord.trigger({
42  additionalScope: { fileUrl: publicUrl, fileName: file.name }
43});
44
45utils.showNotification({ title: 'File uploaded successfully', notificationType: 'success' });

1// Image component → Image source expression:
2{{ filePicker1.value?.length > 0
3   ? `data:${filePicker1.value[0].type};base64,${filePicker1.value[0].contents}`
4   : '' }}
5
6// Hide the Image component when no file is selected:
7// Hidden: {{ !filePicker1.value || filePicker1.value.length === 0 }}
8
9// For CSV files, preview the first few rows in a Table:
10// Use a transformer to parse the Base64 CSV to an array of objects