Upload file by custom API

[Ansuman Panda]

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

[Deepak Ramakrishnan]

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"); 

            } 

        } 

} 

 

 

 

Client App : https://stackblitz.com/edit/angular-bm9ahw-mpezth?file=app.component.ts  

 

Server App : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1427034827.zip  

 

 

 

API documentation :  

 

https://ej2.syncfusion.com/angular/documentation/api/uploader#asyncsettings  

 

 

Also you can refer the following documentation for uploading the file using custom server  methods  

 

https://ej2.syncfusion.com/angular/documentation/uploader/async/#server-side-configuration-for-save-action  

 

 

 

 

Thanks, 

Deepak R.