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
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.