drag drop images input file and preview before upload

Question

I want to create a div attach drag drop feature and when someone click it they can choose their image.

I have coded something and its can - click div and choose your image - preview your image before upload

you can check my fiddle

css

.uploader {width:300px;height:350px;background:#f3f3f3;border:2px dashed #e8e8e8;}

javascript

    var imageLoader = document.getElementById('filePhoto');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {

        $('.uploader').html( '<img width="300px" height="350px" src="'+event.target.result+'"/>' );
    }
    reader.readAsDataURL(e.target.files[0]);
}

html

<div class="uploader" onclick="$('#filePhoto').click()">click here or drag here your images for preview and set userprofile_picture data</div>
            <input type="file" name="userprofile_picture"  id="filePhoto" style="display:block;width:185px;"  />

you can check http://jsfiddle.net/ELcf6/

Engin Üstün · Accepted Answer · 2018-12-19T09:13:39.367

27

You can do this with little css tricks. input element accepts drop. I changed your code like below:

css

.uploader {
    position:relative; 
    overflow:hidden; 
    width:300px; 
    height:350px;
    background:#f3f3f3; 
    border:2px dashed #e8e8e8;
}

#filePhoto{
    position:absolute;
    width:300px;
    height:400px;
    top:-50px;
    left:0;
    z-index:2;
    opacity:0;
    cursor:pointer;
}

.uploader img{
    position:absolute;
    width:302px;
    height:352px;
    top:-1px;
    left:-1px;
    z-index:1;
    border:none;
}

javascript

var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        $('.uploader img').attr('src',event.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
}

// Edit for multiple images
// I didn't try but it should work.
// Also you need write some CSS code to see all images in container properly.
function handleImages(e) {
    $('.uploader img').remove();
    for(var i = 0; i < e.target.files.length; i++){
        var reader = new FileReader();
        reader.onload = function (event) {
            var $img = $('<img/>');
            $img.attr('src', event.target.result);
            $('.uploader').append($img);
        }
        reader.readAsDataURL(e.target.files[i]);
    }
}

html

<div class="uploader" onclick="$('#filePhoto').click()">
    click here or drag here your images for preview and set userprofile_picture data
    <img src=""/>
    <input type="file" name="userprofile_picture"  id="filePhoto" />
</div>

i hope it helps. You can check http://jsfiddle.net/ELcf6/4/, and other version http://jsfiddle.net/ELcf6/8/

edited Dec 19 '18 at 09:13

answered Aug 02 '14 at 08:55

Engin Üstün

1,118
11
18

thank you its working! But I want to learn it can u give me details how we can accept drop for inputs? I look your codes but I cant understand which trick can do this? – webkafali Aug 02 '14 at 09:06
input element accepts files via drag and drop, but this property supported some browsers like chrome, firefox etc. i put input element in your uploader div and set input element's width and height equal to uploader div – Engin Üstün Aug 02 '14 at 09:35
Thank you, nut it is not working in firefox 55.0.2. imageLoader.files is not changing in firefox in drag drop drop event. – Abhishek Oct 01 '17 at 12:58
@EnginÜstün i tried your example it's working fine on change event. but not working for drag and drop throwing error **Cannot assign to 'files' because it is a constant or a read-only property.** . I am using angular 4. – Abhay Singh Dec 06 '17 at 20:55
Not work for multiple images, its only show the last one. – user706420 Dec 15 '18 at 11:10
@user706420 Yes, because it is for single file. If you want to use it for multiple files, you need a little modification on handle function. Iterate over files and do same operation on each file. – Engin Üstün Dec 19 '18 at 09:02
@user706420 I added an example function. see `handleImages` – Engin Üstün Dec 19 '18 at 09:16

drag drop images input file and preview before upload

1 Answers1

Linked