{"id":10807,"date":"2020-02-20T08:30:16","date_gmt":"2020-02-20T08:30:16","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=10807"},"modified":"2021-11-12T10:26:32","modified_gmt":"2021-11-12T10:26:32","slug":"sending-email-with-attachments-in-laravel-5-5-using-jquery","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/sending-email-with-attachments-in-laravel-5-5-using-jquery\/","title":{"rendered":"Sending Email with attachments in Laravel 5.5 using and PHP &#038; JQuery"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Introduction:<\/strong><\/h2>\n\n\n\n<p><strong>Hello Dear Reader,<\/strong><br>In this post, I am going to demonstrate detailed steps of how to send email to user&#8217;s email id with the files that were submitted by the user as an attachment<\/p>\n\n\n\n<p><strong>The complete working example code has been given in the code section <\/strong><br><strong>below<\/strong><br>Create all the files and then run command <strong><code>npm run dev<\/code><\/strong> in your project directory <strong>b<\/strong>efore testing<br><strong>Also, the explanation has been provided in the bottom section of the post<\/strong><br>Enjoy!<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Explanation:<\/strong><\/h2>\n\n\n\n<p><strong>Step 1:<\/strong><strong>E<\/strong>nable JQuery in your Laravel application<br>Enable JQuery in your Laravel application by adding below line of code in your blade file or the parent blade file:<br><strong><code>&lt;script src=\"{{ asset('js\/app.js') }}\"&gt;&lt;\/script&gt;<\/code><\/strong><\/p>\n\n\n\n<p>Refer  <a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-resources-views-layouts-app-blade-php\" target=\"_blank\" rel=\"noopener\"><strong>Laravel-Email-Project\\resources\\views\\layouts\\app.blade.php<\/strong><\/a><br><strong>NOTE:<\/strong> How you make sure, adding above line of code will enable JQuery?<br><strong>ANS:<\/strong> When you open resources\\assets\\js\\app.js file, you will see it requires .\/bootsrap.js file. Now open bootstrap.js file, you will see it has a require statement for importing JQuery. The line in bootstrap.js will look something like shown below:<br><strong><code>try {<br>         window.$ = window.jQuery = require('jquery');<br>     \/\/require('bootstrap-sass');     require('bootstrap'); } catch (e) {}<\/code><\/strong><\/p>\n\n\n\n<p><strong>Hence, <\/strong>the above code explains that app.js imports JQuery from the node modules folder and makes it available for all the blade file that uses app.js.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Create a form  <strong><a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-resources-views-pages-user-files-form-blade-php\" target=\"_blank\" rel=\"noopener\">Laravel-Email-Project\\resources\\views\\pages\\user-files-form.blade.php<\/a><\/strong>, that accepts one file or more than one files from the user. Make sure to have  <strong><code>enctype=\"multipart\/form-data\" <\/code><\/strong> in the form tag<br><br>Also, don&#8217;t forget to import  <a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-resources-assets-js-pages-user-files-script-js\" target=\"_blank\" rel=\"noopener\"><strong>Laravel-Email-Project\\resources\\assets\\js\\pages\\user-files-script.js<\/strong><\/a><\/p>\n\n\n\n<p><strong>Step 3:<\/strong> Create a Controller file that accepts the request with files: <a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-app-http-controllers-userfilesemailcontroller-php\" target=\"_blank\" rel=\"noopener\"><strong>Laravel-Email-Project\\app\\Http\\Controllers\\UserFilesEmailController.php<\/strong><\/a> <\/p>\n\n\n\n<p><strong>Step 4: <\/strong>Create a route in web.php<\/p>\n\n\n\n<p><strong>Step 5:<\/strong> Create  <strong><a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-app-notifications-mails-users-userfilesemail-php\" target=\"_blank\" rel=\"noopener\">Laravel-Email-Project\\app\\Notifications\\Mails\\Users\\UserFilesEmail.php<\/a><\/strong>, that will have code to form email and trigger the email with attachments<br><br><strong>Step 6:<\/strong> Create  <a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-resources-assets-js-pages-user-files-script-js\" target=\"_blank\" rel=\"noopener\"><strong>Laravel-Email-Project\\resources\\assets\\js\\pages\\user-files-script.js<\/strong><\/a> that will have jquery code to submit the form with files input<br><br><strong>Step 7:<\/strong> Create  <strong><a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-resources-views-notifications-mails-users-user-files-email-plain-blade-php\" target=\"_blank\" rel=\"noopener\">Laravel-Email-Project\\resources\\views\\notifications\\mails\\users\\user-files-email-plain.blade.php<\/a><\/strong>  that will have text version of the email template <br><br><strong>Step 8:<\/strong> Create  <a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-resources-views-notifications-mails-users-user-files-email-blade-php\" target=\"_blank\" rel=\"noopener\"><strong>Laravel-Email-Project\\resources\\views\\notifications\\mails\\users\\user-files-email.blade.php<\/strong><\/a>  that will have the template of the email body<br><br><strong>Step 9:<\/strong> Add the compilation &amp; migration of the  user-files-script.js from assets to public directory in  <a href=\"https:\/\/gist.github.com\/chetan-cotocus\/e51eedbbec8cc8d4336f264017cd4dcf#file-laravel-email-project-webpack-mix-js\" target=\"_blank\" rel=\"noopener\"><strong>Laravel-Email-Project\\webpack.mix.js<\/strong><\/a> file<br><br><strong>Step 10:<\/strong> Open git bash in the project directory and run command: <strong><code>npm run dev<\/code><\/strong><\/p>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_22088\"><iframe loading=\"lazy\"  id=\"_ytid_11077\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_22088\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Introduction: Hello Dear Reader,In this post, I am going to demonstrate detailed steps of how to send email to user&#8217;s email id with the files that were submitted by the&#8230; <\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5201],"tags":[],"class_list":["post-10807","post","type-post","status-publish","format-standard","hentry","category-laravel"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=10807"}],"version-history":[{"count":10,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10807\/revisions"}],"predecessor-version":[{"id":24937,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10807\/revisions\/24937"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=10807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=10807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=10807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}