multiple image upload using Blobs Web api

Question

i need a web application for multiple image upload by blobs

Deepak Rawat · Answer

// script.js document.getElementById('imageUploadForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission var formData = new FormData(this); // Send the formData using AJAX var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { document.getElementById('message').textContent = 'Upload successful!'; } else { document.getElementById('message').textContent = 'Upload failed!'; } }; xhr.send(formData); });

Sandeep Kumar · Answer

I want .Net web api to upload multiple file by form data public List Pms_INSERT_UPDATE_DATA_Using_Blob(int UserId) { DataTable DtPhoto = new DataTable(); DtPhoto.Columns.Add("FilePath", typeof(System.String)); List returnVal = new List (); var ID = HttpContext.Current.Request.Form["ID"]; var StationId = HttpContext.Current.Request.Form["StationId"]; var UnitId = HttpContext.Current.Request.Form["UnitId"]; var OutageTypeId = HttpContext.Current.Request.Form["OutageTypeId"]; var ZoneId = HttpContext.Current.Request.Form["ZoneId"]; var FinYear = HttpContext.Current.Request.Form["FinYear"]; var Photo_Tag = HttpContext.Current.Request.Form["PhotoTag"]; var filePath = string.Empty; var httpRequest = HttpContext.Current.Request; if (httpRequest.Files.Count > 0) { var files = new List (); foreach (string file in httpRequest.Files) { Stream fs = httpRequest.Files[file].InputStream; BinaryReader br = new BinaryReader(fs); byte[] imagecode = br.ReadBytes((Int32)fs.Length); var postedFile = httpRequest.Files[file]; string Extension = Path.GetExtension(postedFile.FileName); filePath = FilePath + Guid.NewGuid() + Extension; postedFile.SaveAs(filePath); files.Add(filePath); DtPhoto.Rows.Add(imagecode); } } try { using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.CommandType = CommandType.StoredProcedure; cmd.CommandText = DBProcedure.SP_InsertUpdatePmsData; cmd.Parameters.Add("@PmsDataID ", SqlDbType.Int).Value = ID; cmd.Parameters.Add("@StationID", SqlDbType.Int).Value = StationId; cmd.Parameters.Add("@UnitID", SqlDbType.Int).Value = UnitId; cmd.Parameters.Add("@ZoneID", SqlDbType.Int).Value = ZoneId; cmd.Parameters.Add("@OutageTypeID", SqlDbType.Int).Value = OutageTypeId; cmd.Parameters.Add("@FinYear", SqlDbType.NVarChar).Value = FinYear; cmd.Parameters.Add("@PhotoTag", SqlDbType.NVarChar).Value = Photo_Tag; cmd.Parameters.Add("@ImageList", SqlDbType.Structured).Value = DtPhoto; cmd.Parameters.Add("@CreatedBy", SqlDbType.Int).Value = UserId; cmd.Parameters.Add("@ReturnVal", SqlDbType.Int).Value = 0; /////// cmd.Parameters.Add("@ReturnPmsDataID", SqlDbType.Int).Value = 0; cmd.Parameters["@ReturnVal"].Direction = ParameterDirection.InputOutput; // cmd.Parameters["@ReturnPmsDataID"].Direction = ParameterDirection.InputOutput; cmd.Connection = con; con.Open(); cmd.ExecuteNonQuery(); returnVal.Add(Convert.ToInt32(cmd.Parameters["@ReturnVal"].Value.ToString())); //returnVal.Add(Convert.ToInt32(cmd.Parameters["@ReturnPmsDataID"].Value.ToString())); } } } catch (Exception ex) { } return returnVal; }

multiple image upload using Blobs Web api

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)