cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Want to learn some quick and useful tips to make your day easier? Check out how Calvin uses Replay to get feedback from other teams at Dropbox 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: 

filesUpload gives corrupted file

filesUpload gives corrupted file

Sega
New member | Level 2
Go to solution

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!

1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution

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)
})

View solution in original post

2 Replies 2

Greg-DB
Dropbox Staff
Go to solution

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)
})

Sega
New member | Level 2
Go to solution
That was it! Thanks!

Stupid that i just tried the two options and not the third option..
Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Sega New member | Level 2
  • User avatar
    Greg-DB Dropbox Staff
What do Dropbox user levels mean?