Create File Upload Using HTML,CSS And JAVASCRIPT Code

Create File Upload Using HTML,CSS And JAVASCRIPT Code

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An File Upload Using Html, Css, And JavaScript. Before That, We Could See What This Project Is About.

In This Project, We First Upload A File Using Upload Button Or Drag And Drop Method Then We Will Enter Our Email Address To Send That File, So The File Which Is Sent Will Appear In The Box.

So,Ā  Let’s Begin Our Project Journey By Adding The Source Codes. For That, We Are Using The Html Code First.

Html Code File Upload

<div class="container">
  <div class="card">
    <h3>Upload Files</h3>
    <div class="drop_box">
      <header>
        <h4>Select File here</h4>
      </header>
      <p>Files Supported: PDF, TEXT, DOC , DOCX</p>
      <input type="file" hidden accept=".doc,.docx,.pdf" id="fileID" style="display:none;">
      <button class="btn">Choose File</button>
    </div>

  </div>
</div>

Now We Added The Html Code For The Project. In This Code, We First Create An Div Class With Name Container, Then For the File Upload Card, We Are Creating Another Div Class With A Name Card.

100+ Front-end Projects for Web developers (Source Code)

After That We opened An Header Tag, Inside Of Header Tag We Just Adding The Title And The Requirements For Files That Needs To Support And An Input Tag To Display The Uploaded Files With The File Formats Mostly The File Format Requirements Were Done With This Accept Keyword In Input Tag.

Lastly, We Just Adding The Button To Upload The Files From Other Sources. And That’s Of For Html, Now We Just Start Styling Our Project With Css And The Respective Code Is Down Below.

Css Code File Upload

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  height: 100vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}

.card {
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  width: 600px;
  height: 260px;
  background-color: #ffffff;
  padding: 10px 30px 40px;
}

.card h3 {
  font-size: 22px;
  font-weight: 600;
  
}

.drop_box {
  margin: 10px 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dotted #a3a3a3;
  border-radius: 5px;
}

.drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: #2e2e2e;
}

.drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #a3a3a3;
}

.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}

.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}

Now The Css Code For The Project Is Added Successfully. In This Code, We Begin By Adding The Links For Font Families Using Import Property Then We Set He Margin And Padding Values To 0 And The Box Size O Border Using Universal Mark(*).

In The First Step After This, We Just Start Styling Whole Div Class That Contains The Name Container Then After That We Are Adding A Border Style With Dotted Property To Specifically Make It Attractive. And We Just Styling Out The Div Class Drop_box That Contains The Necessary Contents For The File Upload Project And Even Some Contents Inside It May Change.

The Code For the Above Explanation Is Given Below.

.container {
  height: 100vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}

.card {
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  width: 600px;
  height: 260px;
  background-color: #ffffff;
  padding: 10px 30px 40px;
}

.card h3 {
  font-size: 22px;
  font-weight: 600;
  
}

.drop_box {
  margin: 10px 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dotted #a3a3a3;
  border-radius: 5px;
}

.drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: #2e2e2e;
}

.drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #a3a3a3;
}

After this, We just styled out our button and input field to display the uploaded file in a user-attractive method, and the button after clicking it should change its content to “file uploaded” for this purpose, we have used this code…Ā  and some hover effects have been added for button element and it is also given below.

.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}

.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}

Now We Have Completed Our Css Code Successfully. It’s Time To Add Java Script Code And The Respective Code Is Down Below.

Javascript Code File Upload

const dropArea = document.querySelector(".drop_box"),
  button = dropArea.querySelector("button"),
  dragText = dropArea.querySelector("header"),
  input = dropArea.querySelector("input");
let file;
var filename;

button.onclick = () => {
  input.click();
};

input.addEventListener("change", function (e) {
  var fileName = e.target.files[0].name;
  let filedata = `
    <form action="" method="post">
    <div class="form">
    <h4>${fileName}</h4>
    <input type="email" placeholder="Enter email upload file">
    <button class="btn">Upload</button>
    </div>
    </form>`;
  dropArea.innerHTML = filedata;
});

Now We Have Added Our JavaScript Code Successfully. Here We Give Some Steps For The Particular Code With an Explanation In Which The Code Is Worked According To It.

Responsive Drop-down Menu Using Html Css Jquery (Source Code)

Step 1:Ā  Inside The Script File, We First Getting The Div Class And Input Class By The Query Selector Js Property Which Is Given Below

const dropArea = document.querySelector(".drop_box"),
  button = dropArea.querySelector("button"),
  dragText = dropArea.querySelector("header"),
  input = dropArea.querySelector("input");

Step 2: After that, we are creating an empty variable to store value now we adding the button event property to perform events after the button click.

Then inside the button event, we simply declare input click for choosing the file. The code for the explanation is down.

let file;
var filename;

button.onclick = () => {
  input.click();
};

Step 3:Ā in this last step, we add the input event using js event listener properties to display the file’s data that are uploaded using the javascript file properties after uploaded we may enter an email to send and the uploaded file will be visible for reference.

input.addEventListener("change", function (e) {
  var fileName = e.target.files[0].name;
  let filedata = `
    <form action="" method="post">
    <div class="form">
    <h4>${fileName}</h4>
    <input type="email" placeholder="Enter email upload file">
    <button class="btn">Upload</button>
    </div>
    </form>`;
  dropArea.innerHTML = filedata;
});

Now We Have Successfully Completed Our Javascript Code. So The Last Thing Left Here Is To Preview Our Project Given In The Output Section.

Final OutputĀ File Upload

Now We Have Successfully Created Our File Upload Project Using Html, Css, And Java Script. You Can Use This Project For Your Personnel Needs And The Respective Lines Of Code Is Given With The CodePen LinkĀ  Mentioned Below.

If You Find Out This Blog Helpful? , Then Make Sure To Search Code With Random On Google For Front End Projects With Source Codes And Make Sure To Follow The Code With Random Instagram Page.

Refer Code- Aman Chourasia

Written By-Ā Ragunathan S

Share on:

Leave a Comment