Appearance

Dropbox Store ​

File Information ​

  • Path: store/dropbox/index.js
  • Namespace: dropbox
  • Purpose: Manages Dropbox cloud storage integration state

Overview ​

The Dropbox Store manages state for the Dropbox cloud storage integration, including authentication tokens, file lists, upload status, and folder navigation. It handles the connection between the Admin Frontend and Dropbox API.

State ​

javascript
{
  authenticated: false,      // Authentication status
  accessToken: null,         // OAuth access token
  refreshToken: null,        // OAuth refresh token
  tokenExpiry: null,         // Token expiration time
  currentFolder: null,       // Current folder object
  folderPath: [],            // Breadcrumb folder path
  fileList: [],              // Current folder file list
  folders: [],               // Current folder subfolders
  files: [],                 // Current folder files
  loading: false,            // Loading state
  uploading: false,          // Upload state
  uploadProgress: 0,         // Upload progress percentage
  error: null,               // Error message
  selectedFiles: []          // Selected files for operations
}

Getters ​

isAuthenticated ​

Returns authentication status:

  • Checks if access token exists
  • Checks if token is not expired
  • Used for conditional rendering

Returns: Boolean

currentFolder ​

Returns current folder object:

  • Current folder being viewed
  • Contains folder metadata
  • Used for navigation

Returns: Folder object or null

fileList ​

Returns combined file and folder list:

  • Merges folders and files
  • Sorted for display
  • Used in file browser

Returns: Array of file/folder objects

uploadProgress ​

Returns upload progress:

  • Current upload progress percentage
  • Used for progress indicators

Returns: Number (0-100)

Mutations ​

SET_AUTHENTICATED ​

Sets authentication status:

  • Updates authenticated flag
  • Called after login/logout

Parameters:

  • status (Boolean): Authentication status

SET_TOKENS ​

Sets OAuth tokens:

  • Updates access token
  • Updates refresh token
  • Updates token expiry

Parameters:

  • tokens (Object): Token object with accessToken, refreshToken, expiry

SET_CURRENT_FOLDER ​

Sets current folder:

  • Updates current folder object
  • Resets file list
  • Used for navigation

Parameters:

  • folder (Object): Folder object

SET_FILE_LIST ​

Sets file list:

  • Updates folders array
  • Updates files array
  • Called after fetching folder contents

Parameters:

  • data (Object): Object with folders and files arrays

SET_LOADING ​

Sets loading state:

  • Updates loading flag
  • Used for loading indicators

Parameters:

  • loading (Boolean): Loading state

SET_UPLOADING ​

Sets upload state:

  • Updates uploading flag
  • Used for upload indicators

Parameters:

  • uploading (Boolean): Upload state

SET_UPLOAD_PROGRESS ​

Sets upload progress:

  • Updates progress percentage
  • Used for progress bars

Parameters:

  • progress (Number): Progress percentage (0-100)

SET_ERROR ​

Sets error message:

  • Updates error state
  • Clears on success

Parameters:

  • error (String|null): Error message

Actions ​

authenticate({ commit }, authCode) ​

Authenticates with Dropbox:

  • Exchanges auth code for tokens
  • Stores tokens in state
  • Updates authentication status

Parameters:

  • authCode (string): OAuth authorization code

Returns: Promise resolving to authentication result

refreshToken({ commit, state }) ​

Refreshes access token:

  • Uses refresh token to get new access token
  • Updates token in state
  • Called when token expires

Returns: Promise resolving to new tokens

fetchFolder({ commit }, folderPath) ​

Fetches folder contents:

  • Gets folders and files in folder
  • Updates file list
  • Updates current folder

Parameters:

  • folderPath (string): Folder path ('' for root)

Returns: Promise resolving to folder contents

uploadFile({ commit }, { file, folderPath }) ​

Uploads file to Dropbox:

  • Uploads file to specified folder
  • Tracks upload progress
  • Updates file list on completion

Parameters:

  • file (File): File object to upload
  • folderPath (string): Target folder path

Returns: Promise resolving to uploaded file

downloadFile({ commit }, filePath) ​

Downloads file from Dropbox:

  • Downloads file by path
  • Returns file blob
  • Handles errors

Parameters:

  • filePath (string): File path

Returns: Promise resolving to file blob

logout({ commit }) ​

Logs out from Dropbox:

  • Clears tokens
  • Resets state
  • Updates authentication status

Usage Examples ​

Authenticate ​

javascript
// In component
async handleDropboxAuth() {
  try {
    await this.$store.dispatch('dropbox/authenticate', authCode)
    this.$snackbar.success('Connected to Dropbox')
  } catch (error) {
    this.$snackbar.error('Failed to connect to Dropbox')
  }
}

Fetch Folder ​

javascript
// In component
async loadFolder(folderPath) {
  this.$store.commit('dropbox/SET_LOADING', true)
  try {
    await this.$store.dispatch('dropbox/fetchFolder', folderPath || '')
  } catch (error) {
    this.$store.commit('dropbox/SET_ERROR', error.message)
  } finally {
    this.$store.commit('dropbox/SET_LOADING', false)
  }
}

Upload File ​

javascript
// In component
async uploadToDropbox(file) {
  const folderPath = this.$store.getters['dropbox/currentFolder']?.path || ''
  try {
    await this.$store.dispatch('dropbox/uploadFile', {
      file,
      folderPath
    })
    this.$snackbar.success('File uploaded to Dropbox')
  } catch (error) {
    this.$snackbar.error('Upload failed')
  }
}

Integration Points ​

  • Dropbox API: Dropbox API integration
  • File Browser: Dropbox file browser component
  • Upload Components: File upload to Dropbox
  • Authentication: OAuth flow

Notes for Development ​

  • Store manages Dropbox integration state
  • OAuth tokens stored in state
  • File list updated on folder navigation
  • Upload progress tracked in state
  • Error handling for API failures
  • Uses Dropbox API v2