Sun. Jun 4th, 2023

[ANSWERED] javascript – Display an image after Drag and Drop with JS

By

Nov 20, 2022 css, html, javascript

Solution 1 :

You can initialize the gotFile function like this:

function gotFile(file) {
  dropzone.style('display', 'none');

  if (file.type === 'image') {
    var image = new Image();

    image.onload = function () {
      document.body.appendChild(this);
    };

    image.src = file.data;
  }
}

var dropzone;
function setup() {
  dropzone = select('#dropzone');
  dropzone.dragOver(highlight);
  dropzone.dragLeave(unhighlight);
  dropzone.drop(gotFile, unhighlight);
}

function gotFile(file) {
  dropzone.style('display', 'none');

  if (file.type === 'image') {
    var image = new Image();
    
    image.onload = function () {
      document.body.appendChild(this);
    };
    
    image.src = file.data;
  }
}


function highlight() {
  dropzone.style('color', '#73C2D0');
}

function unhighlight() {
  dropzone.style('color', '#45747c');
}

body {
  background-color: #18030e;
}

tir {
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  font-family: FFW;
  font-weight: bold;
  color: white;
  padding: 0 20px 0px;
  overflow: hidden;
  line-height: 1em;
}

.wrapper {
  margin: 50px 10px;
  height: 500px;
  width: 1000px;
  background-color: #ccc
}

.dropzone {
  padding: 25px;
  border-style: dashed;
  font-size: 20px;
  font-family: "FFW";
  color: #45747c;
  height: 500px;
  width: 1000px;
  text-align: center;
  border: 2px dashed;
  line-height: 500px;
  display: ;
}

.topnav {
    background-color: #7b1346;
    overflow: hidden;
    line-height: 1em;
}

.topnav a {
  font-family: "FFW";
  float: left;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 1em 14px 17px 1em;

}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  padding: 1em 14px 17px 1em;
}

.topnav a.active {
  background-color: #32c18b;
  color: white;
  padding: 1em 14 17px 1em;
}

.topnav img {
  display: inline-block;
  position: relative;
  padding: 5px 15px 0px 15px;
  float: left;
}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script>
  
<nav class="topnav">
    <img src="logo.png" style="width:40px;height:40px;"></img>
    <a class="active" href="index.html">HOME</a>
    <a href="help.html">HELP</a>
    <a href="about.html">ABOUT</a>
    <a href="examples.html">EXAMPLES</a>
    <div class="topnav-right">
    </div>
  </nav>

<div class="wrapper">
  <div class="dropzone" id="dropzone">
    Click or Drag an image here to upload
  </div> 
</div>

Problem :

I’ve been trying to make a drag and drop uploader. I need to display the droped image where the “dropzone” is (dashed rectangle) but I can’t figure out a way to do it. Right now when I drop an image, the script only hides the dropzone. How can I do something like that ?

Here is the html :

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" >
    <link rel = "icon" href="logo.png" type="image/x-icon">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script>
  <script type="text/javascript" src="upload.js"></script>
    <title>dooRd</title>
</head>
<body>
  <nav class="topnav">
    <img src="logo.png" style="width:40px;height:40px;"></img>
    <a class="active" href="index.html">HOME</a>
    <a href="help.html">HELP</a>
    <a href="about.html">ABOUT</a>
    <a href="examples.html">EXAMPLES</a>
    <div class="topnav-right">
    </div>
  </nav>

<div class="wrapper">
  <div class="dropzone" id="dropzone">
    Click or Drag an image here to upload
  </div> 
</div>

</body>
</html>

The CSS :

    @font-face {
  font-family: "FFW";
  src: url(FUTRFW.ttf);
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #18030e;
}

tir {
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  font-family: FFW;
  font-weight: bold;
  color: white;
  padding: 0 20px 0px;
  overflow: hidden;
  line-height: 1em;
}

.wrapper {
  margin: 50px 10px;
  height: 500px;
  width: 1000px;
}

.dropzone {
  padding: 25px;
  border-style: dashed;
  font-size: 20px;
  font-family: "FFW";
  color: #45747c;
  height: 500px;
  width: 1000px;
  text-align: center;
  border: 2px dashed;
  line-height: 500px;
  display: ;
}

.topnav {
    background-color: #7b1346;
    overflow: hidden;
    line-height: 1em;
}

.topnav a {
  font-family: "FFW";
  float: left;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 1em 14px 17px 1em;

}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  padding: 1em 14px 17px 1em;
}

.topnav a.active {
  background-color: #32c18b;
  color: white;
  padding: 1em 14 17px 1em;
}

.topnav img {
  display: inline-block;
  position: relative;
  padding: 5px 15px 0px 15px;
  float: left;
}

And the script :

    var dropzone;
function setup() {
  dropzone = select('#dropzone');
  dropzone.dragOver(highlight);
  dropzone.dragLeave(unhighlight);
  dropzone.drop(gotFile, unhighlight);
}

function gotFile(file) {
  dropzone.style('display', 'none');
}


function highlight() {
  dropzone.style('color', '#73C2D0');
}

function unhighlight() {
  dropzone.style('color', '#45747c');
}

By

Related Post

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022