Altın Konu HTML ve JavaScript Kullanarak Sürükle ve Bırak Dosya Yüklemesi nasıl oluşturulur?

KERİM ERBAY · 2 Ara 2023

Merhaba arkadaşlar, Çeşitli web sitelerinde birçok kez sürükle ve bırak dosya yükleme seçeneğini görmüşsünüzdür, peki siz de bir tane oluşturmayı denemek ister misiniz?

Bugün HTML, CSS ve JavaScript kullanarak bu sürükle ve bırak Dosya Yükleme işlemini nasıl yapacağımızı göreceğiz. Bu projenin tam demosu aşağıda verilmiştir. Bu sürükle ve bırak dosya yükleme örneğini inceleyin ve web sitenizi ve projelerinizi daha yaratıcı ve kullanışlı hale getirin.

HTML, CSS ve JavaScript Kullanarak Dosya Yüklemeyi Sürükleyip Bırakın

Sürükleyip bırakarak dosya yüklemeye mi ihtiyacınız var?

Şimdi bu projenin genel kullanımına bakalım. Bazen web sitenizin kullanıcısından dosya girdileri toplamak isteyebilirsiniz, o zaman bu HTML dosyası yükleme sürükle ve bırak işlemi, kullanıcıların dosya yüklemesi için yararlı bir kavramdır.

Bir örnekle anlayalım:

Proje İndirme	Bağlantı Aşağıda Mevcuttur
Kullanılan dil	HTML, CSS ve JavaScript
Dış bağlantı / Bağımlılıklar	Evet
duyarlı	Evet

Şimdi kodu görelim!

HTML Kodu:

Aşağıdaki kodları yapıştırın:

NOT: Bu bir Font Awesome CDN bağlantısıdır, bu nedenle HTML başlık bölümünüze bağlantı vermeyi unutmayın, aksi takdirde bu sürükle ve bırak simgesi projelerinizde görünmez.

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

HTML KODU

HTML:

  <div class="drag-area">
    <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
    <header>Drag & Drop to Upload File</header>
    <span>OR</span>
    <button>Browse File</button>
    <input type="file" hidden>
  </div>

HTML kodunun açıklaması:

Sürükleme alanı oluşturmak için <div> etiketini kullanacağız.
Div etiketinin içine, sürükleme alanının içine bir bulut yükleme simgesinin yanı sıra, kullanıcılara dosyayı yüklemelerini hatırlatacak bir başlık eklemek için <header> öğesini ekleyeceğiz.
Ayrıca giriş türü dosya olarak ayarlanmış bir dosyaya gözat düğmesi de oluşturacağız.

Çıktı şöyle olacaktır :

HTML, CSS ve JavaScript Kullanarak Dosya Yüklemeyi Sürükleyip Bırakın
Şimdi projemize stil vermek için CSS ekleyelim.

CSS Kodu:

CSS:

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #0fb8ac;
  }
  .drag-area{
    border: 2px dashed #fff;
    height: 500px;
    width: 700px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .drag-area.active{
    border: 2px solid #fff;
  }
  .drag-area .icon{
    font-size: 100px;
    color: #fff;
  }
  .drag-area header{
    font-size: 30px;
    font-weight: 500;
    color: #fff;
  }
  .drag-area span{
    font-size: 25px;
    font-weight: 500;
    color: #fff;
    margin: 10px 0 15px 0;
  }
  .drag-area button{
    padding: 10px 25px;
    font-size: 20px;
    font-weight: 500;
    border: none;
    outline: none;
    background: #fff;
    color: #0fb8ac;
    border-radius: 5px;
    cursor: pointer;
  }
  .drag-area img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
  }

CSS Kodunun Açıklaması:

Aşama 1:

Öncelikle sürükle bırak paylaşım dosyamıza birkaç yeni Google Fonts ekleyeceğiz.
Ardından, evrensel seçiciyi kullanarak dolguyu ve kenar boşluğunu "sıfır" olarak ayarlayacağız, box-sizing özelliği kutu boyutunu "border-box" olarak ayarlamak için kullanılacak ve font-family özelliği ayarlamak için kullanılacaktır. yazı tipi ailesini “Poppins” olarak değiştirdik.
Daha sonra yükleme dosyamıza çeşitli yazı tipi stilleri ekleyeceğiz.
Artık gövde etiketi seçici kullanılarak ekran "esnek" olarak değiştirilecek ve öğeler, öğeyi hizala özelliği kullanılarak ortaya hizalanacak. Arka plan özelliğini kullanarak arka planı “deniz yeşili” olarak değiştireceğiz.

Adım 2:

Şimdi sınıf seçiciyi (.drag-area) kullanarak sürükleme alanının içinde 2 piksellik beyaz renkli kesikli bir kenarlık oluşturacağız.
display özelliği, ekranı “esnek” hale getirmek için kullanılır ve boyutlar sırasıyla 500 ve 700 pikseldir.
Benzer şekilde, simgenin stilini belirleyeceğiz ve yazı tipi boyutunu ve ağırlığını sırasıyla 30 piksel ve 500 piksele, rengi ise parçanın diğer bölümlerinde beyaza ayarlayacağız.
Hem gözat düğmesine hem de sürükleme bölgemizdeki düğmeye benzer stil eklenecektir.

Şimdi kodumuza işlevsellik için JavaScript ekleyeceğiz:

JavaScript Kodu:

JavaScript:

 //selecting all required elements
const dropArea = document.querySelector(".drag-area"),
dragText = dropArea.querySelector("header"),
button = dropArea.querySelector("button"),
input = dropArea.querySelector("input");
let file; //this is a global variable and we'll use it inside multiple functions




button.onclick = ()=>{
  input.click(); //if user click on the button then the input also clicked
}




input.addEventListener("change", function(){
  //getting user select file and [0] this means if user select multiple files then we'll select only the first one
  file = this.files[0];
  dropArea.classList.add("active");
  showFile(); //calling function
});
//If user Drag File Over DropArea
dropArea.addEventListener("dragover", (event)=>{
  event.preventDefault(); //preventing from default behaviour
  dropArea.classList.add("active");
  dragText.textContent = "Release to Upload File";
});




//If user leave dragged File from DropArea
dropArea.addEventListener("dragleave", ()=>{
  dropArea.classList.remove("active");
  dragText.textContent = "Drag & Drop to Upload File";
});




//If user drop File on DropArea
dropArea.addEventListener("drop", (event)=>{
  event.preventDefault(); //preventing from default behaviour
  //getting user select file and [0] this means if user select multiple files then we'll select only the first one
  file = event.dataTransfer.files[0];
  showFile(); //calling function
});




function showFile(){
  let fileType = file.type; //getting selected file type
  let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
  if(validExtensions.includes(fileType)){ //if user selected file is an image file
    let fileReader = new FileReader(); //creating new FileReader object
    fileReader.onload = ()=>{
      let fileURL = fileReader.result; //passing user file source in fileURL variable
      let imgTag = `<img src="${fileURL}" alt="image">`; //creating an img tag and passing user selected file source inside src
attribute
      dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
    }
    fileReader.readAsDataURL(file);
  }else{
    alert("This is not an Image File!");
    dropArea.classList.remove("active");
    dragText.textContent = "Drag & Drop to Upload File";
  }
}

Javascript kodunun açıklaması:

Yapacağımız ilk şey, const anahtar sözcüğünü kullanarak sabit bir değişken oluşturmak ve ardından içindeki belgeden seçeceğimiz HTML öğelerinin değerlerini saklayacağız.
Tüm HTML öğeleri sorgu seçici tekniği kullanılarak seçilecektir.
Kullanıcı veri girmek için düğmeye tıkladığında, bir onclick işlevi oluşturacağız.
Tıklandığında klasörler seçilecektir. Sürükleme alanı oluşturmak için sürükle bırak dosyasına aktif bir sınıf ekleyeceğiz.
Kullanıcı bir dosyayı istenen bölgeye sürüklediğinde otomatik dosya yükleme gerçekleşir.

Sürükle ve Bırak Dosya Yüklemenin Son Çıktısı

HTML, CSS ve JavaScript Kullanarak Dosya Yüklemeyi Sürükleyip Bırakın
Ve bu proje için hepsi bu!

Artık Sürükle ve Bırak Dosya Yükleme işlemimizi tamamladık. İşte JavaScript ile güncellenmiş çıktımız. Umarım Sürükle ve Bırak Dosya Yüklemeyi beğenirsiniz.

Bu yazıda HTML, CSS ve JavaScript kullanarak sürükleyip bırakarak Dosya Yükleme işleminin nasıl oluşturulacağını öğrendik. Herhangi bir sorunuz varsa, yanıtlamak veya kolayca öğrenmenize yardımcı olmak için lütfen bir yorum bırakın.

Codepen Önizlemesi:

Sürükle ve bırak yöntemiyle yükleme nasıl çalışır?

Belgeleri veya klasörleri dosya tarayıcısından bırakma bölgesine sürükleyip bırakın. Yükleyici bileşeni, varsayılan olarak bir bırakma alanı öğesi olarak işlev görür. Dosyaları bırakma bölgesinin üzerine sürüklediğinizde vurgulanır.

Sürükle bırak dosyası nedir?

Web uygulamaları, HTML Sürükle ve Bırak arayüzlerini kullanarak dosyaları bir web sitesine sürükleyip bırakabilir. Bu arayüz kullanıcıya dosya ve klasör yükleme olanağı sağlar.