Dropbox API in React js

[Tomasmv]

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.

[Greg-DB]

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]

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]

Link

[Greg-DB]

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]

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]

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 uploadUrl = 'https://content.dropboxapi.com/2/files/upload'; 

  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]

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]

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]

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.