(Filepond) adalah Library JavaScript yang dapat me-upload apapun dengan cara drag and drop. Sangat optimal dalam meng-upload dengan cepat, menawarkan user experience yang baik, mudah digunakan dan tampilan yang halus serta memiliki ukuran file 21 KB. oke langsung saja kita praktekan Upload File mengunakan Filepond JS.
pertama tama kalian buat struktur html seperti berikut
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Demo project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h2 class="text-center text-primary">Drag & Drop di Sini</h2>
<div class="form-group">
<input type="file" class="filepond" name="filepond" id="exampleInputFile" accept="image/png, image/jpeg, image/gif">
</div>
</div>
</div>
</div>
</body>
</html>
setelah itu kalian pasang library fiilepond tersebut, bisa dengan CDN atau bisa dengan NPM, untuk sekarang saja mempraktekan dengan CDN biar lebih mudah yah teman teman’
pasang script berikut sebelum penutup tag body
setalh itu kalian bisa buka di webrowser masing masing. tampilannya seperti berikut
dan coba kalian drag gambar ke situ, misal saya di sini akan upload gambar koala.jpg
maka akan terupload, begitupun kalo kita menghapus, tinggal klik tanda silang yang tertera di atas.
sekian tutorial Upload File mengunakan Filepond JS, semoga bermanfaat yah teman teman.
The post Upload File mengunakan Filepond JS appeared first on Kursus Website Terbaik.