Как использовать предварительные изображения, созданные при загрузке файла blueimp?

Question

Я использую jquery-файл-upload blueimp успешно в угловом формате с java-контентом. Он правильно загружает POST-запрос для каждого файла. Встроенный просмотр миниатюр из jquery.fileupload-image.js появляется, когда файл выбран, но исчезает по завершении.

Я не могу сохранить свои собственные сгенерированные эскизы на моем сервере, поэтому мне было интересно, могу ли я просто вставлять эти превью. Как мне показать эти превью?

Передняя часть (в нг-повтор):

 <td data-ng-switch data-on="!!file.thumbnailURL"> 
     <div class="preview" data-ng-switch-when="true"> 
//shows when upload complete.. unsure what to put here 
     <div class="previewImage"></div> 
     </div> 
     <div class="preview" data-ng-switch-default data-file-upload-preview="file"> 
//already shows generated preview before upload finishes</div> 
    </td> 

И я считаю, что мне нужно сделать что-то вроде этого в контроллере:

//Listen to upload library for successful upload 
     $scope.$on('fileuploaddone', function(e,data){ 
      if (data.files[0].preview){ 
       //inject preview somehow to DOM's .previewImage? 
      } 
     }) 

Answer 1

Я был в состоянии отображать передний конец генерируется предварительный эскиз, делая

HTML:

<img id="preview-image" width="auto" height="auto" alt=""></img> 

Контроллер:

$scope.$on('fileuploadprocessalways', function(e, data){ 
       if (data.files[0].preview){ 
        var canvas = data.files[0].preview; //grab the preview 
        var dataURL = canvas.toDataURL(); //grab the url 
        $("#preview-image").css("background-image", 'url(' + dataURL +')'); //give it to DOM 
        $("#preview-image").css("height", canvas.height); 
        $("#preview-image").css("width", canvas.width); 
        console.log("Injecting canvas with dimensions: "+canvas.width+"x"+canvas.height); 
       } 

     });