Nette ajax a odeslání xhr

kleinpetr

Ahoj,

chtěl jsem se zeptat zda mohu nějak poupravit xhr.send() tak aby o něm věděl nette.ajax, protože jinak se mi nepřekreslí snippety a v response mi přijde celé html..

// snažím se udělat jakousi upload komponentu, která odesílá ajaxově FILES a právě když je odešlu přes xhr, tak už nemůžu pracovat se snippety

Díky

greeny

Mnohem jednodužší bude udělat si to jako rozšíření pro nette.ajax.js

kleinpetr

No to mám na mysli, ale netuším jak :)

greeny

Přesně tak jak je to popsaný v dokumentaci:

$.nette.ext('upload', {
    event1: function () {

    },
    event2: {/*...*/}
}, {
    // ... shared context (this) of all callbacks
});

kleinpetr

Aha, díky..

jestli jsem to správně pochopil, tak když zaregistruju rozšíření tak ho pak můžu volat jako
$.nette.upload() jen nějak nechápu jak předat třeba právě ty soubory.

Když to tak vezmu, tak mám teď nějakou fci která odesílá xhr

uploadFile = function(file,url){
    	var formData = new FormData();

    	formData.append('file', file);

    	var xhr = new XMLHttpRequest();

 	  	xhr.open("POST", url);

    	xhr.send(formData);
}

Jak to mohu přenést do toho rozšíření ?

Zatím to chápu tak, že mám přidané to rozšíření a teď budu místo té uploadFce volat

$.nette.upload({
	url: url,
	//ale jak mu předám ten 'file'?
});

P.S. Pravděpodobně jsem úplně v lese, ale pokud bude někdo tak ochotný a trochu mi toto téma upřesní tak budu rád, zatím jsem ten ajax nějak nepotřeboval řešit až do teď :)

Editoval kleinpetr (23. 11. 2015 17:12)

kleinpetr

Je tu někdo kdo by mě mohl trochu nakopnout ? Díky

kleinpetr

Pochopil jsem tedy už, že název rozšíření je čistě informační pro přehlednost, a také jsem asi pochopil, že každé rozšíření se zavolá při $.nette.ajax() ale potom tedy nechápu jak mohu rozpoznat jednotlivá volání v tom rozšíření.

Editoval kleinpetr (24. 11. 2015 16:42)

kleinpetr

Zkouším něco takového:

$.nette.ext('upload', {
    start: function(xhr,settings){
        if(this.upload) {
            var formData = new FormData();

            $.each(this.files, function (i, file) {
                formData.append(i, file);
            });

            // Open our connection using the POST method
            xhr.open("POST", uploadUrl);

            // Send the file
            xhr.send(formData);
        }
    }
},{
    upload: false,
    files: null,
    uploadUrl: null
});

použití:

$.nette.ajax({
    upload: true,
    files: files,
    uploadUrl: url
});

Doufám, že jsem alespoň správně nasměrovaný, díky

kleinpetr

@VojtěchDobeš Myslíš, že bys mi mohl trochu pomoc s tímto řešením ? Už nad tím sedím druhý den a stále se mi nedaří. Budu moc vděčný :)

F.Vesely

Proc nepouzijes jiz nejake hotove reseni? Napriklad Dropzone?

kleinpetr

Původně jsem chtěl, ale tam jsem měl ten samý problém s tím, že jsem nemohl posílat data přes nette.ajax tak jsem se rozhodl, že udělám kompletní vlastná uploader s doměnkou, že data bduu posílat ajaxem, když už jsem měl hotovou komponentu a přišlo na odesílání dat ajaxem, zjistil jsem, že to jde stejně jen přes xhr. Takže jsem na tom v podstatě stejně. Jen teď už mám kompletně svou komponentu kde vše funguje, jen potřebuji dořešit to přepsání snippetu po uploadu.. a abych mohl posílat flashmessages..

F.Vesely

U Dropzone ti staci, abys po nahrani obrazku zavolal nejakej handle pres nette.ajax a v nem prekreslil snippet.

kleinpetr

No tak když už teď mám kompletní komponentu tak je zbytečný nedořešit tuhle poslední věc a to jak odeslat xhr přes nette.ajax je divný, že to nidko neřešil..

kleinpetr

Zatím jsem to vyřešil takto:

uploadFiles = function (files, url) {

    var formData = new FormData();

    $.each(files, function(i, file) {
        formData.append(i, file);
    });

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {

            $.nette.ajax({
                url: url
            });
        }
    };

    // Open our connection using the POST method
    xhr.open("POST", url, true);

    // Send the file
    xhr.send(formData);
};

Samozřejmě jediné co to udělá, tak že aktualizuje snippet s nově nahranými soubory, ale pokud uplaod selže tak se to uživatel nedozví a bude mu tam běhat spinner do nekonečna. Asi by se to dalo vyřešit tím, že bych zavolal další metodu při jiném statusu než 200, ale to se mi prostě nelíbí.. rád bych to xhr zahrnul v nette.ajax

Vojtěch Dobeš

Omlouvám se za velmi opožděnou reakci, ale neměl by nette.ajax.js podporovat odesílání souborů automaticky bez dalšího rozšíření? Čeho přesně se snažíš docílit, že ti nefunguje v základu?

kleinpetr

Ahoj, no v podstatě jsem řešil ajax upload. A jediné na co jsem přišel, tak že soubory můžu odeslat pouze pomocí xhr. Ale v tu chvíly je problém, že to neletí přes nette ajax tudíž nemohu nijak hezky vracet např flashMessages atp.