Need to see if your shared folder is taking up space on your dropbox 👨‍💻? Find out how to check here.

Forum Discussion

Tomasmv's avatar
Tomasmv
Explorer | Level 3
3 years ago

Dropbox API in React js

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 ...
Greg-DB's avatar
Greg-DB
Icon for Dropbox Community Moderator rankDropbox Community Moderator
3 years ago

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's avatar
Tomasmv
Explorer | Level 3
3 years ago

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's avatar
    Tomasmv
    Explorer | Level 3
    3 years ago
    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's avatar
    Greg-DB
    Icon for Dropbox Community Moderator rankDropbox Community Moderator
    3 years ago

    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's avatar
      Tomasmv
      Explorer | Level 3
      3 years ago

      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's avatar
        Greg-DB
        Icon for Dropbox Community Moderator rankDropbox Community Moderator
        3 years ago

        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.

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.

The Dropbox Community team is active from Monday to Friday. We try to respond to you as soon as we can, usually within 2 hours.

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X, Facebook or Instagram.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!