Drag and drop to upload a photo #JavaScript #CSS
Published: 2023-07-19 09:40:12

We will create a very basic drag and drop application to upload a image.

**1.a) Create an area to drop image**

```html
<div class="drop-container">
      <span>Drop image here to upload</span>
</div>

<div id="file_name">You haven't uploaded a photo yet.</div>
```

**1.b) And add a little bit style**

```css
.drop-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 400px;
    width: 100%;
    max-width: 600px;
    font-size: 1.5rem;
    border: 2px dashed rgb(255, 203, 232);
    border-radius: 8px;
}

.drop-container.uploaded {
    border-color: #51cbb0;
    border-style: solid;
}

.drop-container img {
    max-width: 100%;
}

#file_name {
    margin-top: 32px;
}
```
It will look like:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e177dcu8qnzlysxgakf.JPG)

**2) Prevent default behaviour of '_dragover_' event**
Otherwise, image which is dropped will be opened in a blank tab.

```javascript
const dropContainer = document.querySelector(".drop-container");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});
```

**3) Get file on drop**
We also need to prevent default behaviour here.

```javascript
const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file uploaded
  const file = event.dataTransfer.files[0];
  
  console.log(file)
});
```

**4) Preview image which we uploaded**
We will create a link for the file and preview it as a image.

```javascript
const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file
  const file = event.dataTransfer.files[0];

  // Create link
  const url = window.URL.createObjectURL(file);
 
  // Create image element
  const image = document.createElement("img");
  image.src = url;

  // Append image as a child to drop area
  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  // Add class to drop container when image uploaded  
  // for updating styles
  dropContainer.classList.add("uploaded");

  // Preview file name and type
  fileName.innerHTML = `${file.name} [${file.type}]`;
});
```

## Here it is. 🎉

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ki1uqr5o7ftt5r1uly9.gif)


**5) EXTRA PART**
Check if the file type is image or not

```javascript
const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  let file;

  if (event.dataTransfer.items) {
    const item = event.dataTransfer.items[0];

    const isFile = item.kind === "file";
    const isImage = item.type.split("/")[0] === "image";

    if (isFile && isImage) {
      file = item.getAsFile();
    } else {
      alert("This is not an image!");

      return;
    }
  } else {
    file = event.dataTransfer.files[0];
  }

  const url = window.URL.createObjectURL(file);

  const image = document.createElement("img");
  image.src = url;

  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  dropContainer.classList.add("uploaded");

  fileName.innerHTML = `${file.name} [${file.type}]`;
});
``` 

That is it. Find source code on **github**:
https://github.com/inancakduvan/drag-and-drop-image

---

## Follow me on:

**Github:** https://github.com/inancakduvan/
**Twitter:** https://twitter.com/InancAkduvan

###

Thank you for reading 🙂