Home/ Questions/Q 6691011
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:42:08+00:00

Excuse the question title, couldn’t think how to describe this.. Basically, using a few

  • 0

Excuse the question title, couldn’t think how to describe this..

Basically, using a few different scripts/tutorials, I have managed to get a working drag and drop, file upload feature together (for Firefox, Safari and Chrome users).

It works really well but I have a really simple but hard problem with the way the file name and file size are displayed.

Instead of getting this format:

<tr>
<th>File Name</th><th>100kb</th>
</tr>
<tr>
<td>File 1</td><td>100kb</td>
</tr>
<tr>
<td>File 2</td><td>145kb</td>
</tr>

I am getting this instead:

<tr>
<th>File Name</th><th>100kb</th>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td> ///// Annoying blank table row!!!
</tr>
<tr>
<td>File 1</td><td>100kb</td>
</tr>
<tr>
<td>File 2</td><td>145kb</td>
</tr>

This is happening somewhere in my Javascript I think, although I have never used <TBODY> before so could be this also. I did read docs regarding <TBODY> and by default, it should NOT affect my table layout.

This is my code:

<table width="100%" id="uploadInfoTbl">
    <tr>
      <th>File</th>
      <th>Size</th>
    </tr>
  <tbody id="uploadQueue">
    <tr class="uploadTemplate">
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<script>
createFileQueue : function(files)
{
  $('tbody#uploadQueue').find('tr').not('.uploadTemplate').remove();

  $(files).each(
    function(key, file) {
      var tr = $('tr.uploadTemplate').clone();

      tr.removeClass('uploadTemplate');
      tr.attr('id', 'file-' + key);

      if (file.type.match(new RegExp('/image.*/')) && FileReader) {
        // Displaying a thumbnail doesn't seem to work in Safari
        var img = document.createElement('img');
        img.file = value;
        img.classList.add('thumbnail');

        // tr.find('tr').eq(0).html(img);

        var reader = new FileReader();

        reader.onload = (function(img) {
          return function(e) {
            img.src = e.target.result;
          };
        })(img);

        reader.readAsDataURL(value);
      }

      tr.find('td').eq(0).html(file.name);
      tr.find('td').eq(1).html(dnd.getFileSize(file.size));

      $('tbody#uploadQueue').append(tr);
    }
  );
},
</script>

Can anybody see what is causing this extra <TR> to appear? The rest of my script I understand and can fix but I really don’t get this new HTML5 File API just yet and how to print the results from it.

Also, does anybody know how to reset the filenames and file sizes. I ask because after each upload, I drag more files to my drop-zone and the previous selected files are displayed, as well as the new ones, and keeps building up until I refresh the browser?

Many thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As @Gerben said, the “Annoying blank table row!!!” looks very similar to the tr.uploadTemplate you never remove in your script. Try changing your template to

    <tr class="uploadTemplate">
  <td>TEMPLATE</td>
  <td>TEMPLATE</td>
</tr>

    in order to confirm that.

    If you actually remove the template row somewhere and the blank row is indeed added by your JS, I’d start by adding console.log() calls in your file enumerator (function(key, file)) to see if it’s called one extra time. If it is, the problem is outside the code you posted — you have to check where files value comes from.

    • 0