tirsdag den 16. april 2013

HTML5 image upload med Google Upclick.js


Jeg er gået lidt i gang med et nyt projekt : Geek CV.
Her skal man kunne oprette sig selv som profil, og indtaste sine data - hvorefter cv'et vil vedligeholde dine data up to data så godt som muligt med det der er indtastet og altid præsentere et resultat der passer til dags dato (forudsat at dine data stadig passer).

Når man har oprettet sig som bruger skal man kunne uploade et billede af sig selv, hvor jeg har lavet en placeholder til det. Når man trykker på dette skal man kunne uploade sit billede til serveren.

Problematikken i HTML5 er at når du bruger <input type="file"> så sættes automatisk en kontrol ind for dig. Det er meget smart, men hvis du ønsker at få en popup fra tryk på billedet er det lidt irriterende.
Derfor fandt jeg ud af Google code har noget javascript der kan hjælpe med det, som virker på div'er, billeder og knapper. Det hedder upclick.js.
Så der skal selvfølgelig bruges en masse AJAX her, hvilket jo er effektivt, lækkert og smart, som jo er det jeg kan li. Er et område jeg rigtigt gerne vil blive meget bedre til og meget stærkere i at lave.

Her skal man huske at tilpasse sti'erne fra eksemplerne for de passer ikke til det du har.
Derudover skal du lave en action der kan returnere noget som dit javascript kan forstå.
Det kan være en statusbesked, det kan være et objekt med state og alt muligt i eller hvad du nu ønsker.

Forskellen fra eksemplet og mit er at jeg bruger ASP.NET MVC4, så mine actions ser anderledes ud og jeg havde ikke noget eksempel at gøre brug af.
Jeg fandt ud af at
"element: uploader, "
er et meget vigtigt element.
Hvis du vil have din upload til at virke på et billede, så skal du indskrive id'et på billedet og så virker det automatisk.
Hvis du vil have det på en input knap så skal du skrive id'et på denne. Hvis det skal virke på en div, så skriver du div'ens id.
"dataname" det er hvad variablen med filen i hedder og som din server og backend skal have for at modtage denne.
"action" er denne del hvor du skal lave en side/action eller noget på din server der kan modtage dette request.


Det jeg gjorde galt var at jeg forsøgte at lave denne som en stor knap der fyldte det hele ovenover mit billede og så gøre den usynlig (opacity: 0), men desværre for mig har jeg en hover-effekt på som gør at den så blev ødelagt.
Heldigvis fandt jeg ud af at det slet ikke var nødvendigt da jeg kunne få selve billedet til at virke til at åbne popup'en, men det gør så at hover-effekten ikke virker helt som den skal men skal jeg så have rettet.

Så nu har jeg fået lavet min action, som modtager filen, validerer typen (billede), gemmer filen og sender et response tilbage. Heri ligger "fejlbesked" hvis formattet er forkert eller en anden fejl er sket, og en sti til hvor billedet ligger som skal requestes.
Indtil videre ligges de en midlertidig mappe som kan requestes fra client-side og dermed få vist sit billede.

Ingen kommentarer:

Send en kommentar

Kan du lide mit indlæg, har en kommentar, forslag eller andet på hjerte så skriv venligst