How to display file name before the upload?

Question

I am using blueimp/jQuery-File-Upload and I am trying to display names of the files before the upload. I was following this tutorial and for now everything is working as expected. The only thing is I am trying to display a file name before the file is uploaded. How can I accomplish that? I would like to show progress bar before file starts uploading.

I have changed the upload script a little bit from that tutorial into this so upload starts with user's click on button:

    jQuery ->
  $('#new_avatar').fileupload
    dataType: "script"
    add: (e, data) ->
      file = data.files[0]
        data.context = $("#button1").click( ->
          data.context = $(tmpl("template-upload", file))
          $('#new_avatar').append(data.context)
          data.submit()
        )
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

And I have this as a script when file upload starts:

<script id="template-upload" type="text/x-tmpl">
  <div class="upload">
    {%=o.name%}
    <div class="progress">
      <div class="bar" style="width: 0%">
      </div>
    </div>
  </div>
</script>

I guess I need to to something inside add part of the fileupload script but I am not sure what. Thank you for your hints and suggestions :)

Answer 1

You can show the file name using file.name as

alert(file.name + "Will start uploading")