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
close icon

grid column with file upload

Hi,

I need a column grid with this:

1 - In edit mode, the column has a file upload for select a single file
2 - In other mode, if there is a file, this column show a link with the file for download

How can I do it?

Thanks a lot

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team January 5, 2017 01:33 AM UTC

Hi Manolo, 
 
Thanks for contacting Syncfusion support.  
  
We have created a custom and in which we have defined three columns (Document IDDocument Name and Download). The Download column is displayed as hyperlink using column template feature of grid. While clicking the hyperlink, it will download the excel file and for adding or editing a record that we have rendered ejUploadBox to upload/edit the document. Please refer to the code example and sample,  
  
Code example::    
 
// Upload the document and saved it in a folder.  
public void saveFiles()  
        {  
            if (HttpContext.Current.Request.Files.AllKeys.Any())  
            {  
                var httpPostedFile = HttpContext.Current.Request.Files["Uploadbox"];  
  
                if (httpPostedFile != null)  
                {  
                    fileName = httpPostedFile.FileName;  
                    destination = Path.Combine(HttpContext.Current.Server.MapPath("~/App_Data"), fileName);  
                    httpPostedFile.SaveAs(destination);  
                }  
            }  
        }  
  
// Convert the excel file into bytes and stored into a Blob column  
  
public void Post(OrderTable value)  
        {  
            string filePath = destination;  
            string filename = fileName;  
  
             
            FileStream fs = new FileStream(filePath, FileMode.Open, FileAccess.Read);  
            BinaryReader br = new BinaryReader(fs);  
            Byte[] bytes = br.ReadBytes((Int32)fs.Length);  
            br.Close();  
            fs.Close();  
            var connection = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString;  
            SqlConnection sqlCon = new SqlConnection(connection);  
            SqlCommand sqlComm = new SqlCommand("INSERT INTO [dbo].[Document]([DocumentID],[DocumentName],[Download]) VALUES (@DocumentID, @DocumentName, @Download)", sqlCon);  
            sqlComm.Parameters.AddWithValue("@DocumentID", value.DocumentID);  
            sqlComm.Parameters.AddWithValue("@DocumentName", value.DocumentName);  
            sqlComm.ExecuteNonQuery();  
            sqlCon.Close();  
        }  
  
// Retrieve the excel file  
 
public void RetrieveFile()  
        {  
            string gridModel = HttpContext.Request.Params["GridModel"];  
            GridProperties gridPropert = ConvertGridObject(gridModel);  
            var connection = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString;  
            var dataTable = new DataTable();  
            using (SqlConnection cn = new SqlConnection(connection))  
            {  
                cn.Open();  
                SqlCommand cmd = new SqlCommand("SELECT * FROM Document WHERE DocumentID = '" + Record + "'", cn);  
                SqlDataAdapter da = new SqlDataAdapter(cmd);  
                da.Fill(dataTable);  
                if (dataTable != null)  
                {  
                    download(dataTable);  
                }  
            }  
  
        }  
                    / /Download the excel File  
  
        private void download(DataTable dt)  
        {  
            Byte[] bytes = (Byte[])dt.Rows[0]["Download"];  
            Response.Buffer = true;  
            Response.Charset = "";  
            Response.Cache.SetCacheability(HttpCacheability.NoCache);  
            Response.ContentType = "application/excel";  
            Response.AddHeader("Content-disposition""filename=output.xlsx");  
            Response.BinaryWrite(bytes);  
            Response.Flush();  
            Response.End();  
        }  
 
 
 
Note In the above sample, we have achieved to download the excel file only. Similarly, you can achieve this behavior for PDF and Word document too. Please refer to the below help links to download other extension files.    
  
  
Regards,  
Venkatesh Ayothiraman. 



PL Praveen Lobo February 8, 2022 05:22 AM UTC

Hi,


I am trying UploaderComponent inside the React Grid component. I am able to upload the file without any issues.

When I try to update the grid after upload, I get the below error. 


TypeError: Cannot read properties of undefined (reading 'enqueueForceUpdate')


I have also created a demo link below. 

https://stackblitz.com/edit/react-fhp5sa

Let me know if you need more details.



JC Joseph Christ Nithin Issack Syncfusion Team February 9, 2022 04:07 PM UTC

Hi Praveen, 

  Thanks for your update. 

  On inspecting the code sample provided, we have found that you are defining the upload component as `new UploaderComponent`. Instead we suggest you to define it as `new Uploader`  and the issue will be resolved. In the write method of the edit params. Also we suggest you to change the `asyncSettings` of the uploader as mentioned in the below code. 

Please refer the below code example. 


fileUploadTemp = { 
    //defining the cell edit template for the image column 
    create: () => { 
      this.fileUploadElem = document.createElement('input'); 
      return this.fileUploadElem; 
    }, 
    read: () => { 
      return this.fileUploadObj.filesData.length > 0 
        ? this.fileUploadObj.filesData[0].name 
        : ''; 
    }, 
    destroy: () => { 
      this.fileUploadObj.destroy(); 
    }, 
    write: () => { 
      this.fileUploadObj = new Uploader({ 
        id: 'postedFiles', 
        name: 'postedFiles', 
        autoUpload: false, 
        asyncSettings: { 
          saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', 
          removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', 
        }, 
      }); 
      this.fileUploadObj.appendTo(this.fileUploadElem); 
    }, 
  }; 




Please get back to us for further details. 

Regards, 
Joseph I. 


Loader.
Live Chat Icon For mobile
Up arrow icon