JAVASCRIPT drag and drop upload file javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

drag and drop upload file using javascript


 174

Show ResultJAVASCRIPT


3

// inspirated by Joe Zim

<html>
<head>
<style>
body
{
font-family: sans-serif;
}
a
{
color: #369;
}
.note
{
width: 500px;
margin: 50px auto;
font-size: 1.1em;
color: #333;
text-align: justify;
}
#drop-area
{
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
margin: 50px auto;
padding: 20px;
}
#drop-area.highlight
{
border-color: purple;
}
p
{
margin-top: 0;
}
.my-form
{
margin-bottom: 10px;
}
#gallery
{
margin-top: 10px;
}
#gallery img
{
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button
{
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover
{
background: #ddd;
}
#fileElem
{
display: none;
}
</style>
</head>

<body>

<div id="drop-area">
<form class="my-form">
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select some files</label>
</form>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>

<script>
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")

// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})

// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})

;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}

function highlight(e) {
dropArea.classList.add('highlight')
}

function unhighlight(e) {
dropArea.classList.remove('active')
}

function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files

handleFiles(files)
}

let uploadProgress = []
let progressBar = document.getElementById('progress-bar')

function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []

for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}

function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}

function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}

function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}

function uploadFile(file, i) {
var url = '' // your cloud's url
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})

xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})

formData.append('upload_preset', 'your account') // account's information
formData.append('file', file)
xhr.send(formData)
}
</script>

</body>
</html>


By     Created   
The power of the user (%)
8%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  4.2K     374

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  2.3K     254

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  1.5K     159

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  1.4K     113

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.3K     83

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  749     74

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  512     71

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  635     69

how to create the connect to a database with ADODB using javascript ?how to create the connect to a database with ADODB using javascript ?JAVASCRIPT

Click to see more ...

  453     59

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  385     56