How To Create Drag And Drop Image Uploader Using HTML CSS and JavaScript

hi guys welcome back to another video of greatest act today in this video we are going to create a drag and drop image uploader using HTML CSS and JavaScript on my computer screen you can see one block where you can see the text drag and drop or click here to upload image so in this block if I drag any image that will be uploaded here and we can also click here to upload the image so first let me click on this and it will open this window to select any image let's select this one and it is uploaded here now if I click again and we can select the another image so we can upload the image by clicking on this element we can also drag the images on this box so here we have some images let's drag like this and it is uploaded here we can change the image just drag another image over here and here we have the another image let's try the another image you can see it is adding this image in this block like this we can drag and drop the image to upload on our website we will create this drag and drop image uploaded with the help of HTML CSS and JavaScript and in the JavaScript we will use different event on change on drag over on drop so it will be very good JavaScript project for your college or job portfolio but before starting this video please hit the like button and also subscribe my channel greater stack now let's start this video here I have this folder and in this folder I have one HTML file one CSS file and one icon that is upload icon you can find this icon download link in the video description now I will open these files with my code editor which is Visual Studio code you can use any code editor so this is the HTML file where I have added the basic HTML structure and this one is the CSS file and in this HTML file I have added this title drag and drop file uploader great stack then we have this link tag that will connect the HTML and CSS file because here I have added hdfstyle.css next we will add the codes within this body tag that will be displayed on our webpage so here let's create one tip with the class name hero next we will add the CSS for this hero that this class name here in the series file and here we will add some CSS properties so we will add the width of 100 and then we will add the mean height then we will add the background and in the background we will add the linear gradient color so here we will add linear gradient and two color codes after that we will add display Flex align item Center and justify content Center so that all the contents inside this div will be in the center of the web page now after adding this come back to the folder and open this HTML file with any web browser so you can see the gradient color on the complete web page just close this browser and I will open it with the visual studio code extension called live server so that it will automatically refresh the webpage when we will add any changes in the code file so you can see the same webpage again now let me come back to the HTML file within this div we will add one level tag level for input file and within this level we will add one input field type will be file and here we will add accept here we will add image slash star so it will only accept the image file after that we will add one ID and in this ID we will add input file this input file ID and this for input file is same it should be same and after adding this let's come back to the website and here you can see choose file no file chosen so we have the file input field here we can choose our file let's click on this one and we can select like this so you can see img2.jpg so this image is selected here now just come back now for this label we will add one ID so let me add the ID drop area and we will add the CSS for this drop area so copy this one add it here in the CSS file with the hashtag because it is an ID so for this drop area let's add the width of 500 pixel then we will add the height height will be 300 pixel and let's add some padding then background will be white text align Center and border radius of 20 pixel now you can see the white color of box for this drop area now let's come back it is not in the center so let me check here here we have the Align content so we will make it align items center after that you can see it is vertically centered now we have to add one icon and text within this box so let me come back to the HTML file and here we have the input so after this input we will create another div and let's add the ID for this div image View in this div we will display the uploaded image that's why I am adding the ID image view so it will display the image that will be uploaded so here in this one we will add one icon with the IMG tag so write the file path icon.png and here we will add one text so let's add the text in P tag so this is the text drag and drop or click here to upload image and here we will add one line break just add bi and in the next line we'll add another text so we'll add the text in a span tag and this is the text upload any images from desktop after adding this come back to the website and you can see this icon this text now let's come back and here we have the ID IMG view so write it here with the hashtag for this IMG view let's add the width 100 and height also hundred percent next we will add the Border radius same as the parent element 20 pixel then we will add border of 2 pixel dashed and this color code then we will add the background after having this you can see we have this dashed border and colored in this box next we have to set the size of this icon and change the size for the last text now just come back and here we will add IMG View and in this one we have the IMG tag for the icon here we will decrease the width it will be 100 pixel and margin from the top 25 pixels and in this one we have one text in a span tag so for this text we will add display block font size 12 pixel then we will change the color and margin from the top foreign so you can see this text in small font upload any images from desktop here you can see this input field choose file so we have to hide this one to hide this one just come back and in this input field we will just add hidden that's it after adding this you can see that file input field is hidden right now if I click on this area still it will open this window to select the image but if I select any image it is not displaying on the web page so to display this image in this block we have to use the JavaScript so let's come back to the code file and here you will create a new file here we will click on this icon and it will create a new file we will add the file name a script dot Js so you can see we have the new file here next we have to connect this ascript.js file with the HTML file so just above this closing body tag we will add a script SRC and a script.js now the HTML file and a script file are connected next we have to come to this script file and here it will add some variables so let's add const drop area equal to document dot get element y ID and we have the ID here drop area just copy this one add it here so just duplicate this line and we will update the ID so the next ID is this input file edit here and here we'll add the variable name input file next we will add this image view IMG View add this ID here and write the variable name image View next we have to add the event on the input field which is the file input field so whenever the file is changed in the input select box that will be displayed on our web page so here we will add this input file add event listener and here we'll add the event change so if there is any change in this input file then it will display the image on our web page or upload the image so here we'll add upload image that's it next we have to Define this upload image function just add it here we will add function upload image and what will happen it will get the image from the input element here we have the input element so when the file in this input will be changed we have to get that file so here let's add input file dot files index 0 so it will give the file which is uploaded in the input field but it is in the object format so we have to convert it into the image link so to create the image link here we will add let IMG link equal to URL Dot create object URL and in this one we have to pass the object so that object is here just remove it from here and add it here that's it now we will get the URL of the uploaded image now we got the image so we can display this image on our web page we have to display the image in this image view just copy this one write it here image view so in this one we have to add the image as a background image so just add image view Style Dot background image equal to we will add the backticks URL and in this URL we have to add this image link so let's add dollar curly braces image link so this image link will be added in the image view as a background after adding this let's come back to the website and here if I click on this one select any image you can see this image is added as a background image but still we have other text here which is the icon and text to remove these text and icons just come back and in the next line We'll add image view Dot text content it will be blank that's it now just come back select the image you can see we have just image here here we have the Border also if you want to remove this border let's come back here we'll add image View dot Style dot border and it will be 0 so that border will be hidden you can see if I select the image here we have just image right now the image is not in this Center so to make it in the center we will come back to this CSS file here we have the CSS file and added the CSS for the image view so in this one we will add background position center and background size cover after adding this come back to the website now you can see the complete image is visual in this box let me click on this and select the another image it is displaying here let's select the another image it is here but right now if I drag the image let me come back to the folder and drag this image over the webpage it is not working it will open the image in the new tab it is not uploaded here refresh this webpage come back and drag again it is not working so we have to add the drag and drop feature on this element when we will drag and drop the image it will be uploaded in this element now just come back come to the script file and here let's add drop area dot add event listener here we will add drag over event drag over function e and then we will add e Dot prevent default so it will prevent the default feature when we drive over the element after that we will add another event duplicate this one and it will be drop and here also we will add the prevent default and after that we will add input file dot files equal to e Dot data transfer dot files so when we will drop the image that will be transferred in the input file input file is the input field which is here so when we will drop the image it will be transferred in this input field and when it is in the input field we can call this function upload image so just copy this one add it here that's it after adding this come back to the website and let's drop any image select this one and drag and drop over this area you can see it is uploaded let me resize the window and drag the another image like this you can see we can drag and drop the image to upload on our website so finally we have completed this drag and drop image uploaded with the help of HTML CSS and JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel great stack to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 23,969

Keywords: image upload on website, upload image on website, Upload image using JavaScript, drag and drop image on website, drag drop image upload, upload image drag and drop, javascript image upload on website, javascript drag and drop, HTML CSS JavaScript, Web development, Coding, programming, JavaScript, JavaScript Project

Id: 5Fws9daTtIs

Length: 18min 22sec (1102 seconds)

Published: Thu Jul 06 2023