Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery File Upload Does Not Display Preview

The jQuery File Upload plugin does NOT currently display the selected file. Does anyone know how I can troubleshoot this issue?

I've implemented 'custom' templates (see below); note I do not need to display previously uploaded material, hence there is no download template.

I have already checked (via logging) that the add callback is being called and that the uploadTemplate function is being called and returning expected values -- for some reason those values are simply not being appended to the presentation table.

$('#fileupload').fileupload(
  acceptFileTypes: /(\.|\/)(gif)$/i
  uploadTemplateId: null
  downloadTemplateId: null
  uploadTemplate: (obj) ->
    rows = $()
    $.each(obj.files, (idx, file) ->
      temp = "<tr class='template-upload fade'><td class='preview'><span class='fade'></span></td><td class='name'></td>'<td class='size'></td>"
      if (file.error)
        temp += "<td class='error' colspan='2'></td>"
      else
        temp += "<td><div class='progress'><div class='bar' style='width:0%;'></div></div></td><td class='start'><button>Start</button></td>"
      temp += "<td class='cancel'><button>Cancel</button></td></tr>"
      row = $(temp)
      row.find('.name').text(file.name)
      row.find('.size').text(obj.formatFileSize(file.size))
      rows = rows.add(row)
      )
    return rows
  downloadTemplate: ->
    return $()
)

UPDATE 10/16/2012 I added the following to the initialization of fileupload:

  process: [{action: 'load', fileTypes: /^image\/(gif|jpeg|png)$/, maxFileSize: 2000000}, {action: 'resize', maxWidth: 1920, maxHeight: 1200, minWidth: 800, minHeight: 600}, {action: 'save'}]

Which does initiate the attempt to load the image, but unfortunately, the attempt results in the following error. Does anyone know what is the cause and/or how to solve it?

Uncaught TypeError: undefined (loadImage) is not a function jquery.fileupload-fp.js:87

like image 579
Ari Avatar asked Oct 15 '12 17:10

Ari


People also ask

How do you preview an image before it is uploaded using jquery?

First, we have a division element that contains the “img” tag. Using Jquery, we will change the “src” attribute of the “img” tag on upload to preview the image. The second element is the “input” tag. It is essential to specify type = “file” in this context.

How do I display an image before uploading HTML?

The most efficient way would be to use URL. createObjectURL() on the File from your <input>. Pass this URL to img. src to tell the browser to load the provided image.


1 Answers

The problem was the order in which the dependencies were loaded; Load Image needs to be loaded before the other core dependencies.

like image 106
Ari Avatar answered Sep 30 '22 13:09

Ari