CodeIgniter Forums
jquery is not working with blueimp upload - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: CodeIgniter Archived (from EllisLab) (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: jquery is not working with blueimp upload (/thread-51994.html)

Pages: 1 2


jquery is not working with blueimp upload - El Forum - 05-25-2012

[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-Upload/wiki/How-to-use-the-plugin-with-CodeIgniter

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;



jquery is not working with blueimp upload - El Forum - 05-25-2012

[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;



jquery is not working with blueimp upload - El Forum - 05-25-2012

[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





jquery is not working with blueimp upload - El Forum - 05-25-2012

[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



jquery is not working with blueimp upload - El Forum - 05-25-2012

[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.


jquery is not working with blueimp upload - El Forum - 05-28-2012

[eluser]bill19[/eluser]
error


jquery is not working with blueimp upload - El Forum - 05-28-2012

[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/jquery.fileupload-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



jquery is not working with blueimp upload - El Forum - 05-28-2012

[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-Upload/wiki/jQuery-File-Upload-6.5-with-CodeIgniter-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


jquery is not working with blueimp upload - El Forum - 05-28-2012

[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



jquery is not working with blueimp upload - El Forum - 05-29-2012

[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/Asset-handling-in-CodeIgniter-with-the-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