Upload Base64 Image to Attach Image Field

ERPNext
1

Hello!

I am having an error regarding a Base64 data uri of image. The image successfully attach as you can see on image below:

image
image1364×584 56.7 KB

But getting an error on the Attach Image field.

If I am correct, is it not possible to use Base64 data as Attach Image? If yes, how can i make it possible (if there is a way to do it).

Thanks in advance! :grinning:

JHE

1 Like
2

Any thought about this? :grinning::grinning::grinning:

Thanks! :grinning::grinning::grinning:

3

Image too large! Try uploading instead? :relaxed:

4

@achillesrasquinha,

I am uploading the image via image field. It was successfully attach but it doesn’t save on the image field.

5

Hmm. I guess there’s a char limit to that field. Hence it wasn’t reflecting there. I’d still suggest you to upload instead. There’s always a limit to that field.

6

Sad :disappointed:. I am uploading an image using base64 data uri as a link. I am integrating webcam app on my custom app and the captured image i get using webcam was a base64 string data uri.

7

Hmm, sounds nice. Just so you know, there’s frappe.ui.Capture that returns a data URI.

const capture = new frappe.ui.Capture()
capture.open()
capture.submit((data) => {
     // do stuff.
})
2 Likes
8

Was that function uses a webcam to capture image too?

9

Yes. It does.

10

Waaaaaa :grimacing:. I didn’t know that function exist!

Wait, let me try that.

Thanks for the Information @achillesrasquinha! :+1::grinning:

11

In case you’re in production mode:
erpnext 10.0.22
frappe 10.0.23

const capture = new frappe.ui.Capture()
capture.open()
capture.click((data) => {
     // do stuff.
})
12

@magic-overflow,

Hmmmm …im in version
Erpnext v10.0.19
Frappe v10.0.20

13

My server is running production mode (master branch)
erpnext 10.0.22
frappe 10.0.23

capture.submit is only available in develop branch.

You can try capture.click, I guess it will work.

1 Like
14

Frappe has everything :wink:

1 Like
15

@achillesrasquinha,

Haha :grin:, Yeah! Im happy making a Custom App using Frappe though im just getting started :smile: and need to know more about Frappe :smiley:

16

Thanks @achillesrasquinha and @magic-overflow for your help! :smiley:

I am able to use the Capture function of frappe now! :smiley:

2 Likes
17

Hi,
I used the same code but its working on my local not on production. Getting this error in rendering.

Uncaught TypeError: Cannot read property ‘getUserMedia’ of undefined
at frappe.ui.Capture.render (capture.js:57)
at frappe.ui.Capture.show (capture.js:113)
at capture_photo (guest_registration__js:40)
at Object.r [as capture_photo] (script_manager.js:22)
at eval (guest_registration__js:12)
at HTMLButtonElement.a (page.js:576)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.r.handle (jquery.min.js:3)
render @ capture.js:57
show @ capture.js:113
capture_photo @ guest_registration__js:40
r @ script_manager.js:22
eval @ guest_registration__js:12
a @ page.js:576
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3