Search code examples
jquerywordpressuploadify

Using Uploadify with Wordpress on Localhost - not loading

All, I've included the JS files in my Wordpress themes that I needed. Then I created the following page:

<?php
$js_path_uploadify = ABSPATH."wp-content/uploadify.swf";
$js_path_script = ABSPATH."wp-content/uploadify.php";
$cancel_path = ABSPATH."wp-content/cancel.png";
$check_path = ABSPATH."wp-content/check.php";
$uploads_path = ABSPATH."wp-content/uploads";
?>
<script type="text/javascript">
$(document).ready(function() {
  $('#custom_file_upload').uploadify({
    'uploader'  : '<?php echo $js_path_uploadify; ?>',
    'script'    : '<?php echo $js_path_script ; ?>',
    'cancelImg' : '<?php echo $cancel_path; ?>',
    'folder'    : '<?php echo $uploads_path; ?>',
    'auto'      : false,
    'multi'     : true,
    'fileExt'        : '*.jpg;*.gif;*.png',
    'fileDesc'       : 'Image Files (.JPG, .GIF, .PNG)',
    'buttonText': 'Add Files',
    'checkScript': '<?php echo $check_path; ?>',
    'displayData': 'speed',
    'onComplete': function(a, b, c, d, e){ alert(d);},
    'onAllComplete': function(event,data){
            //something here
     },
        'onError': function(event,data){
            //something here
        }
  });

  $("#upload_files").click(function(){
      alert("it is here");
    $('#custom_file_upload').uploadifyUpload();
  });
});
</script>

</head>
<body>
<div id="status-message">Select some files to upload:</div>
<input id="custom_file_upload" type="file" name="Filedata" />
<div id="error-message"></div>
<input type="button" id="upload_files" value="Upload Files">

When I do this it looks good but I get the following error when I check my console.log. The error is:

Not allowed to load local resource: file:///D:/My%20Documentsxampphtdocs%0Bendor_wordpress/wp-content/uploadify.swf

Any idea on what is wrong with this or how to fix it?

Thanks

Solution

  • You don't want to be using ABSPATH here.

    The error:

    Not allowed to load local resource: file:///D:/My%20Documentsxampphtdocs%0Bendor_wordpress/wp-content/uploadify.swf

    explains that you are trying to load that swf via your local file system. You don't want to do that. Instead, you want it to point to the location on your webserver.

    More importantly, you should not place the uploadify files directly into wp-content. They should, ideally, be placed in your theme's folder. I have changed the location of the the uploadify files in the code that follows. You can move them around if you want within the theme folder (make sure to update the variables accordingly!)

    <?php
$template_url = get_bloginfo('template_url');
$upload_dir = wp_upload_dir();

$js_path_uploadify = $template_url."uploadify/uploadify.swf";
$js_path_script = $template_url."uploadify/uploadify.php";
$cancel_path = $template_url."uploadify/img/cancel.png";
$check_path = $template_url."uploadify/check.php";
$uploads_path = $upload_dir['path'];
?>

    I've never used this script before. This is just a general guideline to follow and should help you further debug/solve your problem. Here is more about wp_upload_dir and bloginfo should you need it.