Force Auto Refresh Image From Server

Katalah korang ada satu page, di mana korang ada save gambar user profile, macam ni.

Ini adalah contoh setting page yang biasa. ada satu image untuk tunjuk gambar sekarang, dan ada satu button untuk upload gambar baru. Katalah dalam example ini, Jackie Chan baru saje buat pembedahan plastik, jadi dia pun tukar profile picture dia kepada gambar pempuan. 

Ape dia? Mane aku dapat gambar awek ni? ade la aku cilok kat internet.... 

Selepas Jackie Chan berpuas hati dengan gambar barunya, dia pun tekan Save. Tetapi, selepas dia tekan Save, sesuatu yang tidak diingini telah berlaku.

Bila aku tekan button save picture, sekali gambar tukar balik kepada gambar jackie chan. padehal dalam server dah update dah kepada gambar awek terbaru.

Ini adalah satu masalah.

Lahanat apekah ini? adekah ini semua salah anwar?

Sebenarnya, mende ini adelah dijangkakan. Ini adelah kerana, mane-mane web browser pun akan reload balek gambar daripada cache, dan bukan gambar terkini daripada server. Dengan cara ini, browser tak perlu reload semua gambar yang ada dalam website, especially kalau website tu penuh dengan gambar. Bila browser tak perlu loading semua gambar, maka dapatlah korang merasai kenikmatan webpage yang laju.

Tapi, dalam kes ini... kita memang nak browser tersebut download imej terbaru daripada server. 

Cara untuk menyelesaikan masalah ini? Marilah kita beramai-ramai memaksa web browser kita mendownload imej yang terbaru daripada server untuk kesejahteraan umat sejagat.

Macam manekah nak buat demikian? cakap senang la... cer buat tengok... 
kita buat cara paling simple - iaitu taruk querystring kat blakang, seperti di bawah.

//taruk queryString "t" kat belakang, padahal tak pakai pun
string profilePhoto = "/Images/" + filename + ".jpg";
profilePhoto += "?t=" + Guid.NewGuid();

Aku tambah satu line kat bawah line di mana aku generate profile photo tu punye URL.
Lepas tu, aku taruk QueryString t kat belakang, dan aku taruk random number.
ape guna queryString t tersebut? memang takde guna pun.
aku cuma letak semata-mata supaya browser ingat itu adelah nama fail yang baru. Padehal aku overwrite je gambar yang lama.

Dengan trick yang mudah ini, browser akan baca imageURL itu sebagai URL baru, jadi dia akan loading imej tersebut sekali lagi dari server, dan bukan amek dari cache.

Problem Solved! 

Jumpa lagi di episod akan datang.