Uploading images to the cloud with BaaS in RAD Studio XE6

cppcolors | Embarcadero RAD Studio Delphi C++Builder Blogs

In Delphi, C++Builder and RAD Studio XE6, we integrate with leading Backend as a Service (BaaS) providers to add functionality and platform services to your applications. With BaaS, you get easy access to common services in the cloud without having to build or maintain the backend services yourself. This includes support for being able to upload images to your BaaS account using RAD Studio XE6.

Today, I thought I would create a demo that shows you how to load an image from the gallery, upload it to your Parse.com account (you will need to sign up for an account), display the image URL in an Edit control and then download the uploaded image and display it in your app.

I used the following BaaS components:

TBackendFiles

TParseProvider (you could also use TKinveyProvider)

I wanted to be able to select images from the photo album on my device using either the ‘Access Gallery’ button or by clicking on the TImage. I used the built-in action (TActionList) for accessing an image from the library and then executed that action again on button click. In addition, the URL of my image location is assigned to an Edit control after I upload the image to Parse. I also set up an on-click event to download the image using the provided URL and then assign it to a TImage.

The user interface of my application consists of a toolbar with a parented TLabel for the title, a TListbox with several listbox items and two TListbox Groupheaders for displaying the titles.

Here is the Object Pascal Code for my application:

unit ImageUploadBaaS_OP;<br>
<br>
interface<br>
<br>
uses<br>
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,<br>
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, IPPeerClient,<br>
  REST.Backend.ServiceTypes, REST.Backend.MetaTypes,<br>
  REST.Backend.KinveyServices, System.JSON, REST.OpenSSL,<br>
  REST.Backend.KinveyProvider, REST.Backend.Providers,<br>
  REST.Backend.ServiceComponents, FMX.Objects, FMX.StdCtrls, FMX.Edit, REST.Client,<br>
  FMX.TabControl, System.Actions, FMX.ActnList, FMX.StdActns,<br>
  FMX.MediaLibrary.Actions, REST.Backend.ParseServices,<br>
  REST.Backend.ParseProvider, FMX.ListBox, FMX.Layouts;<br>
<br>
type<br>
  TForm1 = class(TForm)<br>
    BackendFiles1: TBackendFiles;<br>
    btnUploadImage: TButton;<br>
    Image1: TImage;<br>
    Image2: TImage;<br>
    btnDownloadImage: TButton;<br>
    Edit1: TEdit;<br>
    ActionList1: TActionList;<br>
    TakePhotoFromCameraAction1: TTakePhotoFromCameraAction;<br>
    TakePhotoFromLibraryAction1: TTakePhotoFromLibraryAction;<br>
    ParseProvider1: TParseProvider;<br>
    ToolBar2: TToolBar;<br>
    Label2: TLabel;<br>
    ListBox1: TListBox;<br>
    ListBoxGroupHeader1: TListBoxGroupHeader;<br>
    ListBoxItem1: TListBoxItem;<br>
    ListBoxItem2: TListBoxItem;<br>
    imagedownload: TListBoxGroupHeader;<br>
    ListBoxItem3: TListBoxItem;<br>
    btnAccessGallery: TButton;<br>
    procedure btnUploadImageClick(Sender: TObject);<br>
    procedure btnDownloadImageClick(Sender: TObject);<br>
    procedure TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);<br>
    procedure Image1Click(Sender: TObject);<br>
    procedure Image2Click(Sender: TObject);<br>
  private<br>
    function SaveImage: TStream;<br>
    procedure DownloadImage(const AUrl: string);<br>
    { Private declarations }<br>
  public<br>
    { Public declarations }<br>
  end;<br>
<br>
var<br>
  Form1: TForm1;<br>
<br>
implementation<br>
<br>
{$R *.fmx}<br>
<br>
procedure TForm1.btnUploadImageClick(Sender: TObject);<br>
var<br>
LStream: TStream;<br>
LFile: TBackendEntityValue;<br>
begin<br>
LStream := SaveImage;<br>
   try<br>
     BackEndFiles1.Files.UploadFile('mypicture3.png',LStream, 'image/png',LFile);<br>
     ShowMessage('Image has been uploaded');<br>
     Edit1.Text := LFile.DownloadURL;<br>
   finally<br>
       LStream.Free;<br>
   end;<br>
end;<br>
<br>
 procedure TForm1.DownloadImage(const AUrl: string);<br>
var<br>
  LStream: TMemoryStream;<br>
    begin<br>
      LStream := TMemoryStream.Create;<br>
      try<br>
      REST.Client.TDownloadURL.DownloadRawBytes(AUrl, LStream);<br>
        Image2.Bitmap.LoadFromStream(LStream);<br>
      finally<br>
        LStream.Free;<br>
      end;<br>
    end;<br>
<br>
procedure TForm1.Image1Click(Sender: TObject);<br>
begin<br>
  TakePhotoFromLibraryAction1.ExecuteTarget(btnAccessGallery);<br>
end;<br>
<br>
<br>
procedure TForm1.Image2Click(Sender: TObject);<br>
begin<br>
 DownloadImage(Edit1.Text);<br>
end;<br>
<br>
procedure TForm1.btnDownloadImageClick(Sender: TObject);<br>
begin<br>
 DownloadImage(Edit1.Text);<br>
end;<br>
<br>
function TForm1.SaveImage: TStream;<br>
begin<br>
  Result := nil;<br>
  begin<br>
    Result := TMemoryStream.Create;<br>
    try<br>
      Image1.Bitmap.SaveToStream(Result);<br>
    except<br>
      Result.Free;<br>
      raise;<br>
    end;<br>
  end;<br>
end;<br>
<br>
procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);<br>
begin<br>
  Image1.Bitmap.Assign(Image);<br>
end;<br>
<br>
end.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

unit ImageUploadBaaS_OP;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,

FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, IPPeerClient,

REST.Backend.ServiceTypes, REST.Backend.MetaTypes,

REST.Backend.KinveyServices, System.JSON, REST.OpenSSL,

REST.Backend.KinveyProvider, REST.Backend.Providers,

REST.Backend.ServiceComponents, FMX.Objects, FMX.StdCtrls, FMX.Edit, REST.Client,

FMX.TabControl, System.Actions, FMX.ActnList, FMX.StdActns,

FMX.MediaLibrary.Actions, REST.Backend.ParseServices,

REST.Backend.ParseProvider, FMX.ListBox, FMX.Layouts;

type

TForm1 = class(TForm)

BackendFiles1: TBackendFiles;

btnUploadImage: TButton;

Image1: TImage;

Image2: TImage;

btnDownloadImage: TButton;

Edit1: TEdit;

ActionList1: TActionList;

TakePhotoFromCameraAction1: TTakePhotoFromCameraAction;

TakePhotoFromLibraryAction1: TTakePhotoFromLibraryAction;

ParseProvider1: TParseProvider;

ToolBar2: TToolBar;

Label2: TLabel;

ListBox1: TListBox;

ListBoxGroupHeader1: TListBoxGroupHeader;

ListBoxItem1: TListBoxItem;

ListBoxItem2: TListBoxItem;

imagedownload: TListBoxGroupHeader;

ListBoxItem3: TListBoxItem;

btnAccessGallery: TButton;

procedure btnUploadImageClick(Sender: TObject);

procedure btnDownloadImageClick(Sender: TObject);

procedure TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);

procedure Image1Click(Sender: TObject);

procedure Image2Click(Sender: TObject);

private

function SaveImage: TStream;

procedure DownloadImage(const AUrl: string);

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.btnUploadImageClick(Sender: TObject);

var

LStream: TStream;

LFile: TBackendEntityValue;

begin

LStream := SaveImage;

try

BackEndFiles1.Files.UploadFile('mypicture3.png',LStream, 'image/png',LFile);

ShowMessage('Image has been uploaded');

Edit1.Text := LFile.DownloadURL;

finally

LStream.Free;

end;

procedure TForm1.DownloadImage(const AUrl: string);

var

LStream: TMemoryStream;

begin

LStream := TMemoryStream.Create;

try

REST.Client.TDownloadURL.DownloadRawBytes(AUrl, LStream);

Image2.Bitmap.LoadFromStream(LStream);

finally

LStream.Free;

end;

procedure TForm1.Image1Click(Sender: TObject);

begin

TakePhotoFromLibraryAction1.ExecuteTarget(btnAccessGallery);

end;

procedure TForm1.Image2Click(Sender: TObject);

begin

DownloadImage(Edit1.Text);

end;

procedure TForm1.btnDownloadImageClick(Sender: TObject);

begin

DownloadImage(Edit1.Text);

end;

function TForm1.SaveImage: TStream;

begin

Result := nil;

begin

Result := TMemoryStream.Create;

try

Image1.Bitmap.SaveToStream(Result);

except

Result.Free;

raise;

end;

procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);

begin

Image1.Bitmap.Assign(Image);

end;

end.

Note: This requires XE6 Update 1 to be installed.

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today

Free Delphi Community Edition Free C++Builder Community Edition

2 Comments


francisco javier chacon flores

May 3, 2024 at 9:48 am

I’ve read your blog, it was very interesting. I’ve found very little about the ‘Bass Client’ components in Embarcadero. I’m using Delphi 11, and I’ve managed to upload files from a VCL application to Back4App, but I haven’t been able to manipulate the ACL for security purposes. Could you guide me on where to find the Delphi documentation for these components?
- Reply
  
  Ian Barker
  
  May 3, 2024 at 11:14 am
  
  I think these articles may help:
  
  https://github.com/JordiCorbilla/BaaSDelphiSamples
  
  https://docwiki.embarcadero.com/Libraries/Athens/en/REST.Backend.KinveyProvider.TKinveyProvider

Uploading images to the cloud with BaaS in RAD Studio XE6

About author

Sarina DuPont

2 Comments

Leave a ReplyCancel reply

Search

Something Fresh

Charles "Charlie" Calvert, Developer, Educator, And A Thoroughly Decent Man

Who Uses Delphi? The Silent Success Behind Astronauts, Theme Parks, Satellites, And A Multi-billion Ultimate Payday!

Instruction Sets in C++Builder 12.3!

Popular Posts

RAD Studio 12.2 Athens Inline Patch 1 Available

Announcing the Availability of RAD Studio 12.2 Athens

New in 12.3: Scripts for Migration from InterBase Express to FireDAC

AI-Powered Smart CodeInsight in RAD Studio 12.3

Announcing the Availability of RAD Studio 12.3 Athens

RAD Studio 12.2 Athens Inline Patch 1 Available

Announcing the Availability of RAD Studio 12.2 Athens

New in 12.3: Scripts for Migration from InterBase Express to FireDAC

AI-Powered Smart CodeInsight in RAD Studio 12.3

Categories

Popular From News

New in 10.3.2: C++17 for Win64 - target all Windows with the C++17 Clang compiler

Delphi 12 And C++Builder 12 Community Editions Released!

We've Updated The HUGE Delphi Anniversary “Innovation Timeline” Infographic. Grab it Now!

Embarcadero InterBase 2020 Update 6 Released!

3 x 12 VCL Enhancements in Delphi 12

C++Builder @ stackoverflow

Delphi @ stackoverflow

InterBase @ stackoverflow

Categories

Useful Links

Follow us

Uploading images to the cloud with BaaS in RAD Studio XE6

About author

2 Comments

Leave a ReplyCancel reply

Join Our Global Developer Community

Search

Something Fresh

Popular Posts

Categories

Popular From News

Categories

Useful Links

Follow us