thefreeman
Goto Top

JqXHR , ajax blob-header entfernen bei Benutzung von blueimp jquery.fileupload.js und mini-ajax-file-upload-form

Hallo zusammen,

Ich benutze folgende Scripts für mein File-Upload-GUI:
http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/
https://github.com/blueimp/jQuery-File-Upload

Mein Problem liegt darin, dass beim Senden eines chunks oberhalb der binären Daten auch noch ein Header mitgesendet wird, der folgendermasse aussieht:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 25861752531267
Content-Disposition: form-data; name="upl"; filename="1.rar"
Content-Type: application/octet-stream

Diesen Header möchte ich gerne entfernen.
Dazu habe ich schon ne Menge Ansätze im Netz gefunden, die aber alle nichts geholfen haben.

Hat hierzu bitte jemand eine Idee? Ich sitze schon ein paar Tage an dem Problem und komme einfach nicht weiter.

Dazu habe nun folgende options (Ausschnitt):
$('#upload').fileupload({

This element will accept file drag/drop uploading
dropZone: $('#drop'),

type : GLOBAL_FORM_METHOD,
method : "post",
Type of data-send-method
dataType : "json", Type of data to recieve from api-call
maxChunkSize: GLOBAL_CHUNK_SIZE,
multipart : 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)
{
var reader = new FileReader();
var file = data.files;
var jqXHR;

var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><div class="msg"></div><span></span></li>');

Append the file name and file size
tpl.find('p')
.text( file.name )
.append('' + formatFileSize( file.size ) + '');

Add the HTML to the UL element
data.context = tpl.appendTo(ul);

Initialize the knob plugin
tpl.find('input').knob();

Listen for clicks on the cancel icon
tpl.find('span').click(function()
{
if( tpl.hasClass('working') )
{
jqXHR.abort();
}

tpl.fadeOut( function()
{
tpl.remove();
});
});

Prevent XHR from sending data in "multipart/formData"
data.postMessage = data.files.type;
data.contentType = data.files.type;

var chunksize = GLOBAL_CHUNK_SIZE > file.size ? file.size : GLOBAL_CHUNK_SIZE;

Describe the FileReader-DataLoad-Event
reader.onload = function( event )
{
var binary = event.target.result;
var md5 = CryptoJS.MD5(binary).toString();

data.url += "&md5sum=" + md5;

D A T A S E N D
jqXHR = data.submit();
};

ADD url to XHR-object
data.url = GLOBAL_FORM_ACTION;
data.url += "?etf_id=" + GLOBAL_FOLDER_ID;
data.url += "&file_title=" + file.name;

If the file will be send in one piece...
if( GLOBAL_CHUNK_SIZE > file.size )
{
ADD url-parameter to XHR-object
data.url += "&size_chunk_start=" + 0;
data.url += "&size_chunk_length=" + chunksize;
}
This part for the chunks must be in "beforeSend"-Callback,
because, the chunk-related size-data is undefined in this case
but available there.

ADD url-parameter to XHR-object
data.url += "&size_final=" + file.size;

Read md5-sum and send the file / chunk...
On multipart "file" is a chunk !
reader.readAsBinaryString( file );
},

beforeSend : function(e, data)
{
var file = data.files;

this.find(".msg").hide();

If the file will be send as chunks...
if( GLOBAL_CHUNK_SIZE < file.size )
{
console.log( "Chunk data: ", data.uploadedBytes, data.chunkSize, file.size, data );

// ADD url-parameter to XHR-object
data.url += "&size_chunk_start=" + data.uploadedBytes;
data.url += "&size_chunk_length=" + data.chunkSize;

if( typeof this.attr('session_id') !== "undefined" )
data.url += "&session_id=" + this.attr( 'session_id' );
}

});
Vielen Dank im Voraus !!! face-smile

Content-ID: 288814

Url: https://administrator.de/contentid/288814

Ausgedruckt am: 23.11.2024 um 15:11 Uhr

dog
dog 20.11.2015 um 21:19:11 Uhr
Goto Top
Dieser "Header" ist das multipart/form-data Encoding.
Und da es bei POST nur multipart/form-data und application/x-www-form-urlencoded gibt (wenn der Client ein Browser ist), wobei letzteres nicht für Datei-Uploads zu empfehlen ist, wird das mit deinem Vorhaben nichts.

Die Methode ohne zusätzliches Encoding heißt PUT.
Allerdings kann die auch keine weiteren Formular-Daten übertragen (wie den Dateinamen).

Allerdings hast du dich wahrscheinlich sowieso schon verlaufen, wenn du an so einem Problemen hängst, denn bis auf CGI-Skripts in CSH oder Server-Side Handler in C hat jede im Web verwendete Programmiersprache die Möglichkeit die POST-Daten automatisch zu zerlegen und dir den extrahierten Datenstrom zu liefern...
TheFreeman
TheFreeman 21.11.2015 aktualisiert um 09:43:25 Uhr
Goto Top
Erstmal danke für die schnelle Antwort.
Das selbe Problem habe ich auch mit der PUT - Methode.

Ich möchte auch sonst keine Formulardaten übertragen.

Ja, die Daten werden über die File - API gestückelt und der Header an jeden Chuck gehängt. Wie kann ich das unterbinden?
dog
dog 21.11.2015 aktualisiert um 22:02:58 Uhr
Goto Top
Ich hab' nicht die Muse, diesen völlig unformatierten abstrakten Blob zu entziffern, den du oben gepostet hast, aber mittlerweile hat ja jeder moderne Browser einen eingebauten Debugger. Schau dir doch mal mal an, was du eigentlich genau absendest...
TheFreeman
TheFreeman 23.11.2015 um 10:05:04 Uhr
Goto Top
Das habe ich schon getan und in meinem Post geschildert:

Mein Problem liegt darin, dass beim Senden eines chunks oberhalb
der binären Daten auch noch ein Header mitgesendet wird, der
folgendermasse aussieht:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 25861752531267
Content-Disposition: form-data; name="upl"; filename="1.rar"
Content-Type: application/octet-stream

...BINARY...

Ich habe Dir meinen Code einfach mal in ein Fiddle kopiert:
https://jsfiddle.net/ac1au031/