1. Home
  2. Forum
  3. Angular - EJ 2
  4. Upload file by custom API

Upload file by custom API

Hello Synfusion Team,

How can I upload an image to our own database via custom API and based upon the response, I want to show failed or success message.


public onUpload(args: SelectedEventArgs): void {
var file = args.file.rawFile;
this.fileName = args.file.name;
var reader = new FileReader();

reader.addEventListener('load', async (event: any) => {
var img = new Image();
img.src = event.target.result;
this.fileUrl = await event.target.result;
let request = { planId: 12333, name: this.fileName, image: await this.fileUrl }

this.commonService.getImageUrlFromAzure(request).subscribe(async (res: any) => {
if (res.success) {

} else {

}
})

});
reader.readAsDataURL(file as any);
}


onUpload() should be called when upload button is clicked as shown below.

getImageFromAzure(request) is our API call that gives a json response in below format.

{
"success": true,
"statusCode": 201,
"message": "Created successfully.",
"data": 'imageURL'
}

Steps:

  1. User selects the image from Local (message-Ready to Upload)
  2. User clicks on upload-
    The image should get uploaded to our Database with help of getImageFromAzure(request).
  3. Based upon this response it Receives the message should be "File Uploaded successfully" or "Upload Failed"




Thank You

Ansuman


1 Reply
DR Deepak Ramakrishnan Syncfusion Team December 14, 2021 12:49 PM UTC

Hi Ansuman, 
 
Greetings from Syncfusion support. 
 
Yes we can use saveUrl ad removeUrl properties of asyncSettings  to invoke the server api method . Kindly refer the below code snippets and sample for your reference.We can specify the save and remove url by “http(s): {host}/api /{Controller name}/{post method name}” 
 
 
[Client App] 
<ejs-   uploader  #defaultupload id='defaultfileupload' [autoUpload]='false'[asyncSettings]='path' [dropArea]='dropElement' > 
</ejs-uploader> 
 
public path: Object = { 
        saveUrl: 'http://localhost:51370/api/SampleData/Save', 
        removeUrl: 'http://localhost:51370/api/SampleData/Remove' 
    }; 
 
 
 
 
[Server App ] [Azure cloud] 
 
[HttpPost("[action]")] 
        public async Task Save(IList<IFormFile> UploadFiles) 
        { 
 
            try 
            { 
 
                foreach (var file in UploadFiles) 
                { 
 
                    const string accountName = "***"; // Provide your accountName 
                    const string key = "***"; // Provide your account key 
 
                    var storageAccount = new CloudStorageAccount(new StorageCredentials(accountName, key), true); 
 
                    var blobClient = storageAccount.CreateCloudBlobClient(); 
                    var container = blobClient.GetContainerReference("filo"); // Provide your container name 
                    await container.CreateIfNotExistsAsync(); 
                    await container.SetPermissionsAsync(new BlobContainerPermissions() 
                    { 
                        PublicAccess = BlobContainerPublicAccessType.Blob 
                    }); 
 
                    var blob = container.GetBlockBlobReference(file.FileName); 
                    using (var stream = file.OpenReadStream()) 
                    { 
                        await blob.UploadFromStreamAsync(stream); 
                    } 
                } 
            } 
            catch (Exception e) 
            { 
                Response.Clear(); 
                Response.StatusCode = 400; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 
                Response.Headers.Add("ID", "Maximum Uploaded files reached"); 
            } 
        } 
} 
 
 
 
 
 
 
 
API documentation :  
 
 
 
Also you can refer the following documentation for uploading the file using custom server  methods  
 
 
 
 
 
Thanks, 
Deepak R. 


Loader.
Up arrow icon