# Dropbox Migration - Quick Setup Summary

## ✅ What Was Done

All file uploads in the application now use Dropbox instead of storing images directly in MongoDB. This includes:

1. **Website Submissions** - Website screenshots
2. **Directory Submissions** - Company logos and screenshots
3. **AI Website Submissions** - Website screenshots
4. **Job Postings** - Company logos
5. **Profile Settings** - User profile photos

## 🔧 Files Modified

### New Files Created:
- `Backend/utils/dropboxService.js` - Dropbox upload utility service
- `Backend/DROPBOX_INTEGRATION_GUIDE.md` - Complete documentation

### Files Updated:
- `Backend/.env` - Added DROPBOX_ACCESS_TOKEN variable
- `Backend/package.json` - Added dropbox dependency
- `Backend/routes/website.route.js` - Updated to use Dropbox
- `Backend/routes/submitDirectory.js` - Updated to use Dropbox
- `Backend/routes/submitAiWebsite.js` - Updated to use Dropbox
- `Backend/routes/postJob.js` - Updated to use Dropbox
- `Backend/routes/settingProfile.js` - Updated to use Dropbox

## 🚀 Setup Instructions (REQUIRED)

### Step 1: Get Dropbox Access Token

1. Go to https://www.dropbox.com/developers/apps
2. Click "Create app"
3. Select:
   - API: **Scoped access**
   - Access type: **Full Dropbox**
   - App name: `CSSAwards-FileStorage` (or your choice)
4. Click "Create app"
5. Go to **Permissions** tab:
   - Enable: `files.content.write`
   - Enable: `files.content.read`
   - Enable: `sharing.write`
   - Enable: `sharing.read`
   - Click "Submit"
6. Go to **Settings** tab
7. Scroll to "OAuth 2" section
8. Click "Generate" under "Generated access token"
9. **Copy the token** (starts with `sl.`)

### Step 2: Update .env File

Open `Backend/.env` and replace the placeholder:

```env
DROPBOX_ACCESS_TOKEN=YOUR_DROPBOX_ACCESS_TOKEN_HERE
```

Replace `YOUR_DROPBOX_ACCESS_TOKEN_HERE` with your actual token from Step 1.

### Step 3: Test the Setup

Start your backend server:

```bash
cd Backend
npm start
```

Try uploading a file through any of the submission forms to verify it works.

## 📊 Benefits

### Before (MongoDB Storage):
- Large base64 strings stored in database (~50KB-500KB per image)
- Slow database queries
- High database costs
- Database size grows rapidly

### After (Dropbox Storage):
- Only URLs stored in database (~80 bytes per image)
- Fast database queries
- Lower database costs
- Scalable file storage
- CDN-backed file delivery

## 📁 Folder Structure in Dropbox

Files are organized in:
- `/website-submissions/` - Website screenshots
- `/directory-submissions/` - Directory screenshots and logos
- `/ai-website-submissions/` - AI website screenshots
- `/job-postings/` - Job posting company logos
- `/profile-photos/` - User profile pictures

## 🔍 How to Verify It's Working

1. Submit a new website/directory/job/profile
2. Check the MongoDB document - the image field should contain a Dropbox URL like:
   ```
   https://www.dropbox.com/s/abc123/filename.jpg?raw=1
   ```
3. Visit the URL - you should see the image
4. Check your Dropbox - files should appear in the appropriate folder

## ⚠️ Important Notes

1. **Environment Variable Required**: The app will not work without setting `DROPBOX_ACCESS_TOKEN` in `.env`
2. **No Schema Changes**: Database schemas remain the same (String type for image fields)
3. **Frontend Compatible**: No frontend changes required - it still sends base64 images
4. **Backward Compatible**: Existing URLs in database will continue to work

## 🛠️ Troubleshooting

### "Access token is required" error:
- Make sure you added `DROPBOX_ACCESS_TOKEN` to `.env`
- Restart your server after updating `.env`

### "Failed to upload file" error:
- Verify your Dropbox token has the correct permissions
- Check your Dropbox storage space

### Files not appearing in Dropbox:
- Files are in `/Apps/YourAppName/` folder if you selected "App folder" access

## 📚 Documentation

For detailed information, see:
- **DROPBOX_INTEGRATION_GUIDE.md** - Complete implementation guide
- **dropboxService.js** - Commented service code

## 🔄 Migration of Existing Data

If you have existing images stored as base64 in MongoDB, you'll need to migrate them. See the "Migration from MongoDB Storage" section in DROPBOX_INTEGRATION_GUIDE.md for a migration script example.

## ✨ Next Steps

1. ✅ Get your Dropbox access token
2. ✅ Update the `.env` file
3. ✅ Restart your backend server
4. ✅ Test file uploads
5. ✅ Monitor the Dropbox folder
6. ✅ Consider migrating existing images (optional)

## 📧 Support

If you encounter any issues:
1. Check the detailed guide: `DROPBOX_INTEGRATION_GUIDE.md`
2. Review console logs for error messages
3. Verify environment variables are set correctly
4. Check Dropbox API documentation: https://www.dropbox.com/developers/documentation

---

**Status**: ✅ Implementation Complete - Setup Required
**Date**: November 12, 2025
**Dependencies**: dropbox npm package (already installed)