JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<script src="http://fineuploader.com/client/fileuploader.js" type="text/javascript"></script>
<div id="uploadFile"></div>

CSS

#uploadFile{width:300px; font-family:Helvetica; }

.qq-upload-button {background: #F3F3F3; height:15px; width:150px; padding:4px; text-align:center; font-weight:bold; color:#808080; border:1px solid #AAA; font-size:11px; }
.qq-upload-list{ background: #FFF;  }
.qq-upload-list li{ cursor:pointer; padding:4px; margin-bottom:3px; margin-top:3px; background:#F9F9F9; color:#CCC;}

.qq-upload-list li:hover{background:#F1F1F1;}
.qq-upload-drop-area{ background:#FAFAFA; text-align:center; border:1px solid #DDD; padding-top:15px; padding-bottom:15px; margin:4px; color:#CCC}

span.qq-upload-file{widht:100%;float:left;}

.qq-upload-file{ font-size:12px;  padding-left:50px; color:#888; font-weight:bold;}

.qq-upload-size{ font-size:10px;  padding-left:50px; color:#AAA; font-weight:bold;}

.qq-upload-failed-text {color:red;   padding-left:5px;  font-size:10px;  }

.qq-upload-cancel{font-size:10px; }
.qq-upload-list li img{padding-left:4px;padding-right:4px;vertical-align:middle;}
.qq-upload-list li img:hover{ /*background:#D20000;*/ }

JavaScript

$(document).ready(function() {
    
      var uploader = new qq.FileUploader({
       element: $('#uploadFile')[0],
       action: "http://localhost/FileUploaderSol/FileUplad.ashx",
       template:'<div class="qq-uploader">' + '<ul class="qq-upload-list"></ul>' + 
                 '<div class="qq-upload-drop-area"><span>Large os ficheiros</span></div>' +
                 '<div class="qq-upload-button">Adicionar Ficheiro</div>' +'</div>',
       fileTemplate: '<li>' +
                  '<span class="qq-upload-file"></span><br />' +
                  '<span class="qq-upload-size"></span>' +
                  '<span class="qq-progress-bar"></span>' +
                  '<span class="qq-upload-spinner"></span>' +
                  '<span class="qq-upload-failed-text">Failed</span>' +
                  '<a class="qq-upload-cancel" href="#">Cancel</a>' +                      
               '</li>',
          
onError: function(id, fileName, xhr) 
          {
              //alert(id);
              var fileItem = uploader._getItemByFileId(id);
             
              $('<img/>', {
                src:     'http://www.eionet.europa.eu/software/design/actionicons/delete.gif',
    title:   'Delete ', //+ fotos[f].Title,
    'class': 'icon_delete', // in quotes because class is a reserved js word
    click:   function( e ){
        // Everything here happens when you click the image.
        alert('delete - ' + id);
    }
}).appendTo(fileItem);
              
              fileItem.onclick = function( e ){
        alert('download - ' + id);
    }
              
          },         
      onComplete: function(id, fileName, responseJSON)
      {
          var fileItem = uploader._getItemByFileId(id);
          $(fileItem).attr('id');
      }
          
          

    });
});