Hey there! I see you're trying to upload MP4 videos to a specific Dropbox location via Angular/MEAN stack and get a playable link for your website—great goal! The Dropbox Saver API didn't work for you because it's designed to let users save files to their own Dropbox accounts, and it doesn't expose a way to retrieve a publicly playable link. Let's fix this with the Dropbox API v2 instead, which gives you full control over file uploads and shared links.

First: Prep Your Dropbox App #

Before writing code, you need to set up a Dropbox developer app:

• Go to the Dropbox Developer Console and create a new app. Choose "Scoped access" and pick either "App folder" (for isolated storage) or "Full Dropbox" (if you need access to specific existing folders).
• Generate an access token (for testing; in production, use OAuth 2.0 to avoid hardcoding tokens).
• Enable these permissions for your app: files.content.write (to upload files) and files.metadata.read (to manage file links).

Option 1: Angular Frontend Implementation #

We'll use the official Dropbox JavaScript SDK to handle uploads and link generation directly in Angular.

Step 1: Install the SDK #

Run this in your Angular project:

npm install dropbox

Step 2: Create a Dropbox Service #

Make a reusable service to handle uploads and link generation (src/app/dropbox.service.ts):

import { Injectable } from '@angular/core';
import { Dropbox } from 'dropbox';

@Injectable({ providedIn: 'root' })
export class DropboxService {
  private dbx: Dropbox;

  constructor() {
    // ⚠️ Production note: Use OAuth 2.0 flow to get tokens, don't hardcode!
    this.dbx = new Dropbox({ accessToken: 'YOUR_TEST_ACCESS_TOKEN' });
  }

  async uploadVideo(file: File, targetDropboxPath: string): Promise<string> {
    try {
      // Upload the video to your target Dropbox path
      const uploadResult = await this.dbx.filesUpload({
        path: targetDropboxPath,
        contents: file,
        mode: 'overwrite' // Use 'add' if you want to avoid overwrites
      });

      // Create a public shared link for the video
      const sharedLinkResult = await this.dbx.sharingCreateSharedLinkWithSettings({
        path: uploadResult.result.path_lower,
        settings: {
          requested_visibility: 'public',
          allow_download: false // Optional: Block downloads if needed
        }
      });

      // Convert Dropbox's default link to a direct playable URL
      const dropboxLink = sharedLinkResult.result.url;
      return dropboxLink.replace('www.dropbox.com', 'dl.dropboxusercontent.com').replace('?dl=0', '');
    } catch (error) {
      console.error('Upload/link generation failed:', error);
      throw error;
    }
  }
}

Step 3: Use the Service in a Component #

Create an upload component to let users select and upload videos (src/app/video-upload/video-upload.component.ts):

import { Component } from '@angular/core';
import { DropboxService } from '../dropbox.service';

@Component({
  selector: 'app-video-upload',
  template: `
    <input type="file" accept="video/mp4" (change)="onFileSelected($event)">
    <button (click)="uploadVideo()" [disabled]="!selectedFile">Upload Video</button>
    
    <div *ngIf="playableLink">
      <h3>Playable Video:</h3>
      <video [src]="playableLink" controls width="600"></video>
      <p>Direct Link: <a [href]="playableLink" target="_blank">{{ playableLink }}</a></p>
    </div>
  `
})
export class VideoUploadComponent {
  selectedFile: File | null = null;
  playableLink: string | null = null;

  constructor(private dropboxService: DropboxService) {}

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedFile = input.files[0];
    }
  }

  async uploadVideo(): Promise<void> {
    if (!this.selectedFile) return;
    try {
      // Define your target Dropbox path (e.g., '/my-app-videos/summer-vacation.mp4')
      this.playableLink = await this.dropboxService.uploadVideo(
        this.selectedFile,
        `/my-app-videos/${this.selectedFile.name}`
      );
    } catch (error) {
      alert('Upload failed—please try again!');
    }
  }
}

Option 2: MEAN Stack (Backend Proxy) #

For production, it's safer to handle Dropbox API calls via a Node.js/Express backend (to avoid exposing your access token in frontend code).

Step 1: Backend Setup #

Install dependencies in your Node.js project:

npm install express multer dropbox cors

Step 2: Create an Upload Route #

Write an Express route to handle file uploads and Dropbox interactions (server/routes/dropbox.js):

const express = require('express');
const multer = require('multer');
const { Dropbox } = require('dropbox');
const cors = require('cors');
const router = express.Router();

// Enable CORS for your Angular frontend
router.use(cors({ origin: 'http://localhost:4200' }));

// Configure multer to store files in memory (for direct upload to Dropbox)
const storage = multer.memoryStorage();
const upload = multer({ storage });

// Initialize Dropbox client
const dbx = new Dropbox({ accessToken: 'YOUR_PRODUCTION_ACCESS_TOKEN' });

router.post('/upload-video', upload.single('video'), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: 'No video file selected' });
    }

    // Upload to Dropbox
    const uploadResult = await dbx.filesUpload({
      path: `/my-app-videos/${req.file.originalname}`,
      contents: req.file.buffer,
      mode: 'overwrite'
    });

    // Generate shared link
    const sharedLinkResult = await dbx.sharingCreateSharedLinkWithSettings({
      path: uploadResult.result.path_lower,
      settings: {
        requested_visibility: 'public',
        allow_download: false
      }
    });

    // Convert to playable link
    const playableLink = sharedLinkResult.result.url
      .replace('www.dropbox.com', 'dl.dropboxusercontent.com')
      .replace('?dl=0', '');

    res.json({ success: true, playableLink });
  } catch (error) {
    console.error('Backend upload failed:', error);
    res.status(500).json({ error: 'Upload failed' });
  }
});

module.exports = router;

Step 3: Update Angular Service to Call Backend #

Modify your Angular service to use the backend API instead of direct Dropbox calls (src/app/dropbox.service.ts):

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DropboxService {
  constructor(private http: HttpClient) {}

  uploadVideo(file: File): Promise<string> {
    const formData = new FormData();
    formData.append('video', file);

    return this.http.post<{ playableLink: string }>('http://localhost:3000/api/upload-video', formData)
      .toPromise()
      .then(response => response.playableLink)
      .catch(error => {
        console.error('Upload failed:', error);
        throw error;
      });
  }
}

Key Notes for Production #

• OAuth 2.0: Never hardcode access tokens in frontend code. Use Dropbox's OAuth flow to let users grant access to their Dropbox (or use a server-side token for your app's own Dropbox storage).
• Large Files: For videos over 150MB, use Dropbox's chunked upload API (filesUploadSessionStart, filesUploadSessionAppendV2, filesUploadSessionFinish) to avoid timeouts.
• Video Compatibility: Ensure your MP4 uses H.264 video and AAC audio (browser-supported codecs) for smooth playback.
• Link Permissions: If you don't want public links, use password-protected shared links or restrict access to specific users—just note that embedded playback may require authentication in that case.

内容的提问来源于stack exchange，提问作者Viral Patel