Implementing a Google Drive Video Downloader in TypeScript

Implementing Google Drive Downloader

Welcome to the first lesson in this course! In this unit, you'll build a system that allows users to preview, download, and transcribe videos directly from Google Drive URLs. Heads-up: Support for LinkedIn video downloads is also present in the codebase via a separate service. You’re welcome to try it now — but we’ll explore it in depth in Unit 2.

Overview

Here’s what you’ll accomplish in this unit: Extract Google Drive File ID from URLs Preview videos in-browser before downloading Download the video using curl Load and display the downloaded video for playback Transcribe the first 30 seconds of audio using Whisper

Understanding Google Drive URL Formats

Google Drive URLs typically follow one of two structures: Direct file path https://drive.google.com/file/d/{fileid}/view Open ID parameter https://drive.google.com/open?id={fileid} Both of these formats are supported by the application. The getDriveFileId() function checks for both patterns: TypeScriptfunction getDriveFileId(url) { // Match format: https://drive.google.com/file/d/FILEID/view const fileIdMatch = url.match(/\/file\/d\/([^/]+)/); // Match format: https://drive.google.com/open?id=FILEID const openIdMatch = url.match(/open\?id=([^&]+)/); return fileIdMatch?.[1] || openIdMatch?.[1] || null; } This approach ensures maximum compatibility with typical Google Drive sharing links.

Previewing the Video (before Download)

public/index.html HTML <div id="previewFrame" class="flex-grow w-full relative overflow-hidden"> <!-- iframe or video will be injected here --> </div> public/app.js TypeScriptfunction embedDriveVideo(fileId) { previewFrame.innerHTML = \` <div class="video-wrapper"> <iframe src="https://drive.google.com/file/d/\${fileId}/preview" frameborder="0" allow="autoplay" allowfullscreen> </iframe> </div> \`; } The embedded iframe provides users a preview of the Drive-hosted video before they download it.

Handling the Load Button (Client Side)

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Backend Route: /process-url

The /process-url endpoint acts as a gateway to downloading supported video types.

src/routes/processUrl.ts

TypeScript

router.post('/', async (req, res) => {
  const { url } = req.body;
  // If no URL is provided, return a 400 Bad Request
  if (!url) {
    return res.status(400).json({ error: 'Please provide a URL' });
  }

  try {
    let result;
    // Check if the URL is a Google Drive link
    if (url.includes('drive.google.com')) {
      // Download the video and extract metadata
      result = await downloadGoogleDriveVideo(url);
    } else {
      // Reject unsupported platforms
      return res.status(400).json({ error: 'Unsupported URL. Only Google Drive URLs are supported.' });
    }
    // Respond with filename and video duration
    res.json(result);
  } catch (err) {
    console.error('Download error:', err);
    res.status(500).json({ error: err.message || 'Failed to download video' });
  }
});

router.post('/', async (req, res) => {
  const { url } = req.body;
  // If no URL is provided, return a 400 Bad Request
  if (!url) {
    return res.status(400).json({ error: 'Please provide a URL' });
  }

  try {
    let result;
    // Check if the URL is a Google Drive link
    if (url.includes('drive.google.com')) {
      // Download the video and extract metadata
      result = await downloadGoogleDriveVideo(url);
    } else {
      // Reject unsupported platforms
      return res.status(400).json({ error: 'Unsupported URL. Only Google Drive URLs are supported.' });
    }
    // Respond with filename and video duration
    res.json(result);
  } catch (err) {
    console.error('Download error:', err);
    res.status(500).json({ error: err.message || 'Failed to download video' });
  }
});

This route handles the logic to detect the video platform and invokes the corresponding Google Drive download service. If the platform is unsupported, a 400 error is returned. It validates the input, determines the platform, and calls the appropriate service. In this lesson, only Drive links are supported — LinkedIn is covered later in Unit 2.

Note: The video download is not a separate manual step—the /process-url route immediately downloads the video as part of its internal flow. The downloadGoogleDriveVideo() function handles this behind the scenes and also extracts the video's duration so it’s ready for transcription later.

Implementing Google Drive Downloader

Overview

Understanding Google Drive URL Formats

Previewing the Video (before Download)

Handling the Load Button (Client Side)

Join the 1M+ learners on CodeSignal

Backend Route: /process-url

The Google Drive Video Download Service

Step 1: Extract the File ID from the URL

Step 2: Create a Download Folder and Generate File Paths

Step 3: Download the Video with curl

Step 4: Probe the Video to Get Duration

Playback in Native Player

Backend Route: /transcribe

Summary