{"id":5610,"date":"2024-05-08T11:59:02","date_gmt":"2024-05-08T11:59:02","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=5610"},"modified":"2024-05-08T12:00:53","modified_gmt":"2024-05-08T12:00:53","slug":"create-web-form-with-drag-and-drop-file-upload-using-javascript-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/","title":{"rendered":"Create Web Form with Drag and Drop File Upload using JavaScript and PHP"},"content":{"rendered":"<p>The web form is a commonly used element in each website. In some cases, the user is allowed to select files with the input data so that the files are attached to the form data. Mostly the default HTML file input interface is used to select and upload files. But if you want to make web form UI more effective, <a href=\"https:\/\/www.codexworld.com\/drag-and-drop-file-upload-using-dropzone-php\/\">drag and drop file upload<\/a> feature can be used. The drag-and-drop feature provides an advanced file upload interface on the web page. The user can drag the files from the local drive and drop them into the DOM element. In this tutorial, we will show you how to create web form with drag &#038; drop file upload and submit form data with multiple files using JavaScript.<\/p>\n<p>DropzoneJS library provides an effective solution to integrate drag and drop file upload feature in HTML with JavaScript. In this example script, we <b>integrate drag-and-drop file upload<\/b> in web form using JavaScript and upload multiple attachment files with form data with PHP.<\/p>\n<p>The following steps will be followed to implement the <b>drag and drop file upload with form data<\/b> submission using JavaScript and PHP.<\/p>\n<ul>\n<li>Create an HTML form with input elements.<\/li>\n<li>Define a droppable element to select multiple files from the computer.<\/li>\n<li>Combine form data with files and submit to the server-side script using JavaScript.<\/li>\n<li>Upload multiple files and insert form data in the database using PHP.<\/li>\n<\/ul>\n<p>Before getting started, take a look at the file structure of drag &#038; drop file upload with form data using JavaScript and PHP.<\/p>\n<pre class=\"file-struc\">web_form_with_drag_drop_file_upload<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 submit.php\r\n\u251c\u2500\u2500 uploads<span style=\"color:#794938\">\/<\/span>\r\n\u2514\u2500\u2500 js<span style=\"color:#794938\">\/<\/span>\r\n    \u251c\u2500\u2500 dropzone.min.js\r\n    \u2514\u2500\u2500 dropzone.min.css\r\n<\/pre>\n<h2>Create Database Table<\/h2>\n<p>To store the form data and file info, a table is required in the database. The following SQL creates a <code>form_data<\/code> table with some required fields in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`form_data`<\/span> (\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`email`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`attachments`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">255<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COMMENT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'Files names in comma separated string'<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`submitted_on`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Database Configuration (dbConfig.php)<\/h2>\n<p>The dbConfig.php file is used to connect and select the database using PHP and MySQL. Specify the database host (<code>$dbHost<\/code>), username (<code>$dbUsername<\/code>), password (<code>$dbPassword<\/code>), and name (<code>$dbName<\/code>) as per your database credentials.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration <br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld_db\"<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;database&nbsp;connection <br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;connection <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Connection&nbsp;failed:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>} <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Web Form with Drag and Drop File Upload (index.html)<\/h2>\n<p>Include the DropzoneJS library files to enable the drag and drop file upload functionality.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/dropzone\/dropzone.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/dropzone\/dropzone.min.css\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\/css\"<\/span> \/&gt;<\/span><\/pre>\n<p>Create an HTML form with <code>enctype=\"multipart\/form-data\"<\/code>.<\/p>\n<ul>\n<li>Define an input elements and dropzone element where the drag&#038;drop file upload feature will be attached.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"wrapper\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Status message --&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"statusMsg\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- File upload form --&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"col-lg-12\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fupForm\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"multipart\/form-data\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"name\"<\/span>&gt;<\/span>Name:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"name\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter name\"<\/span> \/&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span>&gt;<\/span>Email:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter email\"<\/span> \/&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span>&gt;<\/span>Attachments:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- drag&amp;drop upload section --&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"dropzone\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"dz-message\"<\/span>&gt;<\/span>\r\n                        Drag and drop files here or click to select.\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            \r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submitBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p>The following JavaScript code is used to attach the drag and drop file upload feature to the webform and process the form submission with multiple files.<\/p>\n<ul>\n<li>Initialize the Dropzone object and define configuration options.<\/li>\n<li>Disable auto queue process in Dropzone.<\/li>\n<li>Start Dropzone queue process on button click.<\/li>\n<li>Use <code>sendingmultiple<\/code> method with the FormData object to combine form data with files.<\/li>\n<li>Use <code>successmultiple<\/code> method to get the response from the server-side script and display the form submission status.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/Disabling autoDiscover<\/span>\r\nDropzone.autoDiscover = <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Dropzone has been added as a global variable.<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> myDropzone = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> Dropzone(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".dropzone\"<\/span>, {\r\n    url: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"submit.php\"<\/span>,\r\n    paramName: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"file\"<\/span>,\r\n    autoProcessQueue: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n    addRemoveLinks: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    uploadMultiple: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    maxFilesize: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">2<\/span>,\r\n    maxFiles: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>,\r\n    parallelUploads: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">10<\/span>,\r\n    acceptedFiles: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"image\/*,application\/pdf,.doc,.docx\"<\/span>,\r\n\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ The setting up of the dropzone<\/span>\r\n    init: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> myDropzone = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>;\r\n\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ First change the button to actually tell Dropzone to process the queue.<\/span>\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/this.element.querySelector(\"#submitBtn\").addEventListener(\"click\", function(e) {<\/span>\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#submitBtn\"<\/span>).addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>) <\/span>{\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Make sure that the form isn't actually being sent.<\/span>\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (myDropzone.getQueuedFiles().length &gt; <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>) {                        \r\n                myDropzone.processQueue();  \r\n            } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n                <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> blob = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> Blob();\r\n                blob.upload = { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'chunked'<\/span>: myDropzone.options.chunking };\r\n                myDropzone.uploadFile(blob);\r\n            } \r\n        });\r\n\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead<\/span>\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ of the sending event because uploadMultiple is set to true.<\/span>\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"sendingmultiple\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">file, xhr, formData<\/span>) <\/span>{\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Gets triggered when the form is actually being sent.<\/span>\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Hide the success button or the complete form.<\/span>\r\n            formData.append(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"name\"<\/span>, <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"name\"<\/span>).value);\r\n            formData.append(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"email\"<\/span>, <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"email\"<\/span>).value);\r\n            formData.append(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"submit\"<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>);\r\n        });\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"successmultiple\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">files, response<\/span>) <\/span>{\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Gets triggered when the files have successfully been sent.<\/span>\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Redirect user or notify of success.<\/span>\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> response_jsn = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.parse(response);\r\n\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(response_jsn.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>){\r\n                <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fupForm\"<\/span>).reset();\r\n                myDropzone.removeAllFiles(<span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>); \r\n                <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#statusMsg'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p class=\"alert alert-success\"&gt;'<\/span>+response_jsn.message+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;'<\/span>;\r\n            }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n                <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#statusMsg'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p class=\"alert alert-danger\"&gt;'<\/span>+response_jsn.message+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;'<\/span>;\r\n            }\r\n            \r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Auto-hide alert message<\/span>\r\n            setTimeout(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n                <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.alert'<\/span>).remove();\r\n            }, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">5000<\/span>);\r\n        });\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"errormultiple\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">files, response<\/span>) <\/span>{\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Gets triggered when there was an error sending the files.<\/span>\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Maybe show form again, and notify user of error<\/span>\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#statusMsg'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p class=\"alert alert-danger\"&gt;'<\/span>+response+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;'<\/span>;\r\n        });\r\n    }\r\n});<\/span>    \r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Upload Multiple Files and Insert Form Data (submit.php)<\/h2>\n<p>The following code handles the multiple file upload and form data submission functionality.<\/p>\n<ul>\n<li>Retrieve the form field data using the <b>PHP $_POST<\/b> method.<\/li>\n<li>Retrieve the multiple files data using the <b>PHP $_FILES<\/b> method.<\/li>\n<li>Validate input fields to check whether the mandatory fields are empty.<\/li>\n<li>Validate email address using FILTER_VALIDATE_EMAIL in PHP.<\/li>\n<li>Check the file extension to allow certain file formats (Image, PDF, and MS Word) to upload.<\/li>\n<li>Upload files to the server using <b>PHP move_uploaded_file()<\/b> function.<\/li>\n<li>Insert web form data and file names in the database using PHP &#038; MySQL.<\/li>\n<li>Return response to the successmultiple callback of the dropzone class.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;the&nbsp;database&nbsp;config&nbsp;file&nbsp; <br \/><\/span><span style=\"color: #007700\">include_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">;&nbsp; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;folder <br \/><\/span><span style=\"color: #0000BB\">$uploadDir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Allowed&nbsp;file&nbsp;types <br \/><\/span><span style=\"color: #0000BB\">$allowTypes&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(<\/span><span style=\"color: #DD0000\">'pdf'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'doc'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'docx'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'jpg'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'png'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'jpeg'<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Default&nbsp;response <br \/><\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'message'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Form&nbsp;submission&nbsp;failed,&nbsp;please&nbsp;try&nbsp;again.' <br \/><\/span><span style=\"color: #007700\">); <br \/> <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;form&nbsp;is&nbsp;submitted <br \/><\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'submit'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;the&nbsp;submitted&nbsp;form&nbsp;data <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">]; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;submitted&nbsp;data&nbsp;is&nbsp;not&nbsp;empty <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(empty(<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;Please&nbsp;enter&nbsp;your&nbsp;name.'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">)&nbsp;||&nbsp;<\/span><span style=\"color: #0000BB\">filter_var<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">FILTER_VALIDATE_EMAIL<\/span><span style=\"color: #007700\">)&nbsp;===&nbsp;<\/span><span style=\"color: #0000BB\">false<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valErr&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;Please&nbsp;enter&nbsp;a&nbsp;valid&nbsp;email.'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Process&nbsp;input&nbsp;data&nbsp;and&nbsp;file&nbsp;upload <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(empty(<\/span><span style=\"color: #0000BB\">$valErr<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileNames&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">array_filter<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Upload&nbsp;multiple&nbsp;files <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFile&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$fileNames<\/span><span style=\"color: #007700\">)){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]&nbsp;as&nbsp;<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">=&gt;<\/span><span style=\"color: #0000BB\">$val<\/span><span style=\"color: #007700\">){&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Set&nbsp;file&nbsp;upload&nbsp;path <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileName&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">basename<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">]);&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$uploadDir&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;file&nbsp;data&nbsp;is&nbsp;valid <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">$fileName&nbsp;<\/span><span style=\"color: #007700\">!=&nbsp;<\/span><span style=\"color: #DD0000\">'blob'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;the&nbsp;selected&nbsp;file&nbsp;type&nbsp;is&nbsp;allowed&nbsp;to&nbsp;upload <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileType&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">pathinfo<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">PATHINFO_EXTENSION<\/span><span style=\"color: #007700\">);&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$fileType<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$allowTypes<\/span><span style=\"color: #007700\">)){&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Upload&nbsp;file&nbsp;to&nbsp;server&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"tmp_name\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">)){&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFile&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Sorry,&nbsp;there&nbsp;was&nbsp;an&nbsp;error&nbsp;uploading&nbsp;your&nbsp;file.'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Sorry,&nbsp;only&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">implode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'\/'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$allowTypes<\/span><span style=\"color: #007700\">).<\/span><span style=\"color: #DD0000\">'&nbsp;files&nbsp;are&nbsp;allowed&nbsp;to&nbsp;upload.'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFileStr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$uploadedFile<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #007700\">);&nbsp; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;form&nbsp;data&nbsp;in&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sqlQ&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;form_data&nbsp;(name,email,attachments,submitted_on)&nbsp;VALUES&nbsp;(?,?,?,NOW())\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">prepare<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sqlQ<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">bind_param<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"sss\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFileStr<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">execute<\/span><span style=\"color: #007700\">(); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$insert<\/span><span style=\"color: #007700\">){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Form&nbsp;data&nbsp;and&nbsp;attachment&nbsp;files&nbsp;are&nbsp;submitted&nbsp;successfully!'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;fill&nbsp;all&nbsp;the&nbsp;mandatory&nbsp;fields!'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$valErr<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Return&nbsp;response <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/php-contact-form-with-google-recaptcha\/\">PHP Contact Form with Google reCAPTCHA<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>This example code helps you to build a web form with drag-and-drop file upload in the website using JavaScript. You can allow the user to upload multiple files and submit attachments with input form data. The drag&#038;drop file upload and form submission functionality is handled without page refresh using JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The web form is a commonly used element in each website. In some cases, the user is allowed to select files with the input data so that the files are attached to the form data. <\/p>\n","protected":false},"author":1,"featured_media":5612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[50,56,225,66,14],"class_list":["post-5610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-dragdrop","tag-file-upload","tag-form","tag-javascript","tag-php","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Web Form with Drag and Drop File Upload using JavaScript and PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Web form with drag and drop file upload - Integrate drag and drop file upload with form data using JavaScript. Create a web form with multiple file attachments using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Web Form with Drag and Drop File Upload using JavaScript and PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Web form with drag and drop file upload - Integrate drag and drop file upload with form data using JavaScript. Create a web form with multiple file attachments using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-08T11:59:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-08T12:00:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Create Web Form with Drag and Drop File Upload using JavaScript and PHP\",\"datePublished\":\"2024-05-08T11:59:02+00:00\",\"dateModified\":\"2024-05-08T12:00:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/\"},\"wordCount\":623,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png\",\"keywords\":[\"Drag&amp;Drop\",\"File Upload\",\"Form\",\"JavaScript\",\"PHP\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/\",\"name\":\"Create Web Form with Drag and Drop File Upload using JavaScript and PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png\",\"datePublished\":\"2024-05-08T11:59:02+00:00\",\"dateModified\":\"2024-05-08T12:00:53+00:00\",\"description\":\"Web form with drag and drop file upload - Integrate drag and drop file upload with form data using JavaScript. Create a web form with multiple file attachments using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Web Form with Drag and Drop File Upload using JavaScript and PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Web Form with Drag and Drop File Upload using JavaScript and PHP - CodexWorld","description":"Web form with drag and drop file upload - Integrate drag and drop file upload with form data using JavaScript. Create a web form with multiple file attachments using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/","og_locale":"en_US","og_type":"article","og_title":"Create Web Form with Drag and Drop File Upload using JavaScript and PHP - CodexWorld","og_description":"Web form with drag and drop file upload - Integrate drag and drop file upload with form data using JavaScript. Create a web form with multiple file attachments using PHP.","og_url":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2024-05-08T11:59:02+00:00","article_modified_time":"2024-05-08T12:00:53+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Create Web Form with Drag and Drop File Upload using JavaScript and PHP","datePublished":"2024-05-08T11:59:02+00:00","dateModified":"2024-05-08T12:00:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/"},"wordCount":623,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png","keywords":["Drag&amp;Drop","File Upload","Form","JavaScript","PHP"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/","url":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/","name":"Create Web Form with Drag and Drop File Upload using JavaScript and PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png","datePublished":"2024-05-08T11:59:02+00:00","dateModified":"2024-05-08T12:00:53+00:00","description":"Web form with drag and drop file upload - Integrate drag and drop file upload with form data using JavaScript. Create a web form with multiple file attachments using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png","width":1920,"height":1080,"caption":"create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Create Web Form with Drag and Drop File Upload using JavaScript and PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/05\/create-web-form-with-drag-and-drop-file-upload-using-javascript-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1su","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=5610"}],"version-history":[{"count":1,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5610\/revisions"}],"predecessor-version":[{"id":5611,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5610\/revisions\/5611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5612"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=5610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=5610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=5610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}