• Techblog369, India
  • February 5, 2023

How To Configure A Sendinblue SMTP Relay in Postfix?

Fix Email Issues in CyberPanel with SMTP Relay Setup Free Method. First Create a email using your Cyberpanel Under Emai Tab Create Email Second go to the SSL tab and click …

Create a simple password strength indicator with JavaScript

You’ve probably seen many examples of password strength indicators around the web. They let users know the password they’re using is weak and indicate how the strength changes when it’s modified. …

The following HTML5 tags provide the required components to add a file selector and an upload button to any web page:

<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload </button>

The button kicks off a method named uploadFile(), which contains the JavaScript file upload logic.

<script>
async function uploadFile() {
    let formData = new FormData();           
    formData.append("file", fileupload.files[0]);
    await fetch('/upload.php', {
      method: "POST", 
      body: formData
    });    
    alert('The file has been uploaded successfully.');
}
</script>

JavaScript file upload logic

The above script tag contains nothing but pure JavaScript. There’s no jQuery or Dojo thrown into the mix and the logic is straightforward:

  • Create a FormData object to contain the information to be sent to the server;
  • Add the chosen file to be uploaded to the FormData object;
  • Asynchronously call server-side resource to handle the upload; and
    • The server-side resource is invoked through the POST method
    • The server-side resource is passed the FormData which contains the file
    • In this example that server-side resource is named upload.php
  • When notified that the JavaScript file upload was successful, send an Ajax based alert to the client.

All the HTML and JavaScript logic will be contained in a single file named uploader.html. The complete HTML looks as follows:

<!DOCTYPE html> 
<html> 
 <head> 
  <title> Ajax JavaScript File Upload Example </title> 
 </head> 
 <body>
  <!-- HTML5 Input Form Elements -->
  <input id="fileupload" type="file" name="fileupload" /> 
  <button id="upload-button" onclick="uploadFile()"> Upload </button>

  <!-- Ajax JavaScript File Upload Logic -->
  <script>
  async function uploadFile() {
  let formData = new FormData(); 
  formData.append("file", fileupload.files[0]);
  await fetch('/upload.php', {
    method: "POST", 
    body: formData
  }); 
  alert('The file has been uploaded successfully.');
  }
  </script>

 </body> 
</html>

Apache file upload processing

When an asynchronous JavaScript file upload happens, a server-side component must exist to handle the incoming file and store it.it requires a file named upload.php that contains a small PHP script to save the incoming file to a folder named uploads:

<?php

/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];

/* Choose where to save the uploaded file */
$location = "upload/".$filename;

/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
  echo 'Success'; 
} else { 
  echo 'Failure'; 
}

?>

The PHP script is also straightforward. It obtains the name of the file being uploaded, and then creates a spot in a folder named upload to save the file. PHP’s move_uploaded_file method is then used to save the uploaded file to this new location.

Run the JavaScript file upload example

The files used in this example, along with a folder named upload, must be added to the htdocs folder of AHS. When a client accesses the uploader.html file through a browser, the client will be able to upload a file to the server using Ajax and pure JavaScript.

Author

nw.ippm@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *