Resim Yükleme

[SimaWB]

Forumda yorum yazarken bazen yoruma resim eklememiz gerekebiliyor. Gördüğüm kadarıyla genelde bunun için hizliresim.com kullanılıyor.
Malum bizler yazılımcı insanlarız ve sürekli yaptığımız işlemleri otomatikleştirmekte üzerimize yoktur
Her resim paylaşmak istediğimizde malum web sitesine gidip, onun arayüzü ile uğraşmak yerine ufak bir programla bunu yapmak bize daha çok yakışır


Bu iş için HTML parse ile web sitesine post işlemi uygulanabilir ama daha efektif olması için API servisi olan bir web sitesi kullanmak daha mantıklı olur. Ben bu yüzden Cloudinary adında bir web sitesi kullandım. Ücretsiz üyeliği ile 10 GB alan ve 300.000 resim yükleme izni veriyor. Daha ne olsun : 
Bu adresten siteye ücretsiz üye olabilirsiniz.


Üye olduktan sonra bize gerekli olan 2 bilgi var. Bunlardan birincisi Image upload URL'si. Üye olduktan sonra açılan ilk sayfanın sol üst köşesinde Account Details kısmı var. Aşağıdaki resimde görebilirsiniz:



Bunun sağ alt köşesinde bulunan More linkine tıkladığımızda API Base URL görünecektir. Bunun da en sağındaki ok işaretine tıklarsanız Image upload url'sini görebilirsiniz. Benim üyeliğim için bu URL şu şekilde:
https://api.cloudinary.com/v1_1/delphican/image/upload

Bize gerekli olan ikinci bilgi ise Upload preset değeri. Bunu almak için ayarlar sayfasına girmeliyiz. Sağ üst köşede Settings ikonu var. Açılan sayfada Upload bölümünü tıklıyoruz. (Kısaca gideceğimiz adres: https://cloudinary.com/console/settings/upload)
Bu sayfanın en alt kısmında Enable unsigned uploading başlığı var. Buna tıklıyoruz. Tıkladığımızda Unsigned uploading enabled yazısı ve altında Name vs. bilgileri çıkmalı. Bize burada gerekli olan işte bu Name değeridir. (Bunu upload_preset olarak projemizde kullanacağız)
Unsigned uploading'i aktif ederek API Key ve API Secret kullanmadan resim yükleme yapabilir hale geldik.


Artık web sitesindeki gerekli bilgileri aldık ve böylece cloudinary.com ile işimiz bitti. Gelelim programımıza:
Formumuza aşağıdaki bileşenlerini yerleştiriyoruz. 



RESTClient1'in BaseURL'sine yukarıda elde ettiğimiz "Image upload url"yi yazıyoruz.
RESTRequest'in Method özelliğiniz rmPOST yazpıyoruz.

Buttonun OnClick olayına aşağıdakileri yazıyoruz:

procedure TForm1.Button1Click(Sender: TObject);
begin
 if OpenPictureDialog1.Execute then
 begin
   RESTRequest1.AddParameter('upload_preset', 'yukarıda elde ettiğimiz upload_preset değeri');
   RESTRequest1.AddParameter('file', OpenPictureDialog1.FileName, TRESTRequestParameterKind.pkFILE);
   RESTRequest1.Execute;
   if RESTResponse1.Status.SuccessOK_200 then
   begin
     Showmessage(RESTResponse1.JSONText);
   end;
 end;
end;

Kodu denerseniz JSON formatında detaylı bir cevap aldığınızı görürsünüz. 
Bu cevap içinde bize gerekli olan bilgi url değeridir. 
JSON objenin içinden bu bilgiyi alıp Clipboard'a kopyalayıp forumumuza makale yazarken bu linki paylaşabiliriz

var
 jValue: TJSONValue;
...
...
   if RESTResponse1.Status.SuccessOK_200 then
   begin
     jValue := restRsp.JSONValue;
     Clipboard.AsText := jValue.GetValue<String>('url');
   end;

Yazılan tüm kodlar bu kadar olduğu için ayrıca kod paylaşmaya gerek görmedim.

Dipçe:  JSON, Clipboard ve TRESTRequestParameterKind tipi için uses kısmına şunlar eklenmeli: REST.Types, System.JSON, Vcl.Clipbrd

[mcuyan]

Hocam yine döktürmüşsünüz Maşallah.. Elinize sağlık..

[yhackup]

Elinize sağlık, ekran görüntüsü alıp kırpabilse keşke

[TescilsizUzman]

Merhaba,
Değerli paylaşım ve katkılarınızdan dolayı teşekkür ederim.
Kullanılan bileşenlerin (OpenDialog hariç) multi-platform desteği olduğundan, kodlar mobil platformda da çalışacaktır.
Hedeflerimiz arasında yer alan DelphiCan Mobil Uygulamasını hayata geçirdiğimizde, bu özelliği ve yhackup'un öneride bulunduğu resim düzenleme özellikleri de entegre edilebilir.
Bu arada makale 5 yıldızı hak ediyor; puanlamaya ilaveten konunun sağ üst köşesinde yer alan derecelendirmeyi de kullanalım.

[malitutuncu]

Hocam eline koluna sağlık. bende hızlı resime atıyordum direk ancak bir süre sonra resimler gidince hiç hoş olmuyor. bundan sonra burayı kullanayım

[edo]

(20-02-2018, Saat: 00:20)SimaWB Adlı Kullanıcıdan Alıntı: Forumda yorum yazarken bazen yoruma resim eklememiz gerekebiliyor. Gördüğüm kadarıyla genelde bunun için hizliresim.com kullanılıyor.
Malum bizler yazılımcı insanlarız ve sürekli yaptığımız işlemleri otomatikleştirmekte üzerimize yoktur
Her resim paylaşmak istediğimizde malum web sitesine gidip, onun arayüzü ile uğraşmak yerine ufak bir programla bunu yapmak bize daha çok yakışır


Bu iş için HTML parse ile web sitesine post işlemi uygulanabilir ama daha efektif olması için API servisi olan bir web sitesi kullanmak daha mantıklı olur. Ben bu yüzden Cloudinary adında bir web sitesi kullandım. Ücretsiz üyeliği ile 10 GB alan ve 300.000 resim yükleme izni veriyor. Daha ne olsun : 
Bu adresten siteye ücretsiz üye olabilirsiniz.


Üye olduktan sonra bize gerekli olan 2 bilgi var. Bunlardan birincisi Image upload URL'si. Üye olduktan sonra açılan ilk sayfanın sol üst köşesinde Account Details kısmı var. Aşağıdaki resimde görebilirsiniz:



Bunun sağ alt köşesinde bulunan More linkine tıkladığımızda API Base URL görünecektir. Bunun da en sağındaki ok işaretine tıklarsanız Image upload url'sini görebilirsiniz. Benim üyeliğim için bu URL şu şekilde:
https://api.cloudinary.com/v1_1/delphican/image/upload

Bize gerekli olan ikinci bilgi ise Upload preset değeri. Bunu almak için ayarlar sayfasına girmeliyiz. Sağ üst köşede Settings ikonu var. Açılan sayfada Upload bölümünü tıklıyoruz. (Kısaca gideceğimiz adres: https://cloudinary.com/console/settings/upload)
Bu sayfanın en alt kısmında Enable unsigned uploading başlığı var. Buna tıklıyoruz. Tıkladığımızda Unsigned uploading enabled yazısı ve altında Name vs. bilgileri çıkmalı. Bize burada gerekli olan işte bu Name değeridir. (Bunu upload_preset olarak projemizde kullanacağız)
Unsigned uploading'i aktif ederek API Key ve API Secret kullanmadan resim yükleme yapabilir hale geldik.


Artık web sitesindeki gerekli bilgileri aldık ve böylece cloudinary.com ile işimiz bitti. Gelelim programımıza:
Formumuza aşağıdaki bileşenlerini yerleştiriyoruz. 



RESTClient1'in BaseURL'sine yukarıda elde ettiğimiz "Image upload url"yi yazıyoruz.
RESTRequest'in Method özelliğiniz rmPOST yazpıyoruz.

Buttonun OnClick olayına aşağıdakileri yazıyoruz:

procedure TForm1.Button1Click(Sender: TObject);
begin
 if OpenPictureDialog1.Execute then
 begin
   RESTRequest1.AddParameter('upload_preset', 'yukarıda elde ettiğimiz upload_preset değeri');
   RESTRequest1.AddParameter('file', OpenPictureDialog1.FileName, TRESTRequestParameterKind.pkFILE);
   RESTRequest1.Execute;
   if RESTResponse1.Status.SuccessOK_200 then
   begin
     Showmessage(RESTResponse1.JSONText);
   end;
 end;
end;

Kodu denerseniz JSON formatında detaylı bir cevap aldığınızı görürsünüz. 
Bu cevap içinde bize gerekli olan bilgi url değeridir. 
JSON objenin içinden bu bilgiyi alıp Clipboard'a kopyalayıp forumumuza makale yazarken bu linki paylaşabiliriz

var
 jValue: TJSONValue;
...
...
   if RESTResponse1.Status.SuccessOK_200 then
   begin
     jValue := restRsp.JSONValue;
     Clipboard.AsText := jValue.GetValue<String>('url');
   end;

Yazılan tüm kodlar bu kadar olduğu için ayrıca kod paylaşmaya gerek görmedim.

Dipçe:  JSON, Clipboard ve TRESTRequestParameterKind tipi için uses kısmına şunlar eklenmeli: REST.Types, System.JSON, Vcl.Clipbrd

Öncelikle emeğinize sağlık, gerçekten çok güzel bir makale olmuş. Yalnız şöyle bir sorun var; bu tarz sitelere yüklenen resimler site kapanırsa ya da erişimleri engellenirse forumun içersinde bir sürü konu başlığının içeriğini köstebek yuvasına çevirme potansiyeline sahip. Şu anda çok kullanılan hızlıresim sitesindeki resimleri ben göremiyorum mesela -şirkette-

O yüzden mümkün mertebe sitenin alt yapısının kullanılması daha uygun olabilir.

[frmman]

Teşekkürler @SimaWB hocam

[klavye]

Elinize saglik

[TescilsizUzman]

(20-02-2018, Saat: 09:23)edo Adlı Kullanıcıdan Alıntı:

(20-02-2018, Saat: 00:20)SimaWB Adlı Kullanıcıdan Alıntı: Forumda yorum yazarken bazen yoruma resim eklememiz gerekebiliyor. Gördüğüm kadarıyla genelde bunun için hizliresim.com kullanılıyor.
Malum bizler yazılımcı insanlarız ve sürekli yaptığımız işlemleri otomatikleştirmekte üzerimize yoktur
Her resim paylaşmak istediğimizde malum web sitesine gidip, onun arayüzü ile uğraşmak yerine ufak bir programla bunu yapmak bize daha çok yakışır


Bu iş için HTML parse ile web sitesine post işlemi uygulanabilir ama daha efektif olması için API servisi olan bir web sitesi kullanmak daha mantıklı olur. Ben bu yüzden Cloudinary adında bir web sitesi kullandım. Ücretsiz üyeliği ile 10 GB alan ve 300.000 resim yükleme izni veriyor. Daha ne olsun : 
Bu adresten siteye ücretsiz üye olabilirsiniz.


Üye olduktan sonra bize gerekli olan 2 bilgi var. Bunlardan birincisi Image upload URL'si. Üye olduktan sonra açılan ilk sayfanın sol üst köşesinde Account Details kısmı var. Aşağıdaki resimde görebilirsiniz:



Bunun sağ alt köşesinde bulunan More linkine tıkladığımızda API Base URL görünecektir. Bunun da en sağındaki ok işaretine tıklarsanız Image upload url'sini görebilirsiniz. Benim üyeliğim için bu URL şu şekilde:
https://api.cloudinary.com/v1_1/delphican/image/upload

Bize gerekli olan ikinci bilgi ise Upload preset değeri. Bunu almak için ayarlar sayfasına girmeliyiz. Sağ üst köşede Settings ikonu var. Açılan sayfada Upload bölümünü tıklıyoruz. (Kısaca gideceğimiz adres: https://cloudinary.com/console/settings/upload)
Bu sayfanın en alt kısmında Enable unsigned uploading başlığı var. Buna tıklıyoruz. Tıkladığımızda Unsigned uploading enabled yazısı ve altında Name vs. bilgileri çıkmalı. Bize burada gerekli olan işte bu Name değeridir. (Bunu upload_preset olarak projemizde kullanacağız)
Unsigned uploading'i aktif ederek API Key ve API Secret kullanmadan resim yükleme yapabilir hale geldik.


Artık web sitesindeki gerekli bilgileri aldık ve böylece cloudinary.com ile işimiz bitti. Gelelim programımıza:
Formumuza aşağıdaki bileşenlerini yerleştiriyoruz. 



RESTClient1'in BaseURL'sine yukarıda elde ettiğimiz "Image upload url"yi yazıyoruz.
RESTRequest'in Method özelliğiniz rmPOST yazpıyoruz.

Buttonun OnClick olayına aşağıdakileri yazıyoruz:

procedure TForm1.Button1Click(Sender: TObject);
begin
 if OpenPictureDialog1.Execute then
 begin
   RESTRequest1.AddParameter('upload_preset', 'yukarıda elde ettiğimiz upload_preset değeri');
   RESTRequest1.AddParameter('file', OpenPictureDialog1.FileName, TRESTRequestParameterKind.pkFILE);
   RESTRequest1.Execute;
   if RESTResponse1.Status.SuccessOK_200 then
   begin
     Showmessage(RESTResponse1.JSONText);
   end;
 end;
end;

Kodu denerseniz JSON formatında detaylı bir cevap aldığınızı görürsünüz. 
Bu cevap içinde bize gerekli olan bilgi url değeridir. 
JSON objenin içinden bu bilgiyi alıp Clipboard'a kopyalayıp forumumuza makale yazarken bu linki paylaşabiliriz

var
 jValue: TJSONValue;
...
...
   if RESTResponse1.Status.SuccessOK_200 then
   begin
     jValue := restRsp.JSONValue;
     Clipboard.AsText := jValue.GetValue<String>('url');
   end;

Yazılan tüm kodlar bu kadar olduğu için ayrıca kod paylaşmaya gerek görmedim.

Dipçe:  JSON, Clipboard ve TRESTRequestParameterKind tipi için uses kısmına şunlar eklenmeli: REST.Types, System.JSON, Vcl.Clipbrd

Öncelikle emeğinize sağlık, gerçekten çok güzel bir makale olmuş. Yalnız şöyle bir sorun var; bu tarz sitelere yüklenen resimler site kapanırsa ya da erişimleri engellenirse forumun içersinde bir sürü konu başlığının içeriğini köstebek yuvasına çevirme potansiyeline sahip. Şu anda çok kullanılan hızlıresim sitesindeki resimleri ben göremiyorum mesela -şirkette-

O yüzden mümkün mertebe sitenin alt yapısının kullanılması daha uygun olabilir.

Merhaba,
Haklısınız, bu konu daha önce de gündeme gelmişti ve sizin de belirttiğiniz yöntemin daha uygun olacağı benimsenmişti.
Hosting'imizin Storage kapasitesi yeterli derecededir. 
Bu yöntem için bir arayüz gerekiyor. 
DelphiCan'ın kullanmış olduğu form tipi myBB'dir. myBB eklentisi veya PHP bir arayüz ile resimler formun bulunduğu sunucuya yüklenebilir. 
Tabi bu konuda yine destek bekliyoruz. (Her şeyi ben'den beklemeyin.  )

[SimaWB]

Hepinize teşekkür ederim.

(20-02-2018, Saat: 07:51)yhackup Adlı Kullanıcıdan Alıntı: Elinize sağlık,  ekran görüntüsü alıp kırpabilse keşke

Aslında projenin tamamında ilgili kısım o şekilde çalışıyor. 
Büyük bir işin küçük bir kısmını -birilerinin işine yarar diye- paylaşmak istedim.
Şimdilik bu kadarlık kısmı yeterli, tamamlanınca tabii ki tamamı paylaşılacak