« 1 2 3 »
Autor Zpráva
Marschmallow
Profil
Ahoj všem,
jelikož je někdy problém s vložením obrázku sem do diskuse, rozhodl jsem se vytvořit vlastní ucelený nástroj. Ano, je možnost použít Živou ukázku od Str4wberryho, ale pokud se například špatně vypisuje font, nebo se stránka rozpadá v některém z prohlížečů, musí přijít na řadu screen obrazovky.

Proto Vám představuji můj nový nástroj DJPW upload!


Pro koho je nástroj určený?

DJPW upload jsem vytvářel pouze pro tuto Diskusi JPW.
Je určený především pro začátečníky, kteří zatím nemají svůj vlastní webhosting. Problém free webhostingů je ten, že za rok, dva už třeba nebude daný obrázek (na který odkážou) existovat. Když potom někdo jiný bude mít stejný problém, nedozví se, co přesně bylo na obrázku. Protože na obrázku může být i představa funkčnosti toho, co tazatel chce.

Co nástroj umí?

Pomocí tohoto nástroje lze nahrát jakýkoliv obrázek ve formátu jpg, jpeg, png, nebo gif (nehledě na velikost přípon). Po stisknutí tlačítka "Nahrát" se obrázek zázračně nahraje na server a vygeneruje Vám kopírovatelnou URL adresu.
Nahrávat lze z desktopu, notebooku, tabletu i mobilu. Funkčnost jsem testoval na notebooku s Windows 7, tabletu iPad s iOS 8 a mobilu s Windows Phone 8.1.

Co když už obrázek se stejným názvem na serveru existuje?

Aby se nemohly jednotlivé obrázky přepisovat, ošetřil jsem skript funkcí, která za každý název uploadované fotky vloží datumové a časové razítko. Např. nahraji obrázek fotka.jpg a skript mi ho přepíše na fotka_2014-10-25_17-29-40.jpg. Je velmi malá pravděpodobnost, že více uživatelů nahraje obrázek se stejným názvem ve stejný okamžik.

Správce uživatelů

Momentálně lze pouze nahrávat obrázky, ale chystám také registraci uživatelů a vlastní soukromý seznam jeho uploadovaných obrázků.

Má tento nástroj budoucnost?

To záleží jenom na Vás! Zaručuji Vám, že DJPW upload jen tak, z ničeho nic neskončí.

Proč použít zrovna DJPW upload?

• je v češtině
• ovládání je velmi snadné, je přehledný
• má responsivní design (je založen na Bootstrapové šabloně)
• bude podporovat uživatelské účty a přehledný seznam uploadovaných obrázků uživatele
• jen tak nezanikne
• je vytvořen speciálně pro tuto diskusi (ale není problém ho používat i jiné portály)

Shrnutí

Napadlo mě, že by se vedle psaní příspěvku, do bočního panelu "Mohlo by se hodit" mohl přidat odkaz na DJPW upload a Živou ukázku. Jaké jsou Vaše názory na tenhle nástroj? Máte nějaké připomínky?

Díky :)
Jan Tvrdík
Profil
Marschmallow:
ovládání je velmi snadné, je přehledný
Není, asi tak 90 % prvků by bylo vhodné z rozhraní vyhodit.

jen tak nezanikne
Nevěřím.

Máte nějaké připomínky?
Můžeš začít tím, že opravíš XSS zranitelnost, když někde nahraje obrázek pojmenovaný jako ' onmouseover='alert(1)' foo='.
lionel messi
Profil
Marschmallow:
Hlášku „Někde se stala chyba…“ by bolo vhodné špecifikovať. Inak na prvé pozretie fajn nápad, chválim!
Marschmallow
Profil
Jan Tvrdík:
asi tak 90 % prvků by bylo vhodné z rozhraní vyhodit
Myslíš ty s tím textem "ve vývoji"? A co dál?

Nevěřím.
To je Tvůj názor.

že opravíš XSS zranitelnost
Díky, jak přesně?

lionel messi:
Hlášku ‚Někde se stala chyba…‘ by bolo vhodné špecifikovať.
Opravím.

Inak na prvé pozretie fajn nápad, chválim!
Díky :)

Momentálně pracuji na tom přihlašování a zbylých dvou kategoriích.
Jan Tvrdík
Profil
Marschmallow:
Díky, jak přesně?
O htmlspecialchars jsi už slyšel? A phpfashion.com/escapovani-definitivni-prirucka jsi už četl?
yFang
Profil
Marschmallow:
Kontrolovat soubory podle přípony není úplně bezpečné, můžu si tam nahrávat co chci, když to přejmenuju
http://foto.mujskript.cz/obrazky/foo.png_2014-10-25_20-20-51.png

Bylo by dobré přidat drag and drop.
Jan Tvrdík
Profil
yFang:
Bylo by dobré přidat drag and drop.
To ještě existují prohlížeče, které to neumí sami od sebe? (drag and drop na upload input)
Medvídek
Profil
yFang:
Kontrolovat soubory podle přípony není úplně bezpečné
Naopak, je to jediné bezpečná kontrola, protože server se rozhoduje na základě koncovky. Ale bylo by vhodné, po kontrole koncovky ještě zkontrolovat mime type, nebo přímo zkusit prohnat nějakou funkcí, třeba getimagesize.
DJ Miky
Profil
Formulář pro nahrání by mohl být už na hlavní stránce, zvlášť když je jen o cca tři řádky delší než samotná výzva, abych se k němu prokliknul.
Marschmallow
Profil
DJ Miky:
Formulář pro nahrání by mohl být už na hlavní stránce
Dobrý nápad, skript jsem přesunul na hlavní stránku a dřívější stránku se skriptem odstranil.
Kubo2
Profil
Marschmallow:
Chcete vylepšit DJPW upload? Napište mi do vlákna na diskusi JPW, nebo na mail v kontaktech!
...Alebo si naklonujte repozitár stadiaľ. :-) To mi tam chýba, keď už píšeš o vylepšeniach (improvements).
Marschmallow
Profil
Kubo2:
Moc jsem Tě nepochopil. Co jsi chtěl napsat?
yFang
Profil
Jan Tvrdík:
To ještě existují prohlížeče, které to neumí sami od sebe? (drag and drop na upload input)
Na upload input ano, ale myslel jsem něco ve stylu google drive, že to mohu hodit kamkoliv do stránky.
Marschmallow
Profil
Jan Tvrdík:
Tak jsem do skriptu přidal $nazev = htmlspecialchars($nazev, ENT_QUOTES);. V odkaze se stále zobrazují nepovolené znaky, ale soubor s názvem ' onmouseover='alert%281%29' foo='.jpg_2014-10-25_19-27-07.jpg se uloží jako (sakra, tady se převádí i entity, no prostě se nepovolené znaky uloží zaentinované).

Radši mi ještě jednou otestuj, zda se to opravdu převádí. Díky za velmi důležitou připomínku :)
Jan Tvrdík
Profil
Marschmallow:
Nepozoruji žádnou změnu, pořád je to blbě. Měl bys použít webalize na vstupu na htmlspecialchars na výstupu.
Alphard
Profil
Podobných služeb je hromada, neříkám, že nejde udělat lepší, ale zatím ty výhody moc nevidím.

Jako příklad použití této služby píšeš problém s fontem a potřebu sdílet screen obrazovky, budiž. To mám dělat screen, ořezávat si ho v jiné aplikaci, ukládat jako soubor a ten pak nahrávat k tobě? Zkrať ten postup. Umožni upload obrázku hned po Ctrl + V (podobné služby také existují), po uploadu obrázku ho třeba umožni oříznout, nebo označit tu zajímavou část (neříkám dělat online Photoshop, takové služby taky existují) a pak nabídni přímo BB code sem do diskuse. Samozřejmě s malým náhledem a vytvořeným odkazem na originál.

Co dál? Jak se odlišit? Umožni snadné série snímků, mám oříznutý a označený ten první, dopíši k němu metainformaci, že je z Firefoxu, a hned stisknu Ctrl+V a uploaduji screen z Opery. K celé serii doplním odkaz na živou ukázku a nechám si vygenerovat diskusní BB kód. Kde je obrázek s 5 náhledy vedle sebe a odkazuje to na stránku se všemi originály.

Registrace? Jestli o ni stojíš..., ale doporučuji nepodmiňovat použití služby registrací.
Str4wberry
Profil
Nechtělo by se ti raději vylepšit img.djpw.cz?

Tam je momentálně možné akorát vložit obrázek ze schránky a nechat si jeho URL pohodlně uložit do schránky. Mohl by se tam dodělat i upload samostatných souborů a možnost oříznout obrázky.
Marschmallow
Profil
Jan Tvrdík:
Nepozoruji žádnou změnu, pořád je to blbě.

Po výběru souboru s názvem se do souboru přepíše název na . Ve vygenerovaném odkaze je sice stále původní název, ale ten aspoň nefunguje.

Názvy souborů jsem nahradil obrázky, protože se v diskusi převádí i entity.
Jan Tvrdík
Profil
Marschmallow:
screencast.com/t/fQZObDXNdW
Marschmallow
Profil
Jan Tvrdík:
Nevím, já když kliknu na ten vygenerovaný odkaz, tak se mi ukáže chybová stránka. Zkus stránku zaktualizovat. Mně se ten odkaz chová jinak, než tobě...
Jan Tvrdík
Profil
Marschmallow:
Koukám, že ten problém vůbec nechápeš. Ty odkazy, co jsem ti výše napsal jsi ignoroval nebo nepochopil? Jinak zkus FF nebo IE, v Chrome to zastaví XSS auditor. Což je mimochodem věc, která je z hlediska bezpečnosti dobré úplně vypnout.
Marschmallow
Profil
Jan Tvrdík:
v Chrome to zastaví XSS auditor
Hm, testoval jsem v Chrome ;)


Takže konečně opraveno. Omlouvám se, že jsem Tě nepochopil hned. Teď jsem to testoval v Mozille Firefox.
mimochodec
Profil
Já jsem to asi nepochopil. Je to něco víc než prostě imagehosting?
Marschmallow
Profil
mimochodec:
Je to něco víc než prostě imagehosting?
Zatím ne.
mimochodec
Profil
Marschmallow:
ok, takže chceš rozjet imagehosting speciálně pro tuhle diskusi. Co bude argumentem pro to, abych ho použil? Z hlavy znám dva jiné, tvému bych vytkl:
- nezapamatuju si adresu
- pokud je účelem jen nahrávání obrázků, má zbytečně složité rozhraní. Menu nahoře, menu vlevo, tam navíc s docela iritujícím chováním myších kurzorů. Není tam potřeba vůbec nic, kromě inputu uprostřed stránky, případně ještě čtverečku "sem přetáhni obrázek".
- "Je velmi malá pravděpodobnost, že více uživatelů nahraje obrázek se stejným názvem ve stejný okamžik." Ta pravděpodobnost je mnohem vyšší, než abys to mohl ignorovat. Ale koukám, že už tam přidáváš i původní název obrázku, tím se riziko kolize snižuje.
- adresa http://foto.mujskript.cz/obrazky/maslow.jpg_2014-10-26_11-54-53.jpg - proč probůh tak dlouhá? Srovnej s http://i.nahraj.to/f/Odm.jpg
- "Kopírovatelný odkaz na obrázek:" - ten input vedle toho je krátký, to nevidíš? Kromě toho: když už chceš nástroj speciálně pro tuto diskusi, mohl bys mi ušetřit práci tím, že by se to obalilo img tagem a po získání focusu označilo, abych dal jen ctrl+c.

Ale i v případě, že to bude všechno odladěné a úžasné, nevím, čím by to bylo speciálně zajímavé pro uživatele djpw. Buď to bude něčím opravdu atraktivní a pak nemá smysl se omezovat jen na pár lidí odtud, nebo to zajímavé nebude a nikoho k používání nedonutíš, i kdyby ti zdejší správci vyšli vstříc nějakou reklamou.
Marschmallow
Profil
mimochodec:
nezapamatuju si adresu
Proto je tu nabídka od Str4wberryho v [#17].

má zbytečně složité rozhraní
Toho si jsem vědom, s rozhraním a celkově designem si určitě ještě pohraji.

adresa (...) proč probůh tak dlouhá?
Je to jen provizorní řešení.

... že by se to obalilo img tagem
To jsem měl v plánu. Teď je vidět, že se to opravdu hodí.

po získání focusu označilo
Bude Ti stačit tlačítko "Kopírovat do schránky" (místo dalšího mačkání kombinace CTRL+C)?

Díky
mimochodec
Profil
Marschmallow:
„... že by se to obalilo img tagem“
To jsem měl v plánu. Teď je vidět, že se to opravdu hodí.

Teď nevím kde, ale vídám běžně vygenerované kódy pro několik variant použití - obrázek, odkaz na obrázek ve formě náhledu, ve formě textu, <img> nebo [img]...

„po získání focusu označilo“
Bude Ti stačit tlačítko "Kopírovat do schránky" (místo dalšího mačkání kombinace CTRL+C)?

Už jsem to někde viděl, ale nepoužívám to, protože si nejsem jist funkčností napříč prohlížeči a nemíním ztrácet nervy kvůli tomu, že mi to nebude fungovat a budu se muset vracet.
Marschmallow
Profil
Právě jsem publikoval novou aktualizaci DJPW upload. Je v ní zahrnuto (opraveno):
• několik typů odkazů na obrázek: (klikatelný odkaz, kopírovatelný odkaz, zobrazení obrázku pro diskusi - problém s velkou šířkou obrázku, takže by se mohlo přidat automatické zmenšování obrázků)
• obrana proti XSS útokům v JS
• možnost natáhnout obrázek na input (což umí samo o sobě)

Dále (do dalších aktualizacích, neříkám do přístí) chystám:
• drag and drop obrázku (z webu, z disku)
• možnost oříznutí obrázku
• automatické zmenšení obrázku pro diskusi (aby nelezl z monitoru)
• série obrázků
• popisky k jednotlivým obrázkům
• kratší názvy obrázků (v URL adrese)
• doména img.djpw.cz, nebo podobná


mimochodec:
vídám běžně vygenerované kódy pro několik variant použití
Doplněno do aktualizace

Kopírovat do schránky - nemíním ztrácet nervy kvůli tomu, že mi to nebude fungovat a budu se muset vracet
OK, v další verzi budou oba způsoby. Tedy jak tlačítko ke zkopírování do schránky, tak i pole pro ruční zkopírování.
Fisir
Profil
Reaguji na Marschmallowa:
Horste, ale tohle je vynález kola! Spíš bych uvítal revoluční HTML dodatek (byť zatím jen v sandboxu), který mi po stisknutí tlačítka pro vložení BB kódu obrázku zobrazí malý dialog, do kterého pastnu PrintScreen (bez ukládání na disk, rovnou CTRL + V), oříznu, rozmažu soukromá data, kliknu, obrázek se nahraje a vloží se BB kód s jeho adresou. To by bylo užitečný.
Marschmallow
Profil
Fisir:
Spíš bych uvítal revoluční HTML dodatek
A hele, to není vůbec špatný nápad, pokud by se jednalo o přilinkování jednoho souboru, zkusím něco vytvořit - bylo by to, ale stále propojené s DJPW uploadem. Zatím nevím, jak by to bylo s tím oříznutím, ale přes nějaký přilinkovaný soubor, by se mohl pod příspěvkovou částí zobrazovat formulář pro upload.

Něco zkusím...
« 1 2 3 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: