cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Share your feedback on the Document Scanning Experience in the Dropbox App right here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Dropbox API in React js

Dropbox API in React js

Tomasmv
Explorer | Level 3

Hi. I am trying to integrate the Javascript API in my React.js project but it is really a headache to integrate because the documentation is not enough, I would need to know how to integrate Dropbox in my React.js project because Dropbox seems to me the best option for this. Thanks.

9 Replies 9

Greg-DB
Dropbox Staff

We don't have resources for React in particular, but for integrating with the Dropbox API from JavaScript, we recommend using the official Dropbox JavaScript SDK. You can find documentation and examples for that there.

 

Otherwise, if that SDK doesn't work for your use case, you can use the HTTPS endpoints directly (or otherwise use a third party library).

 

If you have any specific questions or issues regarding the official Dropbox SDK or the Dropbox API itself, please feel free to post them and we'll be happy to help however we can.

Tomasmv
Explorer | Level 3

This is my Github repository, I can't run the functionality to download and upload files via HTTP. I would appreciate a help thanks.

Tomasmv
Explorer | Level 3

Greg-DB
Dropbox Staff

Dropbox does not provide code review or debugging services, but we can help with any specific questions or issues you have regarding the Dropbox API if you provide the details.

 

For example, if you need help with some particular issue on the Dropbox API, reply here with the details of the issue:

  • the name and version number of the platform and SDK/library you are using, if any
  • the steps to reproduce the issue, including relevant specific code line(s)/snippet(s), but don't include any access or refresh token(s)
  • the full text of any error or unexpected output from the Dropbox API

 

Tomasmv
Explorer | Level 3

Hi! This is the error I have using the functionality of uploading a file to my folder path.

 

C:\wamp64\www\ApiDropbox\server.js:81
'path': `/Apps/CsvFileTomas/${file.name}`,  //Path in Dropbox where the file will be saved
^

TypeError: Cannot read properties of undefined (reading 'name')
at C:\wamp64\www\ApiDropbox\server.js:81:50
at Layer.handle [as handle_request] (C:\wamp64\www\node_modules\express\lib\router\layer.js:95:5)
at next (C:\wamp64\www\node_modules\express\lib\router\route.js:144:13)
at done (C:\wamp64\www\node_modules\multer\lib\make-middleware.js:45:7)
at indicateDone (C:\wamp64\www\node_modules\multer\lib\make-middleware.js:49:68)
at C:\wamp64\www\node_modules\multer\lib\make-middleware.js:155:11
at WriteStream.<anonymous> (C:\wamp64\www\node_modules\multer\storage\disk.js:43:9)
at WriteStream.emit (node:events:539:35)
at finish (node:internal/streams/writable:754:10)
at finishMaybe (node:internal/streams/writable:739:9)

 

Tomasmv
Explorer | Level 3
This is the complete function for uploading the file I am using:
 
app.post('/upload', upload.single('file'), async (req, res) => {
  const accessToken = 'MyToken'
  const file = req.files
 
  // Request to upload the file to Dropbox
  const headers = {
    'Authorization': `Bearer ${accessToken}`,
    'Dropbox-API-Arg': JSON.stringify({
      'path': `/Apps/CsvFileTomas/${file.name}`
      'mode': 'add', /
    }),
    'Content-Type': 'application/octet-stream', // 
  };

 

  try {
    // Realiza la solicitud POST para subir el archivo a Dropbox
    const response = await axios.post(uploadUrl, file.data, { headers });
    res.send('Archivo subido exitosamente.');
  } catch (error) {
    console.error(error);
    res.status(500).send('Error al subir el archivo a Dropbox.');
  }
});

Greg-DB
Dropbox Staff

Thanks for following up with the additional information. I see you're getting an error:

TypeError: Cannot read properties of undefined (reading 'name')

That's not an error from the Dropbox API itself, but rather an error indicating that your 'file' variable is undefined. You'll need to debug your code to determine why that variable is undefined and how to fix it.

Tomasmv
Explorer | Level 3

I also tried with the official SDK and I can't even download a file because the system gives an error, even though I followed the steps. Very little information and examples to integrate Dropbox, leaves much to be desired.

Greg-DB
Dropbox Staff

Thanks for the feedback!

 

If you'd like to share the details of that issue with the Dropbox SDK, such as the code/steps to reproduce the issue and the full error/output you're getting, we'll be happy to take a look.

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
  • User avatar
    Tomasmv Explorer | Level 3
What do Dropbox user levels mean?