1

Im trying to make a video preview script. I want one function for both drag and drop and files selected by an input type="file" element. Here is the function:

                function FileHandler(files){
                    for(var i = 0; i < files.length; i++){

                        file = files[i];

                        var reader = new FileReader();
                        reader.onload = function(evt){
                            var VideoSpan = document.createElement('span');
                            var Video = document.createElement('video');
                            VideoSpan.classList.add('VideoPreviewSpaner');
                            Video.classList.add('VideoPreview');
                            Video.controls="controls";
                            Video.src = evt.target.result
                            VideoSpan.appendChild(Video);
                            document.getElementById('VideoWindow').appendChild(VideoSpan);
                            document.getElementById('VideoWindow').style.display = "block";
                        }
                        reader.readAsDataURL(file);
                    }
                }

And then the

<input type="file" id="OpenFileDialog" multiple onchange="FileHandler(this.files)">

And the dnd handler:

            function d(e){
                e.stopPropagation();
                e.preventDefault();
                files = e.dataTransfer.files;
                FileHandler(files);
            }
            document.getElementById('droparea').addEventListener('drop',d,false);

I really can't see whats wrong the reader.onload is never called! It would be great with some help!

1 Answer 1

2

Got here when I faced similar issue.

Try to implement onerror and you will find Google Chrome throwing a "Security error". The same works in Firefox(7.0.1) though.

Its due to the local file security restriction Google Chrome has imposed upon the developers. This local files security restriction really takes a toll on quick dev-testings!

Put the HTML on a web-server, the issue is resolved. No web-server? try on Firefox! --allow-file-access-from-files option never really worked for me!

Best, Sridhar

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.