Загрузка файла Dropzone показывает Успех, но физический файл отсутствует
Я использую Dropzone.js для загрузки нескольких файлов.
Все отлично работает и отлично сохраняется в базе данных. Но когда я отображаю все изображения, я вижу, что некоторые изображения (физический файл) никогда не сохранялись в папке ресурсов.
HTML-код Dropzone:
<div id="actions" class="row">
<div class="col-md-6 mb10">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button dz-clickable"><i class="glyphicon glyphicon-plus"></i><span>Add files</span></span>
</div>
<div class="col-md-6 text-right upload-files">
<%= submit_tag "Upload Files", class: "btn btn-success start" %>
<button aria-hidden="true" class="btn btn-info" onclick="window.close();">Close</button>
</div>
<div class="col-md-12">
<!-- The global file processing state -->
<span class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="opacity: 0;">
<div class="progress-bar progress-bar-success" style="width: 100%;" data-dz-uploadprogress=""></div>
</div>
</span>
</div>
</div>
<div class="row">
<!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
<div class="table table-striped" class="files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
Dropzone Part JS:
// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "/asset_uploads", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
paramName: "file",
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
});
myDropzone.on("addedfile", function(file) {
// Hookup the start button
console.log('addedfile')
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
console.log('ADDED')
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
// document.querySelector("#actions .cancel").onclick = function() {
// myDropzone.removeAllFiles(true);
// };
Ссылка Ссылка: http://www.dropzonejs.com/bootstrap.html
<div class="row">
<% AssetUpload.all.each do |psau| %>
<div class="col-md-1">
<img style="height: 75px;" src="<%= psau.asset_path_url %>" class="img-responsive" data-rel="prettyPhoto" alt="">
</div>
<% end %>
</div>
ОБНОВЛЕНИЕ:
По какой-то причине, когда я отправляю несколько файлов в контроллере для сохранения, он пропускает какой-то файл в процессе, а когда я перезаписываю его рекурсивным методом, он отлично работает...
def retry_image_upload(psau, file, counter)
psau.update(asset_path: file, upload_retry_counter: counter)
if AssetUpload.find_by(id: psau.id).asset_path.file.exists?
render json: {'success': true}
else
counter = counter + 1
if counter <= 5
retry_image_upload(psau, file, counter)
else
AssetUpload.find_by(id: psau.id).destroy
render json: {'success': false}
end
end
end