Welcome to Vishwa's blog - Technology, Spirituality and More...

Reading/Uploading Image data using base64 string

How will you upload an image from your local drive without using File Upload control or you do not want to click browse button in order to select and upload the image file. Here is an alternate solution. I came across a situation in which I had to upload an Image file from local drive without using server side File Upload control already available in .NET.

 Client Side Code

The following example illustrates a VBScript Client side function using ADODB Stream and MSXML2 DOMDocument Object.

   1: <script language="vbscript" type="text/vbscript">
   3:    'fileName can be any file including full path on your local drive
   5:     Function PostImageData(ByVal fileName)
   6:        Const fsDoOverwrite     = true  ' Overwrite file with base64 code
   7:        Const fsAsASCII         = false ' Create base64 code file as ASCII file
   8:        Const adTypeBinary      = 1     ' Binary file is encoded
   9:        Dim objXML,objDocElem
  10:        Dim objStream, objFSO
  12:        Set objXML = CreateObject("MSXml2.DOMDocument")
  13:        Set objDocElem = objXML.createElement("Base64Data")
  15:        On Error Resume Next
  16:        Set objFSO = CreateObject("Scripting.FileSystemObject")
  17:        Set objStream = CreateObject("ADODB.Stream")
  19:        If Err.Number = 0 Then
  20:            If objFSO.FileExists(fileName)  Then
  21:                objStream.Type = adTypeBinary
  22:                objStream.Open()
  23:                objStream.LoadFromFile(fileName)
  24:                objDocElem.dataType = "bin.base64"
  25:                objDocElem.nodeTypedValue = objStream.Read()
  26:                frmPageName.txtBase64Data.value = objDocElem.text                                   
  27:                objStream.Close()
  28:                'objFSO.DeleteFile fileName,true 'Delete the Image file if needed
  29:            Else
  30:                MsgBox("Could not find Image file " & fileName)
  31:            End If
  32:          Else
  33:              MsgBox("Your Browser Secuirty Settings currently do not allow image file reading.")
  34:          End If
  36:        Set objXML = Nothing
  37:        Set objDocElem = Nothing
  38:        Set objStream = Nothing
  39:        Set objFSO = Nothing
  40:    End function
  42:   </script>


Note: In order to make this example work you will need to make sure that following options are enabled in IE

  1. Open IE and Go to Tools –> Internet Options –>Security Tab
  2. Select Trusted Sites –> Sites
  3. Type the website you are planning to run this page and click add and then Close.
  4. Now Click on Custom Level button and make the following options are enabled in ActiveX controls and plug-ins

         a. Allow Previously unused ActiveX Controls to run …

         b. Automatic Prompting for ActiveX controls

         c. Binary and script behaviors

         d. Display video and  animation on a webpage that …

         e. Download signed ActiveX controls

         f. Download unsigned ActiveX controls

         g. Initialize and script ActiveX controls not marked as safe …

         h. Only allow approved domains to use ActiveX without …

          i. Run ActiveX controls and plug-ins

          j. Script ActiveX controls marked safe for scripting


5. Make sure following options are set to enabled in Miscellaneous section

         a. Access data sources across domains

         b. Allow META REFRESH

         c. Allow scripting of Microsoft web browser control

         d. Allow script-initiated windows without size or position …

6.  After making all the above changes, click on OK then Apply and then OK. Now Close the browser


Server Side Code

   1: Private Function ConvertImageFromBase64String() As Image
   2:         Dim NewImageFile As Image = Nothing
   3:         Try
   4:             Dim bytesData As Byte() = System.Convert.FromBase64String(txtBase64Data.Value)
   6:             If bytesData.GetUpperBound(0) > 0 Then
   7:                 Using ImageStream As MemoryStream = New MemoryStream(bytesData)
   8:                     NewImageFile = Image.FromStream(ImageStream, True)
   9:                 End Using
  10:                 NewImageFile.Save(SERVER_PATH, System.Drawing.Imaging.ImageFormat.Bmp)
  11:             Else
  12:                 NewImageFile = Nothing
  13:             End If
  14:         Catch ex As Exception
  15:             NewImageFile = Nothing
  16:         End Try
  18:         Return NewImageFile
  19:     End Function


Now Save or Present the image wherever you want.