Comment poster une vidéo avec ajax et json

Version imprimable

Bonjour,

Je souhaite poster une vidéo avec ajax en consommant un web service restful .
Voici le code html :

Code:

1
2
3
4
5
<div>
	<input id="uploadFile" type="file" name="files">
	<button id="submit_btn">Upload</button>
	<input type="reset">
</div>

Mon appel ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$('#submit_btn').click(function (){
	//alert("toto");
	var myURL = "http://example.app.com/content-rest/contents/app_domain";
	alert(myURL);
	var video = document.getElementById("uploadFile");
        var vfile = video.files[0];
	alert(vfile.name);
	alert(vfile.size);
	$.ajax({
		type : "POST",
		dataType : "json",
		async: true,
		url : myURL,
		contentType: "multipart/form-data",
		//enctype: 'multipart/form-data',
		data : {	
			files : vfile
		},
		success : function(data) {
			alert("toto");
			alert(data);
		},
		error : function(jqXHR, textStatus, errorThrown) {
			alert("error sur fct ajax");
			alert(textStatus);
			alert(errorThrown);
		}
	});
});

J'ai l'erreur suivante :

Code:

{"status":{"message":"the request was rejected because no multipart boundary was found"}}

Merci pour votre aide

14/05/2013, 16h33
SpaceFrog

on ne peux pas uploader des fichiers avec ajax ...
ajax ne converse qu'en string
14/05/2013, 16h37
fiatlux

C'est embêtant parce que le ws rest que j'appelle attend la vidéo comme paramètre. En fait, je passe par ajax car je dois manipuler les données de retour de ce web service...:(

Est-ce qu'il y'a un autre moyen de le faire ?
14/05/2013, 16h39
SpaceFrog

en passant par flash :(
14/05/2013, 16h46
fiatlux

Désolé, je vois pas trop comment avec flash je pourrais appeler le web service restful...
Tu as un exemple ?
14/05/2013, 17h05
SpaceFrog

nasuploader ...
14/05/2013, 17h59
fiatlux

je me suis peut-être mal exprimé..
Je ne cherche pas à télécharger la vidéo avec Ajax mais j'appelle un web service avec ajax et je veux mettre ma vidéo parmi mes data au format JSON.
14/05/2013, 18h02
SpaceFrog

tu ne peux mettre que le chemin (src) de la video, pas le video en elle même
14/05/2013, 18h17
fiatlux

Si ça ne t'embête pas comment tu le récupères et comment tu le met dans je data JSON ?
15/05/2013, 09h35
SpaceFrog

ton web service doit te retourner une chaine JSON correctement formatée

en général avac php par exemple il suffit d'avoir les éléments dans un array et d'en faire un json_encode()

cote client lors de la récupération, là il siffut d'avoir précisé le format de la réponse attendue, soit directement avec un getJSON qui récupère implicitement un json, soit en précisant à la méthode ajax, get ou post le dataType: "json".

Tu auras alors à ta disposition dans le success de ton ajax un json que tu pourras exploiter normalement.

Malheureusement je ne suis pas sur PHP mais HTML.
J'ai bien compris le principe pour la récupération au format json...
Ce qui pose problème c'est le post de la video ..Plus précisément, ajax ne semble pas vouloir ma manière de gérer le fichier :
Code:

1 2 var video = document.getElementById("uploadFile"); var vfile = video.files[0];
Donc quand je rajoute le fichier dans Ajax comme suit ça marche pas...à cause de vFile
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 $.ajax({ type : "POST", dataType : "json", async: true, url : myURL, contentType: "multipart/form-data", processData: false, data : { FILE_EXTENSION : 'mp4', description: 'test_video', files : vfile }, success : function(data) { alert("toto"); }, error : function(jqXHR, textStatus, errorThrown) { alert("error sur fct ajax"); alert(textStatus); alert(errorThrown); } });
Est-ce que le "FormData" peut-être une solution fiable ?

15/05/2013, 12h09
SpaceFrog

Citation:

Ce qui pose problème c'est le post de la video .

???

post ??

encore une fois ajax ne permet pas de transferer des fichiers !!!!
ajax ne converse qu'en string
15/05/2013, 15h16
fiatlux

OK...:ccool:..Merci je vais donc faire autrement

Hello

Je me suis orienté vers une autre piste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.getMultipartData = function(frmName){
	var videoname = $('[name=files]').val();
	var initBoundary= $.randomString();
	var strCRLF = "\r\n";
	var strMultipartBody = "";
	strMultipartBody +=	strBoundary	+ strCRLF;
	strMultipartBody += 'content-Disposition: form-data; name="files"; filename="'+ videoname+'"'+strCRLF;
	strMultipartBody += 'content-Disposition: attachment; name="files"; filename="'+ videoname+'"'+strCRLF;
	strMultipartBody += "content-Type: application/octet-stream"+ strCRLF;
         //strMultipartBody += "content-Type: video/mp4"+ strCRLF +strCRLF;
 
	//End the body by delimiting it
	strMultipartBody += strBoundary + "--" + strCRLF;
	//Return boundary without -- and the multipart content
	return [initBoundary,strMultipartBody];
}

et le post :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$('form[name="videoUploadForm"]').on('submit', function(e) {
		//alert("videoUploadForm");
		e.preventDefault();
		strContent = $.getMultipartData('#'+this.id);
		alert(strContent);
	     $.ajax({
	        type: 'POST',
		    enctype:"multipart/form-data",
		    encoding:"multipart/form-data",
	        url: myURL,
	        cache: false,
	        processData: false,
		    contentType: 'multipart/form-data; boundary='+strContent[0],
		    data: strContent[1],
 
            success: function(data){
            alert(data);
            },
 
            error : function(jqXHR, textStatus, errorThrown) {
				alert("error sur fct ajax");
				alert(textStatus);
				alert(errorThrown);
			}
 
	     });
 
	});

J'ai cette erreur :

Code:

{"status":{"message":"Stream ended unexpectedly"}}

17/05/2013, 11h22
fiatlux

Après modifié quelques espaces et retour-chariot j'ai maintenant cette erreur :

Code:

"Processing of multipart/form-data request failed. Stream ended unexpectedly

Qui peut m'aider svp:? ???

a ma cponnaissance, il n'est toujours pas possible de tranférer quelque sorte de fichier que ce soit en, ajax ...

je le redis , ajax ne sait converser avec le serveur qu'en string !
Il est donc à mon avis impossible de tenter des bidouille du genre
Code:

1 2 3 4 5 6 enctype:"multipart/form-data", encoding:"multipart/form-data", url: myURL, cache: false, processData: false, contentType: 'multipart/form-data; boundary='+strContent[0],
de part la nature même du protocole utilisé par ajax xmlhttprequest

Ce serait d'ailleurs un grosse faille !!