Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

javascript file drag and drop

var dropZone = document.getElementById('dropZone');

// Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
});

// Get file data on drop
dropZone.addEventListener('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    var files = e.dataTransfer.files; // Array of all files

    for (var i=0, file; file=files[i]; i++) {
        if (file.type.match(/image.*/)) {
            var reader = new FileReader();

            reader.onload = function(e2) {
                // finished reading file data.
                var img = document.createElement('img');
                img.src= e2.target.result;
                document.body.appendChild(img);
            }

            reader.readAsDataURL(file); // start reading the file data.
        }
    }
});
Comment

PREVIOUS NEXT
Code Example
Javascript :: express-generator 
Javascript :: regex urls 
Javascript :: how to check if a json object is empty 
Javascript :: is material ui not working with react 18 
Javascript :: mil to km javascript 
Javascript :: how to use secondary color in material ui useStyle 
Javascript :: spread operator merge objects 
Javascript :: mat checkbox change event in angular 7 
Javascript :: javascript remove empty array 
Javascript :: touppercase 
Javascript :: get element ref react 
Javascript :: js remove property from object 
Javascript :: Array Pagination in JS 
Javascript :: react useeffect async javascript 
Javascript :: sum all elements in array javascript 
Javascript :: first and last char vowel reg exp same char 
Javascript :: vanilla javascript add class 
Javascript :: regex to ignore white spaces js 
Javascript :: how to change text in html using javascript 
Javascript :: package.json set environment variables 
Javascript :: i18n react meta description 
Javascript :: how to disable back js 
Javascript :: how to add css in js 
Javascript :: js get last element of an array 
Javascript :: discord.js v13 client 
Javascript :: javascript string search second occurrence 
Javascript :: Package path ./compat is not exported from 
Javascript :: loop through object in array javascript 
Javascript :: ngmodel angular 
Javascript :: mac node change version 16 
ADD CONTENT
Topic
Content
Source link
Name
5+4 =