File Upload and Email Trigger through Bootstrap Modal Window

Question

File Upload and Email Trigger through Bootstrap Modal Window

I'm currently working on a modal window that includes a file upload feature. Within this modal, there is a button labeled "send to email." I'm looking for guidance on how to create a function that will successfully send the uploaded file to an email address.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="file-loading">
          <input id="input-b9" name="input-b9[]" multiple type="file">
        </div>
        <div id="kartik-file-errors"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send to email</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
    $("#input-b9").fileinput({
        showPreview: false,
        showUpload: false,
        elErrorContainer: '#kartik-file-errors',
        allowedFileExtensions: ["pdf", "doc", "docx"]
        //uploadUrl: '/site/file-upload-single'
    });
});
</script>

https://codepen.io/PineappleBros/pen/KKoENrN

javascript ajax

Answer 1

Answer №1

As mentioned by @icecub, sending emails directly from client-side JS is not possible. Instead:

Integrate a <form> element into your modal (preferably with

enctype="multipart/form-data"

and

action="path/to/backend/script"

When the "send to email" button is clicked or the form is submitted, gather the values of the <form> in a FormData object. The simplest way is to pass the complete <form> element into the FormData constructor:

formEl.addEventListener('submit', (e) => {
  e.preventDefault(); // <-- prevent browser from reloading on form submission
  fetch(e.target.action, // <-- points to backend script
        {
          // ... elided ...
          body: new FormData(e.target) // <-- create FormData object from <form>
          // ... elided ...
        }
  ).then(
     // ... elided ...
  );
});

Send the FormData object via
```
XMLHttpRequest/Fetch/whatever-you-use
```
to a backend script (which could be PHP, Python, NodeJS, Ruby, etc.)
The backend script should read the FormData, then assemble and send an email
Return a success or failure message to the client (using JSON/XML/whatever-you-prefer)

Answer 2

As mentioned by @icecub, sending emails directly from client-side JS is not possible. Instead:

Integrate a <form> element into your modal (preferably with

enctype="multipart/form-data"

and

action="path/to/backend/script"

When the "send to email" button is clicked or the form is submitted, gather the values of the <form> in a FormData object. The simplest way is to pass the complete <form> element into the FormData constructor:

formEl.addEventListener('submit', (e) => {
  e.preventDefault(); // <-- prevent browser from reloading on form submission
  fetch(e.target.action, // <-- points to backend script
        {
          // ... elided ...
          body: new FormData(e.target) // <-- create FormData object from <form>
          // ... elided ...
        }
  ).then(
     // ... elided ...
  );
});

Send the FormData object via
```
XMLHttpRequest/Fetch/whatever-you-use
```
to a backend script (which could be PHP, Python, NodeJS, Ruby, etc.)
The backend script should read the FormData, then assemble and send an email
Return a success or failure message to the client (using JSON/XML/whatever-you-prefer)

File Upload and Email Trigger through Bootstrap Modal Window

Answer №1

Similar questions

Identifying AJAX scripts within JavaScript content

Using AJAX to retrieve model objects

I'm feeling stuck trying to iterate through this array, especially when the console keeps saying it's actually an object

responding with a value of undefined for the get request

Verify authenticity through JavaScript

ajax rendering in Ruby on Rails

Sometimes the AngularJS scope is refreshed only intermittently

What is the best way to confirm only one click per browser?

Developing a TypeScript NodeJS module

Guide on Generating a Response Object in Node.js/Express

Tips for utilizing the chosen characteristic to display the selected choice in a dynamic table dropdown menu

Executing a WebMethod in C# codebehind without the need for a server form on the ASPX page

Is it possible to manipulate the carousel image within the div element?

Failing to establish a state on schedule

Tips for utilizing FileReader in a synchronous manner within the context of react/redux

Is there a way to send an ajax post request when the nextpage button is clicked on jqgrid in order to fetch a fresh batch of data

What purpose does the dollar sign symbol serve in the JavaScript programming language?

Tips for positioning buttons in a row below dynamic text using Bootstrap 3

Exploring the possibilities of PhoneGap, leveraging the power of jQuery getJSON

Retrieving information within a Vue component