Code works in JSfiddle, but stops on my webpage

Question

Sorry, not quite the same as previously asked versions of this. I've tried those solutions to no avail.

I have worked with some folks to iron out some issues with a snippet we were working on. Finally got it working on JSfiddle how we need it, but for whatever reason, it's not working on a plain HTML site. The content looks to load, but the preview doesnt work after choosing an image.

Here is the JSfiddle working here: http://jsfiddle.net/ELcf6/568/

Here is all of the code pieces compiled into a single page for testing. This is the example that seems to not work. Does JSfiddle inject any pre-requisites that I might be missing?

Any help in figuring this out would be greatly appreciated.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var imageLoader = document.getElementById('filePhoto');
        imageLoader.addEventListener('change', handleImage, false);
    
    function handleImage(e) {
      var filetype = imageLoader.files[0].type;
        var reader = new FileReader();
        reader.onload = function (event) {
            if(filetype.indexOf("image") > -1){
            $('.uploader img').attr('src',event.target.result);
            }else if(filetype.indexOf("video") > -1){
            
            $('.uploader video')[0].src =reader.result; 
            }
            
        }
        reader.readAsDataURL(e.target.files[0]);
    }
    </script>
    <style type="text/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,.uploader video{
        position:absolute;
        width:302px;
        height:352px;
        top:-1px;
        left:-1px;
        z-index:1;
        border:none;
        object-fit:cover;
    }
    </style>
    <title></title>
    </head>
    
    <body>
      <div class="uploader" onclick="$('#filePhoto').click()">
        click here or drag here your images for preview and set userprofile_picture data
        <img src=""/>
        <video></video>
        <input type="file" name="userprofile_picture"  id="filePhoto" />
      </div>
    </body>
    </html>

What errors do you get in the console on your site? Note that also your code is being wrapped in an onload handler on jsFiddle. Are you doing the same on your site? — j08691, Aug 01 '17 at 20:22
The only error was related to an unknown variable. Moving the script down the page like Scott recommended below resolved that. — fbords, Aug 01 '17 at 20:58
That's one way to resolve it. The other is to wrap the code in a document.ready or window.load call, like jQuery does by default. You just didn't see that that was the default. Loading the code at the end of the page is another option in jsFiddle. — j08691, Aug 01 '17 at 20:59

score 0 · Accepted Answer · answered Aug 01 '17 at 20:23

Your script is running before the DOM has loaded and that's why you are getting the "Cannot read property 'addEventListener' of null" error.

Move the script so that it is just before the close of the body tag.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
        <html>
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/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,.uploader video{
            position:absolute;
            width:302px;
            height:352px;
            top:-1px;
            left:-1px;
            z-index:1;
            border:none;
            object-fit:cover;
        }
        </style>
        <title></title>
        </head>
        
        <body>
          <div class="uploader" onclick="$('#filePhoto').click()">
            click here or drag here your images for preview and set userprofile_picture data
            <img src=""/>
            <video></video>
            <input type="file" name="userprofile_picture"  id="filePhoto" />
          </div>
          
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            var imageLoader = document.getElementById('filePhoto');
            imageLoader.addEventListener('change', handleImage, false);
        
        function handleImage(e) {
          var filetype = imageLoader.files[0].type;
            var reader = new FileReader();
            reader.onload = function (event) {
                if(filetype.indexOf("image") > -1){
                $('.uploader img').attr('src',event.target.result);
                }else if(filetype.indexOf("video") > -1){
                
                $('.uploader video')[0].src =reader.result; 
                }
                
            }
            reader.readAsDataURL(e.target.files[0]);
        }
        </script>
          
        </body>
        </html>

Thank you Scott. I had a feeling it was something like that. I don't suppose you would have any idea how to edit the above script to have the video play would you? The script is a drag/drop previewer for images and videos. It does this, but it will only show the first frame of a video. I'd like to either have it appear to be showing a sample. either a short couple of seconds, animated thumbnails showing parts of the video or some other method to differentiate it from an image. Thanks again — fbords, Aug 01 '17 at 20:54
@fbords See [this](https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery) for details on that. — Scott Marcus, Aug 02 '17 at 00:04

Code works in JSfiddle, but stops on my webpage

1 Answers1