Databases
StackOverflow2013
Postsdbo
POCan someone explain how to implement the jQuery File Upload plugin?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan someone explain how to implement the jQuery File Upload plugin?
    primarykey
    data
    text
    <p><h2><em>EDIT:</em></h2> This still seems to be getting traffic so I'll explain what I ended up doing. I eventually got the plugin working by following Subrat's tutorial, which is the accepted answer. However, jQuery File Upload is a real hassle, and if you're looking for a simple file upload plugin, I would highly recommend <a href="http://www.uploadify.com" rel="nofollow noreferrer">Uploadify</a> (thanks, CORSAIR!). As an answer pointed out, it is only free for non-commercial use.</p> <h1>Background</h1> <p>I'm trying to use blueimp's <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow noreferrer">jQuery File Upload</a> to allow users to upload files. <strong>Out of the box it works perfectly</strong>, following the setup instructions. But to use it practically on my website, I want to be able to do a couple of things:</p> <ul> <li>Include the uploader on any of my existing pages</li> <li>Change the directory for uploaded files</li> </ul> <p>All the files for the plugin are located in a folder under the root.</p> <h1>I've tried...</h1> <ul> <li>Moving the demo page into the root and updating the paths for the necessary scripts</li> <li>Changing the 'upload_dir' and 'upload_url' options in the UploadHandler.php file as suggested <a href="https://github.com/blueimp/jQuery-File-Upload/issues/1190" rel="nofollow noreferrer">here</a>.</li> <li>Changing the URL in the second line of the demo javascript</li> </ul> <p>In all cases, the preview shows, and the progress bar runs, but the files fail to upload, and I get this error in the console: <code>Uncaught TypeError: Cannot read property 'files' of undefined</code>. I don't understand how all the parts of the plugin work which is making it difficult to debug.</p> <h1>Code</h1> <p>The javascript in the demo page:</p> <pre><code>$(function () { 'use strict'; // Change this to the location of your server-side upload handler: var url = 'file_upload/server/php/UploadHandler.php', uploadButton = $('&lt;button/&gt;') .addClass('btn') .prop('disabled', true) .text('Processing...') .on('click', function () { var $this = $(this), data = $this.data(); $this .off('click') .text('Abort') .on('click', function () { $this.remove(); data.abort(); }); data.submit().always(function () { $this.remove(); }); }); $('#fileupload').fileupload({ url: url, dataType: 'json', autoUpload: false, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxFileSize: 5000000, // 5 MB // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), previewMaxWidth: 100, previewMaxHeight: 100, previewCrop: true }).on('fileuploadadd', function (e, data) { data.context = $('&lt;div/&gt;').appendTo('#files'); $.each(data.files, function (index, file) { var node = $('&lt;p/&gt;') .append($('&lt;span/&gt;').text(file.name)); if (!index) { node .append('&lt;br&gt;') .append(uploadButton.clone(true).data(data)); } node.appendTo(data.context); }); }).on('fileuploadprocessalways', function (e, data) { var index = data.index, file = data.files[index], node = $(data.context.children()[index]); if (file.preview) { node .prepend('&lt;br&gt;') .prepend(file.preview); } if (file.error) { node .append('&lt;br&gt;') .append(file.error); } if (index + 1 === data.files.length) { data.context.find('button') .text('Upload') .prop('disabled', !!data.files.error); } }).on('fileuploadprogressall', function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); }).on('fileuploaddone', function (e, data) { $.each(data.result.files, function (index, file) { var link = $('&lt;a&gt;') .attr('target', '_blank') .prop('href', file.url); $(data.context.children()[index]) .wrap(link); }); }).on('fileuploadfail', function (e, data) { $.each(data.result.files, function (index, file) { var error = $('&lt;span/&gt;').text(file.error); $(data.context.children()[index]) .append('&lt;br&gt;') .append(error); }); }).prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); }); </code></pre> <p><hr> I'm surprised by the lack of documentation; it seems like it should be a simple thing to change. I would appreciate if someone could explain how to do this.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSameer
    1. USAusten
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan someone explain how to implement the jQuery File Upload plugin?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCan someone explain how to implement the jQuery File Upload plugin?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCan someone explain how to implement the jQuery File Upload plugin?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COGood question format. Nice to see organization.
      singulars
      1. POCan someone explain how to implement the jQuery File Upload plugin?
      1. USjdero
    2. COprint 'e' and 'data' in the console right before the error line, what are the values?
      singulars
      1. POCan someone explain how to implement the jQuery File Upload plugin?
      1. USjohn 4d5
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload