Discussion :

[fiatlux]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci pour votre aide

[SpaceFrog]

on ne peux pas uploader des fichiers avec ajax ...
ajax ne converse qu'en string

[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 ?

[SpaceFrog]

en passant par flash

[fiatlux]

Désolé, je vois pas trop comment avec flash je pourrais appeler le web service restful...
Tu as un exemple ?

[SpaceFrog]

nasuploader ...

[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.

[SpaceFrog]

tu ne peux mettre que le chemin (src) de la video, pas le video en elle même

[fiatlux]

Si ça ne t'embête pas comment tu le récupères et comment tu le met dans je data JSON ?

[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.

[fiatlux]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[SpaceFrog]

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

[fiatlux]

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

[fiatlux]

Hello

Je me suis orienté vers une autre piste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[fiatlux]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Qui peut m'aider svp ???

[SpaceFrog]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!