Ticket #11460: keep-files.html

File keep-files.html, 1.6 KB (added by Piotr Jasiun, 6 years ago)
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <title>Keep references to droped/pasted files</title>
5        <meta charset="utf-8">
6        <style type="text/css">
7                #droparea {
8                        width: 500px;
9                        height: 300px;
10                        background: grey;
11                }
12        </style>
13</head>
14<body>
15        <div id="droparea" contenteditable="true">
16                Drop here
17        </div>
18
19        <script>
20                var droparea = document.getElementById( 'droparea' ),
21                        files;
22
23                droparea.ondrop = dataInputHandler;
24                droparea.onpaste = dataInputHandler;
25
26                function dataInputHandler( evt ) {
27                        var evt = evt || window.event;
28
29                        files = evt.dataTransfer ? evt.dataTransfer.files : // Drop
30                                        evt.clipboardData && evt.clipboardData.items ? [ evt.clipboardData.items[0].getAsFile() ] : // Paste Chrome
31                                        evt.clipboardData ? evt.clipboardData.files     : // Paste Firefox
32                                        window.clipboardData ? window.clipboardData.files : // Paste IE
33                                        undefined;
34
35                        setTimeout( handleFiles, 1000 );
36
37                        droparea.innerHTML = 'Wait for it!';
38
39                        evt.preventDefault();
40                        evt.stopPropagation();
41                        return false;
42                };
43
44                droparea.ondragover = function ( evt ) {
45                        var evt = evt || window.event;
46
47                        evt.preventDefault();
48                        evt.stopPropagation();
49                        return false;
50                };
51
52                function handleFiles() {
53                        if ( !files || !files.length ) {
54                                droparea.innerHTML = 'No files :(';
55                                return;
56                        }
57
58                        droparea.innerHTML = '';
59
60                        for (var i = 0; i < files.length; i++) {
61
62                                var reader = new FileReader();
63
64                                reader.onload = function( evt ) {
65                                        var img = document.createElement( 'img' );
66                                        img.src = evt.target.result;
67                                        img.width = 100;
68                                        img.height = 100;
69
70                                        droparea.appendChild( img );
71                                }
72
73                                reader.readAsDataURL( files[ i ] );
74                        }
75                }
76        </script>
77</body>
78</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy