Cannot read property 'name' of null in Sending email with attachments in SMTPJS

Question

This the HTML form code

<form method="POST"  class="comment-form" >
                            
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Name: " name="name"  required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Email address: " name="email" required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Your Phone: " name="phone"  required/>
    </div>
    <div class="form-group  col-md-10">
        <textarea rows="8" class="form-control" placeholder="Message.." name="comment" required></textarea>
    </div>
    <div class="form-group  col-md-10">
        <input type="file" id="fileupload" name="fileupload" value="upload" />
    </div>
    <div class="form-submit col col-md-12">
        <input type="button" class="btn btn-primary" value="Send Mail" onclick="SendMail()">                              
    </div>
</form>

JavaScript code for file attachment which I borrow from https://www.codegrepper.com/code-examples/javascript/smtpjs+attachment '

  <script>
    function uploadFileToServer()
    {
        var input = document.querySelector("form")
        **var file = event.srcElement.files[0].name;** ->error
        var reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function () {
            var dataUri = "data:" + file.type + ";base64," + btoa(reader.result);
           Email.send({
                Host : "smtp.gmail.com",
                Username : "........@gmail.com",
                Password : ".......",
                From: input.elements["email"].value,
                To : '..........com',
               Subject : "Send with base64 attachment",
               Body : input.elements["comment"].value + "<br>" + 
               input.elements["name"].value + file.name,
               Attachments : [
                  {
                      name : file.name,
                      data : dataUri
                  }]
           }).then(message => alert(message) );
       };
       reader.onerror = function() {
           console.log('there are some problems');
       };
    }
 </script>

The problem is once I click the button I will get the error in my console

Uncaught TypeError: Cannot read property '0' of null

score 0 · Answer 1 · answered Apr 05 '21 at 07:49

0

It means event.srcElement.files is null. Your example is not self-contained so not sure if I can help you more than that. Event.srcElement is deprecated in favor of Event.target

answered Apr 05 '21 at 07:49

Allan Wind

23,068
5
28
38

score 0 · Answer 2 · answered Apr 21 '21 at 23:13

You are accessing the file through event.srcElement.files, but it doesn't look like your function actually takes the event as an argument. I'm taking a cue from this example in the MDN docs which uses the this context of the event handler to access the input. Our handler will be on the form submission rather than the input itself, so this is the form and this.elements["fileupload"] is the input. You could access it with document.querySelector or document.getElementById and it would be the same.

// create listener for form onsubmit
function uploadFileToServer() {
  const file = this.elements["fileupload"]?.files?.[0];
  if (!file) {
    console.error("no file selected");
    return;
  }
  const reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = function () {
    const dataUri = "data:" + file.type + ";base64," + btoa(reader.result);
    Email.send({
      Host: "smtp.gmail.com",
      Username: "........@gmail.com",
      Password: ".......",
      From: this.elements["email"].value,
      To: "..........com",
      Subject: "Send with base64 attachment",
      Body:
        this.elements["comment"].value +
        "<br>" +
        this.elements["name"].value +
        file.name,
      Attachments: [
        {
          name: file.name,
          data: dataUri
        }
      ]
    }).then((message) => alert(message));
  };
  reader.onerror = function () {
    console.log("there are some problems");
  };
}

// gets the first form element with class="comment-form" -- unique id is better
const form = document.querySelector("form.comment-form");

// attach listener to the form
form.addEventListener("submit", uploadFileToServer);

<script src="https://smtpjs.com/v3/smtp.js"></script>

<form method="POST" class="comment-form" >
                            
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Name: " name="name"  required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Email address: " name="email" required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Your Phone: " name="phone"  required/>
    </div>
    <div class="form-group  col-md-10">
        <textarea rows="8" class="form-control" placeholder="Message.." name="comment" required></textarea>
    </div>
    <div class="form-group  col-md-10">
        <input type="file" id="fileupload" name="fileupload" value="upload" required />
    </div>
    <div class="form-submit col col-md-12">
        <input type="submit" class="btn btn-primary" value="Send Mail">                              
    </div>
</form>

Cannot read property 'name' of null in Sending email with attachments in SMTPJS

2 Answers2