Dropbox Link Organizer

A modern React application for efficiently organizing and copying Dropbox links into structured folders. The app automatically extracts Dropbox links from text, allows assignment of target folders, and copies files directly to your Dropbox account.

✨ Features

• Automatic Link Detection: Extracts Dropbox links from any text
• Smart Folder Management: Displays existing Dropbox folders and allows creation of new folders
• Batch Processing: Copies multiple files simultaneously with progress display
• Modern UI: Beautiful, responsive interface with Shadcn/UI and Tailwind CSS
• Secure Authentication: Uses Dropbox OAuth for secure access
• Local Storage: Safely remembers your access token in the browser

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Dropbox account

Installation

1. Clone repository

   git clone https://github.com/ArifKobel/Dropbox-bulk-import
   cd dropbox-bulk-import

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open browser

   http://localhost:3000
   

Dropbox Setup

1. Register app with Dropbox

   • Go to Dropbox App Console
   • Create a new app with "Scoped access"
   • Add the following permissions:
     • files.metadata.read
     • files.content.write
     • files.content.read

2. Generate access token

   • In your Dropbox app: Settings → OAuth 2 → Generated access token
   • Copy the generated token

3. Enter token in the app

   • Open the app in your browser
   • Paste your access token

📖 Usage

1. Parse links

Paste text containing Dropbox links. The app automatically detects all valid Dropbox URLs.

Example text:

Here are my files:
https://www.dropbox.com/scl/fi/example1/document.pdf?rlkey=abc123
https://www.dropbox.com/scl/fi/example2/image.jpg?rlkey=def456

2. Assign folders

• Choose a global target folder for all files
• Or assign individual folders for specific files
• The app displays all existing Dropbox folders

3. Copy files

• Start the copy process
• Track progress in real-time
• View detailed results for each file

🛠️ Technology Stack

• Frontend: React 19, TypeScript
• Routing: TanStack Router
• UI: Shadcn/UI, Tailwind CSS, Lucide Icons
• Dropbox Integration: Dropbox JavaScript SDK
• Build Tool: Vite
• Testing: Vitest

📁 Project Structure

src/
├── components/ui/          # Shadcn UI components
├── context/                # React Context for Dropbox Auth
├── routes/                 # TanStack Router routes
│   ├── __root.tsx         # Layout and Provider
│   └── index.tsx          # Main page
├── lib/                   # Utilities
└── main.tsx              # App Entry Point

🧪 Tests

npm run test

🔨 Build for Production

npm run build
npm run serve

🔧 Development

Add new UI components

pnpx shadcn@latest add [component-name]

Add new routes

Create new files in src/routes/ - TanStack Router generates routes automatically.

🤝 Contributing

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⚠️ Security Notes

• Never store your Dropbox access token in code
• Only use the app with trusted Dropbox links
• The access token is securely stored in local browser storage

🆘 Support

For issues or questions:

1. Check the browser console for errors
2. Ensure your Dropbox token is valid
3. Verify Dropbox app permissions

---

Note: This app is not officially supported by Dropbox and uses the Dropbox API at your own risk.