Upload Images to the Cloud using BaaS

Written by Sarina D on Posted in CLOUD

In RAD Studio, 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.

 

This demo consists of the following functionality:

  1. Load an image from the gallery
  2. Upload the image to your Parse.com or Kinvey.com account (you will need to sign up for an account)
  3. Display the image URL in an Edit control
  4. Download the uploaded image and display it in your app

 

Drop the following BaaS components onto your form:

  • TBackendFiles
  • TParseProvider or TKinveyProvider, connected to TBackendFiles
To be able to select images from the photo album on your device using either the 'Access Gallery' button or by clicking on the TImage, use the built-in action (TActionList). The TakePhotoFromLibrary action allows you to access an image from the library and then execute that action again on button click. In addition, the URL of my image location is assigned to an Edit control after you upload the image to Parse or Kinvey. The last step is to 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 C++ for the application:

//---------------------------------------------------------------------------

#include <fmx.h>
#pragma hdrstop

#include "ImageUploadBaaS_C.h"
#include <memory>
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.fmx"
TForm6 *Form6;
//---------------------------------------------------------------------------
__fastcall TForm6::TForm6(TComponent* Owner)
	: TForm(Owner)
{
}
//---------------------------------------------------------------------------
TStream * __fastcall TForm6::SaveImage(void)
{
	TMemoryStream  * _return = new TMemoryStream();
	try
    {
		Image1->Bitmap->SaveToStream(_return);
	}
	 catch(...)
	{
		delete _return;
		_return = NULL;
		throw;
	}
	return _return;
}
//---------------------------------------------------------------------------
void __fastcall TForm6::DownloadImage(const String &AUrl)
{
	std::auto_ptr<TMemoryStream> lStream(new TMemoryStream());
	Rest::Client::TDownloadURL::DownloadRawBytes(AUrl, lStream.get());
	Image2->Bitmap->LoadFromStream(lStream.get());

}
//---------------------------------------------------------------------------
void __fastcall TForm6::btnUploadImageClick(TObject *Sender)
{
	std::auto_ptr<TStream> lStream(this->SaveImage());
	TBackendEntityValue AFile;
	BackendFiles1->Files->UploadFile("mypicture3.png", lStream.get(), "image/png" , AFile);
	ShowMessage("Image has been uploaded");
	Edit1->Text = AFile.DownloadURL;
}
//---------------------------------------------------------------------------
void __fastcall TForm6::Image1Click(TObject *Sender)
{
	TakePhotoFromLibraryAction1->ExecuteTarget(btnAccessGallery);
}
//---------------------------------------------------------------------------

void __fastcall TForm6::Image2Click(TObject *Sender)
{
	DownloadImage(Edit1->Text);
}
//---------------------------------------------------------------------------

void __fastcall TForm6::btnDownloadImageClick(TObject *Sender)
{
	DownloadImage(Edit1->Text);
}
//---------------------------------------------------------------------------
void __fastcall TForm6::TakePhotoFromLibraryAction1DidFinishTaking(TBitmap *Image)

{
	Image1->Bitmap->Assign(Image);
}
//---------------------------------------------------------------------------

 

Tags: Mobile UI iOS Android Multi-Device Camera App Style C++ BaaS Kinvey Parse File Upload Images TBackendFiles



About
Gold User, Rank: 5, Points: 558

Check out more tips and tricks in this development video: