Login

05-25-2012, 01:34 PM

[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:
&lt;?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:
&lt;html&gt;

 &lt;head&gt;

 &lt;title&gt;Upload Form&lt;/title&gt;

 &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>

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

05-25-2012, 02:49 PM

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

05-25-2012, 09:05 PM

[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

05-25-2012, 09:37 PM

[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

05-25-2012, 09:45 PM

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

05-28-2012, 10:45 AM

[eluser]bill19[/eluser]
error

05-28-2012, 10:50 AM

[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/jque...eupload.js"
jquery...load.js
"NetworkError: 404 Not Found - http://localhost/ionauth1/index.php/jque...load-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/jque...eupload.js"
jquery...load.js
"NetworkError: 404 Not Found - http://localhost/ionauth1/index.php/jque...load-ui.js"

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

Bill

05-28-2012, 11:21 AM

[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

05-28-2012, 01:19 PM

[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

05-29-2012, 07:40 AM

[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