• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
jquery is not working with blueimp upload

#1
[eluser]bill19[/eluser]
Hi everyone,

I am trying to build an upload page using the blueimp jquery upload plugin

https://github.com/blueimp/jQuery-File-U...odeIgniter

The file upload is working, but the jquery/ajax component is not. I am not experienced with javascript/Jquery, Is there any obvious problems in this code preventing jquery from working?

Thank you,

Bill




Here is the controller:

Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Upload extends CI_Controller {

public function __construct()
{
  parent::__construct();
  $this->load->helper(array('form', 'url'));
}

public function index()
{
  $this->load->view('form', array('error' => ''));
}

public function do_upload()
{
  $config['upload_path'] = FCPATH.'uploads/';
  $config['allowed_types'] = 'gif|jpg|png|jpeg';
  $config['max_size'] = '36000';
  $config['max_width'] = '10240';
  $config['max_height'] = '76800';

  $this->load->library('upload', $config);

  if ( ! $this->upload->do_upload())
  {
   $error = array('error' => $this->upload->display_errors());

   $this->load->view('form', $error);
  }
  else
  {
   $data['upload_data'] = $this->upload->data();
   $this->load->view('success', $data);
  }
}
}
// End of file upload

Here is the view;

Code:
<html>
<head>
<title>Upload Form</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="http://dl.dropbox.com/u/8626323/dnd/jquery.fileupload-ui.css">
<style>
body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 20px;
}
</style>
</head>
<body>
  <?php echo $error;?>
  <?php echo form_open_multipart('upload/do_upload', array('id' => 'file_upload')); ?>
   <input type="file" name="userfile" multiple />
   <button>Upload</button>
   <div>Upload files</div>
  &lt;?php echo form_close(); ?&gt;
  <table id="files"></table>
   [removed][removed]
   [removed][removed]
   [removed][removed]
   [removed][removed]
   [removed]
   /*global $ */
   $(function () {
    $('#file_upload').fileUploadUI({
    uploadTable: $('#files'),
    downloadTable: $('#files'),
    buildUploadRow: function (files, index) {
    return $('<tr><td>' + files[index].name + '<\/td>' +
     '<td class="file_upload_progress"><div><\/div><\/td>' +
     '<td class="file_upload_cancel">' +
     '<button class="ui-state-default ui-corner-all" title="Cancel">' +
     '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
     '<\/button><\/td><\/tr>');
    },
    buildDownloadRow: function (file) {
     return $('<tr><td>' + file.name + '<\/td><\/tr>');
    }
    });
   });
   [removed]
&lt;/body&gt;
&lt;/html&gt;

#2
[eluser]InsiteFX[/eluser]
I do not see you loading jQuery before the UI!
Code:
// load jQuery here!
&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" id="theme"&gt;

#3
[eluser]bill19[/eluser]
Thanks InsiteFX,

1 slight problem. I'm not sure how to load jquery. From reading on the forums the closest I've got is http://ellislab.com/forums/viewthread/217327/#1003674 , where they suggest:


Code:
<skript src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></skript>

I put this where you suggested but its still not working.

What should I do now?

Thanks,

Bill



#4
[eluser]InsiteFX[/eluser]
Code:
// replace the $ with s in the script tags
<$cript src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></$cript>

Also you need to load the jqueryui/1.8.9

Download - jQuery 1.7.2

Download - jQuery UI 1.8.20

#5
[eluser]weboap[/eluser]
add to @InsiteFX

use Firefox firebug or chrome web developer console to find where your code is going down and post the error with the relevant code. that will help pinpoint the issue quicker.

Note: @InsiteFX posted the line to insert but changed the script tag due to the forum sanitation, check that you changed the tag in your code to script.

#6
[eluser]bill19[/eluser]
error

#7
[eluser]bill19[/eluser]
Sorry for the delay in getting back to you,

My view now looks like:

Code:
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Upload Form&lt;/title&gt;
        <skript src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javaskript" charset="utf-8"></skript>
        <skript  type="text/javaskript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></skript>
&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" id="theme"&gt;
&lt;link rel="stylesheet" href="http://dl.dropbox.com/u/8626323/dnd/jquery.fileupload-ui.css"&gt;
&lt;style&gt;
body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 20px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;?php echo $error;?&gt;
  &lt;?php echo form_open_multipart('upload/do_upload', array('id' => 'file_upload')); ?&gt;
   &lt;input type="file" name="userfile" multiple /&gt;
   <button>Upload</button>
   <div>Upload files</div>
  &lt;?php echo form_close(); ?&gt;
  <table id="files"></table>
   <skript src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></skript>
   <skript src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></skript>
   <skript src="../jquery.fileupload.js"></skript>
   <skript src="../jquery.fileupload-ui.js"></skript>
   <skript>
   /*global $ */
   $(function () {
    $('#file_upload').fileUploadUI({
    uploadTable: $('#files'),
    downloadTable: $('#files'),
    buildUploadRow: function (files, index) {
    return $('<tr><td>' + files[index].name + '<\/td>' +
     '<td class="file_upload_progress"><div><\/div><\/td>' +
     '<td class="file_upload_cancel">' +
     '<button class="ui-state-default ui-corner-all" title="Cancel">' +
     '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
     '<\/button><\/td><\/tr>');
    },
    buildDownloadRow: function (file) {
     return $('<tr><td>' + file.name + '<\/td><\/tr>');
    }
    });
   });
   </skript>
&lt;/body&gt;
&lt;/html&gt;

Using firebug, I'm getting the following errors when the form loads:

Quote:"NetworkError: 404 Not Found - http://localhost/ionauth1/index.php/jquery.fileupload.js"
jquery...load.js
"NetworkError: 404 Not Found - http://localhost/ionauth1/index.php/jquery.fileupload-ui.js"
jquery...d-ui.js
"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/8626323/dnd/jque...oad-ui.css"
jquery...-ui.css
"NetworkError: 404 Not Found - http://localhost/ionauth1/index.php/jquery.fileupload.js"
jquery...load.js
"NetworkError: 404 Not Found - http://localhost/ionauth1/index.php/jquery.fileupload-ui.js"

It seems that the view is searching locally for the CDNs for some reason. How can I fix this?

Bill

#8
[eluser]bill19[/eluser]
As I look at this further, I'm realizing that the jquery files that caused an error, ARE in fact local.

I've come across an additional github page: https://github.com/blueimp/jQuery-File-U...gniter-2.1.

In it within the view's head there is the following:

Code:
&lt;link rel="stylesheet" type="text/css" media="screen" href="http://url/assets/css/bootstrap.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" media="screen" href="http://url/assets/css/fileupload/bootstrap-image-gallery.min.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" media="screen" href="http://url/assets/css/fileupload/jquery.fileupload-ui.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" media="screen" href="http://url/assets/css/jquery-ui.css"/&gt;
          
          <skript  src="http://code.jquery.com/jquery-1.7.min.js" ></skript>
          <skript  type="text/javaskript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></skript>

          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/tmpl.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/load-image.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/canvas-to-blob.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/bootstrap.min.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/bootstrap-image-gallery.min.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/jquery.iframe-transport.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/jquery.fileupload.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/jquery.fileupload-ip.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/jquery.fileupload-ui.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/locale.js" ></skript>
          <skript  type="text/javaskript" src="http://url/assets/js/fileupload/main.js" ></skript>
     &lt;/head&gt;


I just realized that I have these files located at C:\wamp\www\ionauth1\assets\js\fileupload\...


It does not appear that this is being found by the script however

#9
[eluser]InsiteFX[/eluser]
All your scripts src= and href= needs to be re-writen!
Code:
src="&lt;?php echo base_url('assets/js/fileupload/tmpl.js'); ?&gt;" >
href="&lt;?php echo base_url('assets/js/fileupload/tmpl.js'); ?&gt;" >

This will depend on where you placed your assets folder.

Show your directory structure

Should be like this
Code:
application
assets
-- css
-- images
-- img
-- js
system
index.php

#10
[eluser]bill19[/eluser]
Thanks for looking at it InsiteFX,

The directory structure is as you laid out.

using http://philsturgeon.co.uk/blog/2009/09/A...e-BASE-tag

I rewrote the form head as follows:

Code:
&lt;head&gt;
        
        &lt;base href="&lt;?=base_url();?&gt;"&gt;
        
&lt;link rel="stylesheet" type="text/css" media="screen"  href="&lt;?php echo base_url('assets/css/bootstrap.css'); ?&gt;" &gt;
&lt;link rel="stylesheet" type="text/css" media="screen" href="&lt;?php echo base_url('assets/css/fileupload/bootstrap-image-gallery.min.css'); ?&gt;"/&gt;
&lt;link rel="stylesheet" type="text/css" media="screen"  href="&lt;?php echo base_url('assets/css/fileupload/jquery.fileupload-ui.css'); ?&gt;"/&gt;
&lt;link rel="stylesheet" type="text/css" media="screen" href="&lt;?php echo base_url('assets/css/jquery-ui.css'); ?&gt;"/&gt;

          <skript  src="http://code.jquery.com/jquery-1.7.min.js" ></skript>
          <skript  type="text/javaskript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/tmpl.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/load-image.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/canvas-to-blob.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/bootstrap.min.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/bootstrap-image-gallery.min.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/jquery.iframe-transport.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/jquery.fileupload.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/jquery.fileupload-ip.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/jquery.fileupload-ui.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/locale.js" ></skript>
          <skript  type="text/javaskript" src="assets/js/fileupload/main.js" ></skript>
     &lt;/head&gt;

The program appears to be recognizing the jquery skripts, although I'm not sure about the css.

Also I am getting the following error in firebug:


Quote:document.getElementById(a) is null
at
Quote:http://localhost/upload1/assets/js/fileupload/tmpl.js


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.