This example Next.js project demonstrates how to use Trigger.dev Realtime to build a CSV Uploader with progress updates streamed to the frontend.
The frontend is a Next.js app that allows users to upload a CSV file, which is then processed in the background using Trigger.dev tasks. The progress of the task is streamed back to the frontend in real-time using Trigger.dev Realtime.
Click here to view the full code for this project in our examples repository on GitHub. You can fork it and use it as a starting point for your own project.
csvValidator
downloads the CSV file, parses it, and then splits the rows into multiple batches. It then does a batch.triggerAndWait
to distribute the work the handleCSVRow
task.handleCSVRow
task “simulates” checking the row for a valid email address and then updates the progress of the parent task using metadata.parent
. See the Trigger.dev docs for more information on how to use the metadata.parent
object.useRealtimeCSVValidator
hook in the src/hooks/useRealtimeCSVValidator.ts file handles the call to useRealtimeRun
to get the progress of the parent task.CSVProcessor
component in the src/components/CSVProcessor.tsx file handles the file upload and displays the progress bar, and uses the useRealtimeCSVValidator
hook to get the progress updates.To learn more, take a look at the following resources: