filesUpload gives corrupted file

Question

Hello,

I'm want to use the Dropbox API/SDK in one of my projects. I have to convert a base64 string I'm getting from my webcam as a screenshot into a real image and then upload it to Dropbox. (I'm more a Designer than a coder, so if I mismatch something - sorry for that.)

Following the code I'm currently using:

const base64File = this.webcam.getScreenshot()
const dbx = new Dropbox({ accessToken: this.state.dropboxToken })
const i = base64File.indexOf('base64,')
const buffer = Buffer.from(base64File.slice(i + 7), 'base64')
const name = 'test.png'
const file = new File(buffer, name, { type: 'image/png'})
dbx.filesUpload({path: '/' + file.name, contents: file})
.then(function (response) {
    console.log(response)
})
.catch(function (error) {
    console.error('dropbox error', error)
})

Right now, I'm getting a .png file with 1.2 MByte size but I can't open it.

If I'm using "file.buffer" in "contents" in the filesUpload function I'm getting a zero size file.

I'm glad for every help I can get. Thanks!

Greg-DB · Accepted Answer

I believe you should just supply the buffer directly, so all you need to do is:

const base64File = this.webcam.getScreenshot()
const dbx = new Dropbox({ accessToken: this.state.dropboxToken })
const i = base64File.indexOf('base64,')
const buffer = Buffer.from(base64File.slice(i + 7), 'base64')
const name = 'test.png'

dbx.filesUpload({path: '/' + name, contents: buffer})
.then(function (response) {
    console.log(response)
})
.catch(function (error) {
    console.error('dropbox error', error)
})