10
Ich versuche, Verzeichnis-Uploads mit jQuery Datei-Upload-Plugin von Blueimp zu implementieren. Rails 4 ist mein Backend, und für Anhänge verwende ich Carrierwave.Implementiere Verzeichnis-Uploads mit jQuery Datei-Upload und Rails
Das Problem ist jetzt, dass das jquery-Plugin den Ordner, den ich hochlade, nicht erkennen kann. Ich habe bereits den Parameter webkitdirectory im Eingabefeld übergeben. Kann mir jemand dabei helfen?
Vielen Dank im Voraus.
Hier ist der jQuery Datei-Upload-Code in application.js:
$('#fileupload').fileupload({
dataType: "script",
sequentialUploads: true,
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function(e, data) {
data.context = $(tmpl("template-upload", data.files[
0]))
data.context.addClass('working');
//$('.upload-status-box').addClass('working');
$('#Upload-Bar').append(data.context);
$('.upload-status-box').show();
// Listen for clicks on the cancel button
data.context.find('span.cancel-upload').click(
function() {
jqXHR.abort();
data.context.fadeOut(function() {
data.context.remove();
});
count = count - 1;
removeUploadStatusBoxOnCompletion();
});
var jqXHR = data.submit();
count = count + 1;
},
progress: function(e, data) {
if (data.context) {
$('.upload-status-box').show();
progress = parseInt((data.loaded/data.total) *
100);
var uploadMeta = parseInt(data.loaded/1000000) +
"/" + parseInt(data.total/1000000) +
" MB - " + progress + "%";
data.context.find('.progress-bar').css('width',
progress + '%');
data.context.find('.status').text(uploadMeta);
}
},
done: function(e, data) {
console.log(
'Your files have been uploaded successfully!'
);
// alert('Your files have been uploaded successfully! Depending on the file size, you might have to wait for a while before performing any actions.');
count = count - 1;
data.context.removeClass('working');
data.context.find('button.cancel-upload').hide();
removeUploadStatusBoxOnCompletion();
}
});
Und hier ist mein Eingabefeld:
<div class="awesome-file-uploads" id="inline-upload-status">
<%= form_for [myfolder, Myfile.new], html: { multipart: true, :id => "fileupload" } do |f| %>
<%= f.file_field :attachment, multiple: true, id: "fileinput", style: "display:none;", "webkitdirectory"=> "", "directory"=> "" %>
<%= f.hidden_field :myfolder_parent_id, value: myfolder.id %>
<% end %>
Hier ist der Code für das Hochladen und Verarbeiten der Dateien in der Ordner:
$('#folderupload').change(function(e) {
e.preventDefault();
NProgress.done();
var items = e.target.files;
var paths = ""; //
// var myfolder_id = $(this).parent();
for (var i=0, file; file=items[i]; i++) {
paths += file.webkitRelativePath+"###";
} //
// uploadFiles(items, myfolder_id.data('inside'));
$("#paths").val(paths);
$("#folderupload").submit(); //
});
function uploadFiles(items, myfolder_id){
xhr = new XMLHttpRequest();
data = new FormData();
paths = "";
var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');
data.append('authenticity_token', AUTH_TOKEN);
// Set how to handle the response text from the server
xhr.onreadystatechange = function(ev){
console.debug(xhr.responseText);
};
for (var i=0, file; file=items[i]; i++) {
paths += file.webkitRelativePath+"###";
data.append(i, file);
}
data.append('paths', paths);
xhr.open('POST', "/myfolders/"+myfolder_id+"/create_from_folder", true);
xhr.send(this.data);
}
Postleitzahl oder wir keine Ahnung haben, was Sie zu tun versuchen ... – bpeterson76
Tut mir leid. Ich habe den Code für dich hinzugefügt! –
Kannst du erklären, was das jquery-Plugin nicht in der Lage ist, den Ordner, den ich hochlade, zu erkennen? – janfoeh