Capacitor camera save image

[jmartland22]

I am wanting to save a image taken by the capacitor camera. I want to save this to sqlite and then sync it later with the main app.

I’m struggling to figure out how to save the mobile images and can’t find anything in the docs. Is there any docs covering this? Do I save this direct to the sqlite database or do I save to the users device and save the path? Do I save a base64 encoded, data url or path?

Any help would be greatly appreciated

[scalaris]

Did you get anywhere with this ?

[jmartland22]

Loosely… I managed to get it working locally. Not sure if it is the best way. I used the ‘Get Photo’ step and set the result to ‘DataUrl’. Then on the Sqlite insert I added the ‘DataURL’ of the inserted image to a text field. Then for the image source just use that field in the database. This displays the image.

I think at the moment (I could be wrong) the Sqlite actions are not running in sequence and are running all at once (not sure if it’s supposed to work this way). This was causing me issue’s so I had to split it up into separate Page Flows and run the next one when the first was ‘done’. Also noticed the options are missing completely from App Flows.

Not got up to syncing it back up yet to the main app. That’s a job for this weekend If you manage to get anywhere with it or have any ideas on how it should work could you let me know. I can’t see any documentation for it at all.

Thanks,

[scalaris]

Thanks. Any feedback would be great from your weekend’s endeavours @Adetoyinbo1

[Adetoyinbo1]

hi @jmartland22 you can create a file from the dataUrl then append that to the form you are trying to submit or add the file to an input. here is a sample code you can use use.

This is what i’m currently using to create an image file from base64 encoded and upload to the server.

     function dataURLtoFile(dataurl, filename) {

var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);

while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });}

then you can do something like

const imgFile =  dataURLtoFile(base64 encoded, "image.{ext}")
const dataTransfer = new DataTransfer();
dataTransfer.items.add(imgFile);

//this will add the file to your multiple files upload input
const fileInput = document.getElementById('yourImgInput');
fileInput.files = dataTransfer.files

The submit form.

You can read more here

How to convert Base64 String to javascript file object like as from file input form?

or just create a file from existing images then upload

Create a file object from an img tag

@scalaris thanks for tagging me to this

[jmartland22]

Thanks for this @Adetoyinbo1.

Going to give it a go

[George]

We will be adding soon the capacitor file system actions as flow actions so you will be able to capture the image and save it to file as well do other file actions.

[jmartland22]

Thanks George. Do you have ETA for this? Just deciding if I’m better off waiting for Wappler to do it natively.

[patrick]

You have the option to save the images taken by the camera to the gallery and you can store the web url in your database to the gallery image. If you don’t want to store the image in the gallery and store it in the database then save the base64 dataUrl, you can use the dataUrl directly on an image src attribute.

[jmartland22]

Thanks Patrick.

I’m just struggling the best way to get a image from the phone to the main app.

The phone app is working completely offline. Then there is a button to sync with the main app (images on the main app are in s3). Is this possible with wappler at the moment with no custom code? Which is the best format / workflow to save the image to be able to get the image from the local device to S3?

Any help would be greatly appreciated

[jmartland22]

Hi @Adetoyinbo1 . I am finally getting around to trying to send the images. Syncing everything else correctly took me a while to get my head around but this is now working.

Could I ask a few more questions about getting the dataURL to a image (with the end goal getting it S3). Could I pass the DataURL to the server then make the file on the server. I noticed this Base64URL decode. Do you know if this is something I could use or is this completely different. Really struggling to find any info on it.

I find it really difficult added in the custom code and am not sure were I would place the code you provided. I have tried to add it to my page put I couldn’t get it working.

Any help would be greatly appreciated
Thanks

[sylvainbaron]

Hi,
i’m trying to send through a POST form a capacitor camera image.
My Form is a item creation with several input + a picture i’ld like the customer be able to take a new picture.
I do not use SQLite.
How to do it?

[sylvainbaron]

Hello,
How did you succeed?
I can take a picture and display it in my post form (file input + several other inputs) but I don’t how to send it and register the file on my S3 directory as it should. I tried this:

<input id="text_photo" name="photo" type="file" class="form-control" dmx-bind:value="flowPhoto.data.photo.dataUrl">

But this does not work.
Any help appreciated.

Thanks

[jmartland22]

I used this extension Base64toFile - Custom Module - NodeJS . Converted the base64 string to a file and then saved it to s3 from there.

Hope this helps not at me computer at the moment to send screenshots.

[sylvainbaron]

Hi @jmartland22,
I installed the module and modified the UpperCase characters.
But since I have no idea how to use it.

• How should I set the 3 fields Name / base64string / Path?
• Where in my SC should I had this step? and how should I modify my ‘classical’ upload process?
  (Note: the Mail step was just a step to verify I can get data from submiting my post)

Thanks for your help.
Sylvain

[Teodor]

If you want to upload the photo, why not store it as a file instead of base64 with the camera plugin?

[jmartland22]

The way I got it to work not sure it’s the best way pretty sure it’s messy and long winded but it works…

Make a value and set this value to a splitting the full base64 encoded image on base64, .

By doing this you have split out the image part from the image type etc… Then pass this value to the base64string. From here save it and then you can upload to S3 after this.

[sylvainbaron]

What is the way to store it?
I just want to post a form including datas + 1 (or several) camera’s photo to my DB and S3 folder. I don’t know what is easiest/best practice?
(the capacitor camera tutorial just explain the take picture actions and options.)

[sylvainbaron]

How to do that from capacitor photo file?
thanks