the files I upload with the api arrive corrupted

[bbroscheit]

Hello, my name is Bernardo, I am wanting to implement the Dropbox API to a support system. I use the example that dropbox gives on github to upload files, in my code it works but when I enter the dropbox folder the file is uploaded corrupted and it does not allow me to open or download it, I attach my code, I hope you can help me

const postTicket = async (state, worker, subject, detail, answer, userresolved, user, files) => {

    // console.log("file", files)

    // console.log("body", state, worker, subject, detail, answer, userresolved, user)

    try {

        // Creo el ticket vacio para tener el ID que le va a dar nombre a la carpeta

        const ticketId = (await Ticket.create()).id;

        const folderName = `ticket_${ticketId}`;

        // Ruta donde se guardan los archivos en la carpeta "documents", pero ver donde lo guardamos cuando estemos en produccion

        const documentsFolderPath = path.join(DEST_FILES);

        const folderPath = path.join(__dirname, '../../../../public', folderName);

        // Crear la carpeta si no existe

        if (!fs.existsSync(folderPath)) {

            fs.mkdirSync(folderPath);

        }

        // Mueve todos los archivos con el prefijo "new_" desde la carpeta "uploads" a la carpeta del ticket

        const uploadFolderPath = path.join(__dirname, '../../../../public/uploads');

        const filesWithPrefix = fs.readdirSync(uploadFolderPath).filter(file => file.startsWith('new_'));

        const filesArray = [];

        for (const filename of filesWithPrefix) {

            const sourcePath = path.join(uploadFolderPath, filename);

            const destinationPath = path.join('/', filename);

            // Mover el archivo a la carpeta específica del ticket

            await saveInDropbox(files, sourcePath, destinationPath);

            const sharedLink = await getSharedLink(destinationPath);

            filesArray.push(sharedLink);

        }

        // Actualiza el registro en la base de datos

        let setTicket = await Ticket.findByPk(ticketId)

        if(user){

            let setUser = await User.findOne({

                where:{username: user}

            })

            if(setUser){

                await setTicket.setUser();

                await setTicket.setUser(setUser);

            }

        }

        const newTicket =  await setTicket.update({

            state : state,

            worker : worker,

            subject : subject,

            detail : detail,

            answer : answer,

            files: filesArray,

            userresolved: userresolved

        })

        return newTicket

    } catch (e) {

        console.log("Error en controller postTicket", e.message);

        throw e;

    }

};

module.exports = postTicket;

and the function for uploads

const { Dropbox } = require("dropbox");

const fs = require("fs");

const path = require("path");

const saveInDropbox = async (files, sourcePath, destinationPath) => {

  console.log(

    "sourcePath",

    sourcePath,

    "destinationPath",

    destinationPath,

    "file",

    files

  );

  // const UPLOAD_FILE_SIZE_LIMIT = 150 * 1024 * 1024;

  let ACCESS_TOKEN = "x";

  let dbx = new Dropbox({ accessToken: ACCESS_TOKEN });

  try {

    files.map((e) => {

      dbx

        .filesUpload({ path: "/" + e.filename, contents: e , autorename: true })

        .then(function (response) {

          console.log("respuesta de dropbox", response);

        })

        .catch((error) => console.log("error en dropbox", error.message));

    });

  } catch (error) {

    console.log("resolver", error.message);

  }

  return false;

};

module.exports = saveInDropbox;

[Greg-DB · Accepted solution]

When uploading files to Dropbox via the Dropbox API, Dropbox will save whatever data you supply, so you'll need to make sure you're sending the exact correct data you want saved. In your code, I see you're calling the filesUpload method to upload the file. When doing so, you supply the data you want to upload in the 'contents' parameter.

In your code, you're sending the contents of the 'e' variable to that 'contents' parameter. You'll need to make sure that the data you're sending there is exactly and only the data for the file you're uploading. The 'e' variable in your code comes from the .map on your 'files' variable, but the code doesn't show where/how the 'files' variable is defined. You'll need to debug and update your code accordingly to make sure you pass in just the desired file data. (For instance, based on the other 'e.filename' usage of the 'e' variable, it looks like 'e' probably doesn't contain just the file data, but rather is an object containing some properties.)

[bbroscheit]

Thanks for the response, and sorry for my English but I'm using a translator.
In the end I was able to solve it yesterday, in the "saveInDropbox" function I am sending an object as a contents parameter to the filesUpload function but I had to treat it as a binary file, I added these lines to the code to the try statement

try {

        const content = fs.readFileSync(e.path);

        dbx

          .filesUpload({ path: "/" + e.filename, contents: content })

          .then(function (response) {

            console.log(response);

          })

          .catch(function (error) {

            console.error(error.error || error);

          });

      } catch (error) {

        console.error("Error reading file:", error);

      }

and it worked, Now the only thing left to solve is the issue that the token only lasts 3 hours, but I saw that there is a tutorial for that

[Greg-DB]

Yes, Dropbox issues short-lived access tokens (and optional refresh tokens) instead of long-lived access tokens. Apps can still get long-term access by requesting "offline" access though, in which case the app receives a "refresh token" that can be used to retrieve new short-lived access tokens as needed, without further manual user intervention. Refresh tokens do not expire automatically and can be used repeatedly. You can find more information in the OAuth Guide and authorization documentation. There's a basic outline of processing this flow in this blog post which may serve as a useful example.
 
For examples of implementing this with the Dropbox JavaScript SDK, please refer to the examples included in the "examples" folder in the SDK. As long as you supply the necessary credentials, for instance, set the app key (a.k.a. client ID) and refresh token, like shown in this example for the JavaScript SDK, the SDK will actually handle refresh process for you automatically. (Note that the app secret is also required if the app does not use PKCE.) The SDK will automatically catch expired access token errors and call the API to get a new short-lived access token when needed.