Send email with smtpJS

JavaScript
1

I have a project to finish and a little problem blocking me: I create an interface for the user to report bugs, his request is forwarded by a programm called smtpJS. But when he try to join file, they don’t send correctly.

The user upload their files with an classic input type file, but for send them I need to convert the files in base x64 under form of dataURI.

This is my code :

let allFilesConverted=[];
    let file;
    let reader;
    let fileName;
    let dataUri;
    for (let i =0;i<files.length;i++){
        file = files[i];
        file = files[i];
        reader = new FileReader();
        reader.onloadend = () => {
            fileName=file.name;
            dataUri=reader.result;
            allFilesConverted.push({name : fileName, data : dataUri})
        };
        reader.readAsDataURL(file);
    };

    Email.send({
      Host : "smtp.elasticemail.com",
      Username : "OBSEM.submitRequest@gmail.com",
      Password : "***********",
      To : 'obsem.reportbug@gmail.com',
      From : "OBSEM.submitRequest@gmail.com",
      Subject : "Request from "+pseudo.toUpperCase(),
      Body : `<p>Username : `+pseudo+`
      </br>Mail : `+mail+`
      </br>Sujet : `+sujet+`
      </br>Message : `+message+`
      </br>
      </br>END</p>`,
      Attachments : allFilesConverted
    });
    console.log(allFilesConverted);

The files are pick up like this : document.getElementById("inputFile").files.

The console log is correct and display the good list. However when I open the mail , there is no file and the presentaion is quite rude (no lines returns or font-size).

If anybody got the solution for one of these problem i’ll take it. I can show you the rest of my code if you want.

Thanks in advance ! (and sorry for my bad english !)

2

Did you take a look at this article regarding sending attachments with smtpjs?

3

Yes, i look and test his code but the result, was the same.

4

Finnaly after try and try i resolve my problem with the article that you advised me, i just had to convert the file when the user upload it and put the result in a global var. After that i just had to send all files converted. The code is :

<input type='file' accept="image/*,video/*,.pdf,.txt,.html,.js,.css,.odt,.odp,.odf,.docx" name='fichiersSupp' id="fileInput" onchange="convertFile()"/>

function convertFile(){
  var reader;
  var dataUri;
  var file = document.getElementById("fileInput").files[document.getElementById("fileInput").files.length-1];
    reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function () {
      dataUri = "data:" + file.type + ";base64," + btoa(reader.result);
    }
    reader.onloadend= function(){
      allConvertedFiles.push({name : file.name, data : dataUri});
    }
};

Email.send({
      Host : "smtp.elasticemail.com",
      Username : "OBSEM.submitRequest@gmail.com",
      Password : "*******",
      To : 'obsem.reportbug@gmail.com',
      From : "OBSEM.submitRequest@gmail.com",
      Subject : "Request from "+pseudo.toUpperCase(),
      Body : `bodyContent`,

      Attachments : allConvertedFiles
    });
    allConvertedFiles=[];

And, that’s it !

Thanks for your help !

5

I really hope you are not using this code on a website as the username and password would be visible in the client.

In the full code, where do you call convertFile?

6

It’s just a school project so i don’t need to hide username and pass.
I call the function in the event onchange of the input , it’s write at the top.

7

Bonjour Tikax,

merci pour ton post et désolé de le réveiller :wink:

J’essaye de faire un formulaire de contact sous REACT avec l’envoi de fichiers.

Je pense qu’il y a quelques chose que je n’ai pas compris dans tes lignes de codes.

Pourrais tu me partager le code complet de ton formulaire voir si je peux l’adapter a REACT, stp?

bien à toi