User944361600 posted
There are 2 tasks I'm trying to achieve,
- To upload a file t blob storage using web api.
- To retrieve the same file from blob storage from angular 8 client app and web api.
I was able to achieve the first task, but got stuck badly with the second task, I'm not sure of which way I can do that not I have any idea how to achieve the task. Below is the code I used to
Upload and Get the image.
[HttpPost]
[Route("updateuserprofileimage/{userguid}")]
public HttpResponseMessage UpdateUserProfileImageByUserGuid(Guid userGuid)
{
try
{
var httpContext = HttpContext.Current.Request;
if (httpContext.Files.Count == 0 || httpContext.Files[0].ContentLength == 0)
{
return Request.CreateResponse(HttpStatusCode.BadRequest, "Invalid file, please check your file and try again.");
}
var context = new BuffiniCodeBehindBusinessLogicProfile();
string fileName = httpContext.Files[0].FileName;
string contentType = httpContext.Files[0].ContentType;
var result = context.UpdateUserProfileImageByUserGuid(httpContext.Files[0].InputStream, userGuid, fileName, contentType);
return Request.CreateResponse(HttpStatusCode.OK, "Successfully uploaded.");
}
catch (Exception ex)
{
ErrorSignal.FromCurrentContext().Raise(ex);
throw ex;
}
}
// Code behind logic
public async Task UpdateUserProfileImageByUserGuid(Stream inputStream, Guid userGuid, string fileName, string contentType)
{
CloudStorageAccount ctxAdmin = CloudStorageAccount.Parse(ConfigurationManager.ConnectionStrings[Constants.CONFIG_KEY_BLOB_PROFILE_CONNECTION_STRING].ToString());
CloudBlobClient blobClient = ctxAdmin.CreateCloudBlobClient();
CloudBlobContainer container = blobClient.GetContainerReference(ConfigurationManager.AppSettings[Constants.APP_SETTINGS_BLOB_CONTAINER_ISSUER].ToString());
container.CreateIfNotExists();
string extension = Path.GetExtension(fileName);
string userGuidString = userGuid.ToString().ToLowerInvariant();
string newFileName = userGuidString + extension;
try
{
var blockBlobs = container.ListBlobs(prefix: userGuidString).OfType<CloudBlockBlob>();
foreach (var blockBlob in blockBlobs)
{
blockBlob.DeleteIfExists();
}
var blob = container.GetBlockBlobReference(newFileName);
blob.Properties.ContentType = contentType;
using (inputStream)
{
await blob.UploadFromStreamAsync(inputStream);
}
}
catch(StorageException ex)
{
//ErrorSignal.FromCurrentContext().Raise(ex);
throw ex;
}
}
Second task, getting the image:
[HttpGet]
[Route("getuserprofileimage/{userguid}")]
public async Task<HttpResponseMessage> GetUserProfileImageByUserGuid(Guid userGuid)
{
var context = new BuffiniCodeBehindBusinessLogicProfile();
CloudBlockBlob blockBlob = context.GetUserProfileImageByUserGuid(userGuid);
var blockBlobExists = await blockBlob.ExistsAsync();
if (!blockBlobExists)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, "File not found");
}
blockBlob.FetchAttributes();
HttpResponseMessage model = new HttpResponseMessage();
//Stream blockBlobStream = await blockBlob.OpenReadAsync();
byte[] blockBlobByte = new byte[blockBlob.Properties.Length];
blockBlob.DownloadToByteArray(blockBlobByte,0);
string contentType = blockBlob.Properties.ContentType;
//string base64Byte = Convert.ToBase64String(blockBlobByte);
//ByteArrayContent byteContent = new ByteArrayContent(blockBlobByte);
//var imageBase64 = Convert.ToBase64String(blockBlobByte);
model.Content = new ByteArrayContent(blockBlobByte);
//model.Content.Headers.ContentLength = blockBlob.Properties.Length;
model.Content.Headers.ContentType = new MediaTypeHeaderValue(contentType);
//model.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
//{
// FileName = blockBlob.Name,
// Size = blockBlob.Properties.Length
//};
//, new MediaTypeHeaderValue(contentType)
return Request.CreateResponse(HttpStatusCode.OK, model);
}
// Code behind file
public CloudBlockBlob GetUserProfileImageByUserGuid(Guid userGuid)
{
CloudStorageAccount ctxAdmin = CloudStorageAccount.Parse(ConfigurationManager.ConnectionStrings[Constants.CONFIG_KEY_BLOB_PROFILE_CONNECTION_STRING].ToString());
CloudBlobClient blobClient = ctxAdmin.CreateCloudBlobClient();
CloudBlobContainer container = blobClient.GetContainerReference(ConfigurationManager.AppSettings[Constants.APP_SETTINGS_BLOB_CONTAINER_ISSUER].ToString());
string fileName = userGuid.ToString().ToLower();
//CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);
//var blobClient = storageAccount.CreateCloudBlobClient();
//var container = blobClient.GetContainerReference("images");
//container.CreateIfNotExists();
var blockBlobs = container.ListBlobs(prefix: fileName).OfType<CloudBlockBlob>();
CloudBlockBlob blockBlob = blockBlobs.First();
return blockBlob;
}
Client app, Angular 8 - type script:
Client side code:
//Service.ts
getProfileImage(imageId: string): Observable<Blob> { //imageId: string + imageId
return this.http.get(this.imageInfoUrl + imageId, { responseType: 'blob' });
}
//component.ts
this.isImageLoading = true; //"6B1ECEBA-4D3B-4598-A1FC-6B7B1D6D99D2"
this.profileService.getProfileImage("6B1ECEBA-4D3B-4598-A1FC-6B7B1D6D99D2/").subscribe(
data => {
console.log("ananth");
this.createImageFromBlob(data);
this.isImageLoading = false;
console.log(data);
},
error => {
this.isImageLoading = false;
this.errorMessage = <any>error;
}
);
createImageFromBlob(image: Blob) {
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result);
this.imageToShow = reader.result;
console.log('ananth2');
};
if (image) {
console.log('ananth3');
reader.readAsDataURL(image);
}
}
// Html div
<div> <div>
<div class="image">
<!-- <img class="btn-md" src="assets/images/default.png" alt="" style="border-radius:50%;"> -->
<img class="btn-md" [src]="imageToShow" alt="" *ngIf="!isImageLoading; else noImageFound"
style="border-radius:50%;">
<div class="file btn">
<input type="file" name="file" />
</div>
</div>
Pardon me if I have committed any mistakes, because I'm pretty new to angular 8 and this type of situation.
Kindly help me out, how to get this task done. I appreciate any help. Thanks
How to get a file (Image file - jpg/jpeg/png) from Azure blob storage and pass it to client application (angular 8/ typescript)?
