Attach Files to Mandrill Message with Browse Button

Question

I'm not sure whether this is even possible, but I'm trying to attach a file to an outgoing email with the Mandrill API from the file upload button (input type="file"). To be honest, I'm not entirely sure what document.getElementById('idOfFileInput').value actually returns. I know that this is not the place to ask a novice question like that, but I've looked everywhere and I can't find it (I know one of you will be sly and point me to some article within five minutes). That aside, though, I've gotten a .txt file to attach with the message C:\fakepath\test.txt, which I know to be the file path that the browser gives for security. Maybe it's better asked in code:

Button:

Attachment(s):&nbsp;&nbsp;<input type="file" id="file">

JS:

"attachments": [
        {
            "type": "text/*",
            "name": "file_attachment",
            "content": document.getElementById('file').value
        }
    ],

I'm sorry if this is a simple question disguised by its context, but even if it is, I have a feeling that this question could be a good future reference because I've been trying things for a week and looking for some type of solution, but I haven't been able to find one. Any ideas?

Answer 1

If you wanted to attach a file, you could look at AJAX file Upload

The Mandrill API requires a base64 encoded string of the file, so if you can upload the file you can easily make the server return a base64 encoded string for you to use in the API..

There are lots of plugins that will upload files over ajax and if you're using a JavaScript library like jQuery you can look at jQuery File Upload

If you're using PHP for instance:

$result = array();
$result['status'] = 'error';
if(isset($_FILES["mandrill_attachment"]))
{
    $base64 = base64_encode(file_get_contents($_FILES["mandrill_attachment"]["tmp_name"]));
    $result['base64'] = $base64;
    $result['status'] = 'ok';
}

die(json_encode($result));

I've kept that short for the example, but you should check the file types etc, not just assuming it's an OK file

and the JS

var mandrill_attachment = false;

$(".attachment").uploadFile({
    url: "upload.php",
    dragDrop:false,
    multiple:false,
    autoSubmit:true,
    fileName: "mandrill_attachment",    
    returnType:"json",
    onSuccess:function(files,data,xhr)
    {
        if( data.status == 'ok' )
        {
            mandrill_attachment = data.base64;
        } else {
            alert('something went wrong...');
        }
    }
});

Answer 2

I've looked at this extensively, and it appears that it's impossible to use file upload input with the Mandrill API for attachments. A server is required to do anything with a file type="input" because of the security restrictions that have been put into place by browsers.

I've been able to get around this by using the Ink File Picker API to place a secure download link at the bottom of the email to a file, but this looks a little fishy. It it would obviously be better to do it natively, but, as I've said, that appears to be impossible.

This compromise, however, is in some ways better than the native way: the Ink API allows users to upload from a variety of services, along with the classic file upload, which improves both the extensibility and the ease of use of the file upload mechanism.

Using a link for attachments still looks suspicious, but I've been able to minimize the spamminess of the method by using the file name (which the API gives you access to):

[file name] (hyperlinked to direct download link) was attached to this email.