I have an iFrame with embedded HTML that activates the device camera and allows the user to take a picture. The filename of the new image should then be passed back to the site and the dataset updated with the value.
I’m adamant this was working about 6 weeks ago but now it captures the images but does not update the dataset and the console messages don’t appear. (Help)
Wix Code is:
$w.onReady( function () {
$w(“#htmlcamera”).onMessage((event) => {
console.log(“Camera Event Start”);
let receivedData = event.data;
let dateTime = new Date();
$w(“#dataset1”).setFieldValue(“timeStamp”, dateTime);
$w(“#dataset1”).setFieldValue(“new_image”, receivedData);
$w(“#dataset1”).save();
console.log("Camera Event Saved " + receivedData);
});
}
If the console messages aren’t displayed then most likely the message being sent from the HtmlComponent to the page isn’t being received. Make sure that the onMesssage property of the HtmlComponent is connected to the messsage handler:
I hope this helps,
Yisrael
OK so that was not set, I assume this is a code base change. I’ve added the event handler and modified my code as follows but the console is still not updated in preview mode and the Dataset is not updated either (obviously). Is there something else I’m missing? I assume I can use the " export function htmlcamera_message" event this way.
export function htmlcamera_message(event, $w) {
console.log(“Camera Event Start”);
let receivedData = event.data;
let dateTime = new Date();
$w(“#dataset1”).setFieldValue(“timeStamp”, dateTime);
$w(“#dataset1”).setFieldValue(“new_image”, receivedData);
$w(“#dataset1”).save();
console.log("Camera Event Saved " + receivedData);
}
Sorry, didn’t realize that you assign a message handler in the page’s onReady() function.
I can only surmise that for some reason the message is not being sent, or not being sent correctly, from the code in the HtmlComponent.
Please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.
Hi,
I played around with your site to see if messages were being sent. I wasn’t able to get it to trigger the Capture_complete() function. To test the messaging, I changed the button to:
<input type="button" button id="btnCapture" value="Capture New" onclick="Capture_complete()" />
And, I modified the Capture_complete() function to only send a message:
function Capture_complete() {
console.log("capture");
window.parent.postMessage("hello", "*");
}
Clicking the button worked fine and the message was sent.
It seems that the problem is with your HTML code in the HtmlComponent. You will have to test the functioning of the code to see where it is failing.
You can use console.log() statements which will show the results in the browser’s Javascript console.
Good luck,
Yisrael
Well, I figured it out. I changed to the onChange event and had to rename my function, not sure if it was the _ it didn’t like but when I made it CC() it all started working.
For the sake of others who might have this issue, here’s what works:
– Function attached to the onMessage event of an HTML object on my form:
export function htmlcamera_message(event, $w) {
let receivedData = event.data;
let dateTime = new Date();
$w(“#dataset1”).setFieldValue(“timeStamp”, dateTime);
$w(“#dataset1”).setFieldValue(“new_image”, receivedData);
$w(“#dataset1”).save();
}
– Code that goes in the HTML object to draw a button and return the results:
#btnCapture {
background-color: #566FB8;
color: white;
border: none;
height: 100px;
width: 100px;
padding: 10px 20px;
text-align: center;
font-family: 'Arial';
border-radius: 18px;
}
.label {
font-family: 'Arial';
}
.input {
font-size: 24px;
}
<script type="text/javascript">
// send message to the page code
function CC() {
var input = document.querySelector('input[type=file]');
input.onchange = function () {
var file = input.files[0];
window.parent.postMessage(file.name, "*");
}
}
</script>
OK, so back the truck up … the code works in the sandbox but after publishing it does not update the live data. Anyone got any clues why that might be?
OK, fixed it, had to remove the onchange line from the code.
Hi braden432 I am in need of some support in understanding how to access the camera from a mac book, you seem to be able to capture an image from a user device but having looked at your code and trying to use it, it doesnt seem to work on my device at present, do you happen to have or know how to capture an image and show it on the user screen?
I did everything here but this is not working for me. The file gets created/passed as only image.jpeg. The string without the actual image! If i print it in console.log, the strng “image.jpeg” gets printed. So In the dataset there is an error for mismatch of field type since the string ‘image.jpgy’ is being put there instead of url. If i use Sendgrid or something to send the file even base64 etc. the actual string ‘image.jpg’ gets sent. The problem is that the wix or entire document url isn’t available from the above code but just the string.
Even if you go to the end-user url mentioned above from ioS his site does not seem to be able to do anything with the image.
Anyway to resolve this?
