[Predlog] Paste slike u poruku

08.02.2018. u 10:48 · pre 105 meseci

Vrlo cesto je potrebno poslati screenshot ili neku sliku napravljenu samo za slanje na forum.
Trenutno, da bi se to uradilo, potrebno je:
•Screenshot paste-ovati u aplikaciju za grafiku.
•Sacuvati sliku lokalno
•Ici na upload uz poruku nakon sto je poruka napisana
•Odabrati fajl i uraditi upload
•Obrisati sliku lokalno

Predlazem da se uvede mogucnost da se uradi paste slike tokom pisanja poruke. Moze se dodati jednostavan JS confirm za potvrdjivanje. Upload i dodavanje u poruku bi se uradili automatski.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

08.02.2018. u 12:23 · pre 105 meseci

Ja vidim to ovako:

Ako poruka nije kreirana, ne postoji ID po kojem ce se file/slika referencirati na tu poruku, tako da u stvari fajl mora ici u neki temp upload folder sa nekim temp ID (guid) a zatim po snimanju dobijemo ID poruke i mozemo da refernciramo sliku/fajl, smestimo u odgovarajuci folder, obrisemo iz temp. foldera.

08.02.2018. u 12:46 · pre 105 meseci

Ne mora slika da se snimi u toku pisanja poruke. Ti paste-ujes, ona je i dalje samo client side. Kad posaljes poruku, posalju se i slike pa onda server side snimi poruku, dobije ID i uveze sa slikama.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

08.02.2018. u 13:03 · pre 105 meseci

Posle paste-a, gde se nalazi u clipboard-u od browser-a, web storage-u... da li se vidi renderovana u browser-u ?

Sta ako zelimo vise slika-fajlova ?

08.02.2018. u 13:13 · pre 105 meseci

U clipboard-u je posle copy. Nakon paste, mozes da izvuces i smestis u blob. Primer.
Mozes paste-ovati jednu po jednu za vise.
Preview se moze raditi iz blob-a kao i slanje na backend.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

08.02.2018. u 16:14 · pre 105 meseci

Moze moze nego nisam istrazivao skoro, da li to moze u textarea da se radi (da se dodaju slike) ili mora ceo taj text edit box novi da se pravi.. kao neki editable div, ili sta vec?

08.02.2018. u 16:17 · pre 105 meseci

Pogledao sam upravo kako gmail radi, oni koriste div sa contenteditable="true"

Paa posto je trenutno obican textarea html tag u pitanju, moralo bi to kompletno da se preradi da bi se postiglo to sto predlazes.

08.02.2018. u 16:38 · pre 105 meseci

Zamisao nije da bude neki rich editor. Isti ovaj, samo da detektuje paste dodas mu event handler u JS-u i vidis da li je u clipboard-u image. Ispod tekstualnog polja za poruku mozes da imas <img> koji ce prikazati paste-ovanu sliku kao thumb a u polje za poruku ubacis [att_img].
Pogledaj onaj primer sto sam linkovao. On tu vec radi 20-30% posla na klijentskoj strani.

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

08.02.2018. u 17:01 · pre 105 meseci

A zar nije jednostavnije da se doda novi bb code tag nznm [ picture ] ili [ slika ] [ /slika ] ..
..onda korisnik fokusira mišem u sredinu bb_taga i nakon toga klikne na novo dugme koje bi se postavilo, tu negde, gde već `upload slike`.

Ajaxom se uploaduje fajl,
php vrati nešto ovako..
recimo:

Code (php):

echo sha1("{$username}/$basename_uploaded_file");

// $basename_uploaded_file === svi filteri prošli, naziv je dobar, veličina je ok.. itd.

I taj sha se prosto zameni odgovarajućim fajlom, gde se već nalazi (mislim da i lokacija ne mora da se menja ) i preg_ ili čak str_replace odradi ostalo ..
Ovo što shadowed predlaže jeste veliki rizik. Da se pusti js da može da kopa po bilo čijoj clipboard istoriji .. ?

Ajde kad je to lokalna aplikacija, ali ovako, kroz http.. svestan sam ja da smo ga mi odavno ovo, ono (spectre, meltdown) ali baš toliko da se opuštamo, ne valja.

Šta ako tu budu neke lozinke u clipboardu .. ?

U ovom gore slučaju, javaskripiti ne treba ama baš nikakav polifil ni za Edge, već samo da `udene` response sha1 vrednost u fokusirano ..
mimo ajax file uploada ... a to je već tu.. ajax zaebancije, ne mora ništa ni da se dodaje od libova, pretpostavljam.

Potpis

about:networking

08.02.2018. u 17:35 · pre 105 meseci

Pa onda to nije paste, već nešto elegnatniji upload slike.
Js ne može implicitno da kopa po clipboard-u već samo kada korisnik eksplicitno zatraži cut/copy/paste akciju.

08.02.2018. u 17:38 · pre 105 meseci

Javascript ima pristup clipboard-u samo na paste dogadjaj (i to svakako ima vec i sad, samo je pitanje da li web strana to koristi).
Moj predlog ne salje nista na server dok ne posaljes poruku. Ako imas password u clipboard-u, ponasanje bi bilo identicno trenutnom - pastovao bi tekst u polje za poruku i tu bu ga video.
Ako imas sliku, prikazala bi se gde treba a u poruci bi se pojavio ubb code.

@Gojko, evo na brzinu sklepanog koda koji ce paste slike detektovati u quick replay-u i dodati sliku iznad tekstualnog polja (isprobao sam u ff-u):

Code (javascript):

$('#message').on('paste', pasteHandler);

function pasteHandler(e) {

    console.debug('pasteHandler');

    var data = e.originalEvent.clipboardData;

    var items = data.items;

    if (items) {

        console.debug('items');

        for (var i = 0; i < items.length; i++) {

            console.debug(items[i].type);

            if (items[i].type.indexOf('image') !== - 1) {

                var blob = items[i].getAsFile();

                var URLObj = window.URL || window.webkitURL;

                var source = URLObj.createObjectURL(blob);

                createImage(source);

            }

        }

    }

}

function createImage(source) {

    var pastedImage = new Image();

    pastedImage.src = source;

    $('#message').parent().prepend(pastedImage);

}

Potpis

Nebojsa Milanovic:
-Trumpa smatram vrhunskim predsednikom i voleo bih da živim u državi na čijem je on čelu
-Rusija ne laže, ne vodi osvajačke ratove
-Trump je svetla tačka u USA blatu
-Elon Musk, možda najpametniji i najtrezveniji Amerikanac

08.02.2018. u 22:29 · pre 105 meseci

Citat:

dusans:
Pa onda to nije paste, već nešto elegnatniji upload slike.
Js ne može implicitno da kopa po clipboard-u već samo kada korisnik eksplicitno zatraži cut/copy/paste akciju.

sto se tehnicke strane tice, tu nisam kompetentan da komentarisem, ali podrzavam predlog, i mislim da elegantijeg nacina postavljanja slika od toga nema.

to koristim na web.whatsapp.com i viber desktop PC aplikaciji, i izuzetna je stvar, pogotovo kada sa nekog screenshota ili neke slike treba da se posalje neki deo, u paintu npr. select, i paste na chat i posao zavrsen za manje od 2s

isto tako, bilo koju sliku sa web-a, u pretrazivacu ima opcija copy, pa paste, gde god za tren oka.

13.02.2018. u 17:11 · pre 105 meseci

Citat:

dusans:
Pa onda to nije paste, već nešto elegnatniji upload slike.
Js ne može implicitno da kopa po clipboard-u već samo kada korisnik eksplicitno zatraži cut/copy/paste akciju.

Znam ja to. Zato to ne treba ni omogućavati korisnicima, uopšte bilo kome, ako je `public` http/s domain.
Mada, dobro .. ovde se i ovako password čuva u kukiju .. ili bar deo passworda (nadam se).

Potpis

about:networking

13.02.2018. u 17:22 · pre 105 meseci

Mali offtopic

... jel' zamišljao neko kako bi ES izgledao preko ovoga -> fluxbb ?
Evo i šta sve može -> FluxBB Feature list

Kad već spominjemo modifikacije, jer FluxBB je ultra brz. I ima sve što možda, 'fali'.

Potpis

about:networking

Srodne teme