Page 1 of 4

sendgrid attachment

Posted: Wed Jan 07, 2015 6:09 pm
by Ken Cook

My app takes a picture with the camera and then stores the picture in an image object on the app page as well as in a local variable "photo_buffer". I then have some other fields to collect data. There is a Send button that emails the field data using sendgrid. I have all of this working.

I would like to add the photo_buffer contents as an attachment to the email and that's where I'm stuck. I am a vb developer so new to JS. I've searched this forum for quite some time and there are so many links and bits and pieces but no step by step, how to take that local variable and attach it to an email using sendgrid. Can you list out the steps please?

Thanks


sendgrid attachment

Posted: Thu Jan 08, 2015 12:27 am
by Ken Cook

Hi,

Did anyone see this? I just need help taking the contents of the photo_buffer variable and attaching it to the email being sent by the sendgrid plugin. I've got everything working except attaching the photo to the email. Please provide step by step instructions and not a link to another help topic.

Thanks


sendgrid attachment

Posted: Thu Jan 08, 2015 3:45 am
by Yurii Orishchuk

Hi Ken,

Here is solution how to send files via sendgrid as attachment:

  1. Create new REST service with following settings:

    1.1. Settings:
    http://prntscr.com/5m2r5s/direct (just leave url to sendgrid)

    1.2. Request:
    http://prntscr.com/5m2rix/direct
    http://prntscr.com/5m2rry/direct

    1.3. Use following code when you need to send Email:

    pre

    //Here you can specify needed fileContent.
    var fileContent = 'Hi';

    //where "testFileName.txt" is your attach file name.
    var fileName = 'ZZZ.txt';

    var blob = new Blob([fileContent], { type: "text/xml"});

    var formData = new FormData();
    formData.append("files[" + fileName + "]", blob);

    var body = {
    "subject": "subject 1",
    "text": "text 1",
    "from": "test@appery.io",
    "api_user": "apiuser",
    "api_key": "apikey",
    "to": "test@gmail.com"
    };

    for(var i in body)
    formData.append(i, body);

    sendWithProxy.execute({

    'body': {data: formData},

    });

    /pre

    Regards


sendgrid attachment

Posted: Thu Jan 08, 2015 11:02 pm
by Ken Cook

Thanks Yurii. I couldn't get the above to work but found that this did work:

  1. Add an image object to your app page and call it photopreview. Have camera button place pic in image object on your form.

  2. Make sure Before Send event camera service settings are data uri on Events pane of Data tab.

  3. Set up a local variable (storage tab of project/model and storage) called photo_buffer. Make it local storage type text.

  4. Update it after photo taken. For example, on Value Change event of a text box on your form, choose Set Storage Variable action, variable name to photo_buffer, bind to component checked, target component photopreview, property name asset.

  5. Follow the instructions here to set up custom service:

    http://blog.bismallion.com/sending-em...

  6. For those of you trying to send a camera picture, use the following code in the SendMailCustomerImp Javascript instead of the pieces of code in http://blog.bismallion.com/sending-em...:

    code start------------------------------------------------------------------------------

    Appery.SendMailCustom = Appery.createClass(null, {

    init : function(requestOptions) {
    this.__requestOptions = $.extend({}, requestOptions);
    },

    process : function(settings) {
    settings.beforeSend(settings);
    if (this.requestOptions.echo) {
    settings.success(this.requestOptions.echo);
    } else {
    //console.log('Default implementation is used. Please define your own.');

    //set up local variable called photo_buffer. Update it after photo taken

    //put reference to your page fields in var msg that you want to be in body of email
    var msg = 'here is my pic';

    //add email addresses, subject, and your sendgrid userid and pwd
    var fields = {

    "api_user": "your user id",
    "api_key": "your pwd",
    "to": "to email address",
    "toname": "name of To person",
    "subject": "test",
    "html": msg,
    "from": "from email address"

    };

    var formData = new FormData();
    for (var ii in fields) {
    formData.append(ii, fields[ii]);
    }

    var f =localStorage.getItem("photo_buffer");
    // Read file content first

    //call function to convert base64 to jpg
    var blob =dataURItoBlob(f);

    var fileName = 'mypic.jpg';

    // Read file name first
    formData.append("files[" + fileName + "]", blob);

    var request = new XMLHttpRequest();

    request.withCredentials = true;

    request.open("POST", "https://api.sendgrid.com/api/mail.sen...");
    request.setRequestHeader("Access-Control-Allow-Origin", "*");
    request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    request.send(formData);

    request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
    console.log('E-mail sent successfully');
    Apperyio('Message').text('E-mail sent');
    setTimeout(function(){Apperyio('status_label').text('Ready');},2000);
    }
    };

    Code: Select all

         settings.success({}); 
     } 
     settings.complete('success'); 
     alert ('Email sent!'); 

}

});

function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
code end-------------------------------------------------------------------------------------

  1. Add custom service to app page on Data tab and call it Send.

  2. On the button that sends the email on your app page, add JS to click event:

    send.execute({});

    Hope this helps...


sendgrid attachment

Posted: Fri Jan 09, 2015 8:57 am
by Ihor Didevych

Thanks for your update.


sendgrid attachment

Posted: Sun Jan 11, 2015 2:25 pm
by Hi4All

Hello Ke Cook,

I tried your approach, but It is loading loading without any chance to work.

Please advise..

Thank you


sendgrid attachment

Posted: Sun Jan 11, 2015 2:36 pm
by Alena Prykhodko

First try to debug your app http://devcenter.appery.io/documentat...


sendgrid attachment

Posted: Sun Jan 11, 2015 3:17 pm
by Hi4All

I'm debugging and get the following error,

the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400

I hope somebody can help!?

thank you


sendgrid attachment

Posted: Mon Jan 12, 2015 4:23 am
by Yurii Orishchuk

Hello,

Provided by Ken solution could work only on device.

Do you test it on device as install binary app?

Regards.


sendgrid attachment

Posted: Mon Jan 12, 2015 6:00 am
by Hi4All

Just now I've tested with the APK, but didn't receive any email.

Did anyone guys test the suggested solution and work with him?

Regards,