Capacitor camera save image

[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

[Teodor]

In the result type option of the capacitor camera plugin you can select how should the image be returned - as a base64 encoded string, as data URL or as a path.
Isn’t the “path” option exactly what you need in your case?

[sylvainbaron]

Thanks Teodor for your answer.

I have 3 options: base64, dataUrl or Uri.

Next my PageFlow :

<script is="dmx-flow" id="flowPhoto" type="text/dmx-flow">{

Capacitor.Camera.getPhoto: {
width: “800px”,
quality: 90,
promptLabelCancel: “Annuler”,
promptLabelPhoto: “Depuis votre galerie photos”,
promptLabelPicture: “Prendre une photo”,
resultType: “dataUrl”,
source: “CAMERA”,
name: “photo”,
output: true
}
}

I can select path for for dmx-value.

<button id="btnPic" class="btn btn-outline-primary w-100" dmx-on:click="flowPhoto.run()">Ajoutez des photos</button>

                <img width="100" dmx-bind:src="flowPhoto.data.photo.path">

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

                <span>flowPhoto.data.photo.path: {{flowPhoto.data.photo.path}}</span>

What I expect is “just” uploading this picture or galery file using an input type=“file”, sending this file with a classical POST form.

I’m missing something …

[sylvainbaron]

OK,
I setted a button to launch the camera and save the file in gallery.
Then I display a thumbnail
Then user have to select the file from o dropzone input.
It would be great to be able to load the picture directly in the dropzone input…
Thanks to all