We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

angular file upload

Hi
I am new to syncfusion (Angular 5) component. I would like if someone can help me with the below requirement.
1) I would like to use angular upload.
2)It will be multiple uploads
3)It will be storing files on the blob field in sql server database
any advice. How can I achieve using angular file upload? Code sample will be excellent

1 Reply

GG Gopi Govindasamy Syncfusion Team January 15, 2020 04:03 PM UTC

Hi Irfan,  

Greetings from Syncfusion support.  

Query  1: I would like to use angular upload 
 
We have provided support for angular uploader component. Please refer the uploader getting started document and demo sample for your reference.  



Query 2: It will be multiple uploads 
 
By default, uploader component provided multiple file uploader support in angular platform. Please find the code snippet and sample for your reference.  

<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' multiple=true [dropArea]='dropElement'></ejs-uploader> 



Query 3: It will be storing files on the blob field in sql server database 
 
The file upload component saves the uploaded files in physical directories. Also, you can convert the file into binary format at server-side before saving the uploaded file. To retrieve binary format of image files, convert the posted file’s input stream into binary reader and read as bytes using ReadBytes method. You  can save the binary file to sql server database. Please find the code snippet and UG document for your reference.  

var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"]; 
 
            if (httpPostedFile != null) 
            { 
                byte[] fileBytes; 
                using (BinaryReader br = new BinaryReader(httpPostedFile.InputStream)) 
                { 
                    fileBytes = br.ReadBytes((int)httpPostedFile.InputStream.Length); 
                    // bytes will be stored in variable fileBytes 
                } 



Server side save and remove action in uploader component https://ej2.syncfusion.com/angular/documentation/uploader/file-source/  

Regards, 
Gopi G. 


Loader.
Up arrow icon