Idea for drag&drop image

[vlatka-sinisa]

Another functionality that we've added additionally was drag&drop support.

Hope someone finds it usefull...

variable imageCropper is defined as:

var imageCropper = $('#image-cropper');
imageCropper.cropit( { imageBackground: true; }) 

This is the way we've done d&d. If user selects multiple files (tries to upload multiple files) the first image file will be loaded into the cropit using: imageCropper.cropit('imageSrc', e.target.result);

if (window.File && window.FileList && window.FileReader) {
                    var filedrag = imageCropper.find(".cropit-image-preview");

                    // is XHR2 available?
                    var xhr = new XMLHttpRequest();
                    if (xhr.upload) {

                        var dropZone = document.getElementById('#{$tuniq}-image-preview');

                        function dragover(evt){
                            evt.stopPropagation();
                            evt.preventDefault();
                            evt.dataTransfer.dropEffect = 'copy';
                            $(evt.target).toggleClass('dagoverhoover', evt.type == 'dragover');
                        }

                        dropZone.addEventListener('dragover', function(evt){ dragover(evt); }, false);

                        dropZone.addEventListener('dragleave', function(evt){ dragover(evt); }, false);

                        dropZone.addEventListener('drop', function(evt){
                            evt.stopPropagation();
                            evt.preventDefault();

                            $(evt.target).removeClass('dagoverhoover');
                            var files = evt.dataTransfer.files; // FileList object.

                            for (var i = 0, f; f = files[i]; i++) {
                                // Loads first image file
                                if (f.type.match('image.*')) {
                                        var reader = new FileReader();
                                        reader.onload = (function(theFile) {
                                            return function (e) {
                                                imageCropper.cropit('imageSrc', e.target.result);
                                            };
                                        })(f);
                                        reader.readAsDataURL(f);

                                    break;
                                }
                            }

                        }, false);
                    }
                }

[scottcheng]

I like this. It's definitely a good use case of cropit.

However since I'd prefer to keep the issue list as a collection of tasks and this is not one, I will go ahead and close it. Please feel free to post your implementation on gist and/or your blog, which I believe serves the audience better as well. Thanks.