Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Javascript Drag and Drop Image Upload Using FilePond Library

Posted on May 16, 2023

 

 

To implement drag and drop image upload using the FilePond library in JavaScript, follow these steps:

 

Step 1: Include the FilePond library in your HTML file.

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
</head>
<body>
  <div id="filepond"></div>
  
  <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
  <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
  <script>
    FilePond.registerPlugin(FilePondPluginFileValidateType);
 
    const inputElement = document.getElementById('filepond');
    const pond = FilePond.create(inputElement, {
      acceptedFileTypes: ['image/*'],
      onaddfile: (err, file) => {
        if (!err) {
          console.log(file.filename);
        } else {
          console.error(err);
        }
      }
    });
  </script>
</body>
</html>

 

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme