Sending mail via POST works - but how to do it with an attached image?

[Carlos Pinto]

Ok, after several tries i am more and more loving appery.io !
What i was searching for, was a form that can be send per mail.
It works perfect with the jQuery POST solution like this:
precode
var handrailNickname = $("#uploadHandrail_handrailNickname").val();
var lengthEntry = $("#uploadHandrail_lengthEntry").val();
var lengthRail = $("#uploadHandrail_lengthRail").val();

var dataString = "";
dataString += 'userName=' + handrailNickname;
dataString += '&lengthEntry=' + lengthEntry;
dataString += '&lengthRail=' + lengthRail;
//alert (dataString);return false;

$.ajax({
type: "POST",
url: "http://www.mydomain.com/upload.php",
data: dataString,
success: function() {
alert("sent");
}
});
return false;
/code/pre

the upload.php fetches the POST and within a second i receive
a mail with the above mentioned inputs entered.

My question now is:
How can i attach a photo to that form?
I have a button that invokes a camera service.
The photo taken is inserted into an image element.

I think that the image element somehow is called canvas, so i see it but now
i do know know how to attach that canvas or image to my form upload.

Thanks for your time and support!
Carlos

[Maryna Brodina]

Hello! Please check this post https://getsatisfaction.com/apperyio/...

[Carlos Pinto]

Thanks Maryna, i have read and already commented on that link a few days ago. What i see there, is that you answered that it is not possible with appery.io. What i am wondering is, if there is no way to make the image attached to the form or at least the created "canvas" converted into pieces and sent that way.

Am i right that in my example, the canvas holds the image that is saved somewhere on the phone.
Is there no way to tell the form where that file resides?

thanks in advance for your time!
Carlos

[Kateryna Grynko]

Hi Carlos,

No, you can upload it to Database first, and then send a link.

[Carlos Pinto]

Thanks Katya,
but won't that "overfill" your databases?
Is there absolutely no way to convert the file into some kind of bits and
pieces, maybe through an other API so that it can be attached?
I am not a JS nor PHP master, but i am thinking about something like
a GD library or so.

Sorry for me being so dumb, at the moment i am loving appery.io but also
trying out an other cloud based system. With latter the upload works, but
the engine is not as nice as appery.io's

big greetings and thanks a lot for your support,
Carlos

[Kateryna Grynko]

Carlos,

You can map this file to a localStorage variable and then send it as a text. But it's not the best solution, because this is for storing strings, not files.

[Carlos Pinto]

Thank you very much Katya.
I finally found my solution and definitely will stick to appery.io - your product
is absolutely fantastic. For all the others, here is my solution:

1. I made a simple form and add a CAMERA SERVICE to it.
   You can check the official appery.io tutorial on how to archive to take
   a photo and show it on the screen.

2. i made a hidden textarea field where i mapped the encoded image data to.

3. With the code below i send the data via AJAX:
   pre
   code
   //alert (dataString);return false;
   $.ajax({
   type: "POST",
   url: "http://www.mydomain.com/upload.php",
   data: dataString,
   success: function() {
   alert("sent");

   }
   });
   return false;
   /code
   /pre

4. On the server side you put the following code inside a PHP file. What
   the code does is simply this: it gets the textarea data, which includes the
   image header information. with the substr tag, we remove the headers.
   Then all the whitespaces are substituted with a plus sign and as last
   the file is decoded.
   With $newname i generate a filename generated by the actual timestamp
   and that file is then uploaded to the uploads folder
   pre
   code
   $photoPreview = $_POST["txtPhotoData"];
   $filteredData=substr($photoPreview, strpos($photoPreview, ",")+1);
   $filteredData = str_replace(' ','+',$filteredData);
   $decoded=base64_decode($filteredData);

   Code: Select all

    $newname = time().".jpg&quot 
    $full_local_path = 'uploads/'.$newname; 
    file_put_contents($full_local_path,$decoded); 

/code
/pre

PLEASE BE AWARE!
This is a rough solution for uploading a file to your server and should only be
handled as something you use only if there is no other way.

I hope that this helped you out.
Now i am going to subscribe to appery.io

[Maryna Brodina]

Hello! Thank you for sharing your solution!

[She]

Hi Team,
Im trying to do this but the image is always returned empty:

is there anything wrong with this solution?

Thanks,

[Egor Kotov6832188]

Hello She,

This can mean that you are not sending binary part of file, the actual content of it.