Safari trunctates base64 string representing an image

Question

I am writing a web server and testing with Safari. The server is written in Go. I have a page which allows the user to upload an image. The image displays properly in Safari. The image data is in a base64 string. This is on an input tag in the HTML. The save button submits this image along with other inputs. If the string length is over about 500K, when the request arrives at the server, the image string has been truncated which then produces an error EOF when attempting to decode the image. I have used the web inspector to see if I can find an issue there, but everything appears normal. If I select an image of less than around 500K, it is shown fine in the browser and the data string is fine when it arrives at the server. The image upload is accomplished by an input button of type "file" which onchange() executes this javascript code:

function processFile(imageInput) {

    const reader = new FileReader()
    reader.addEventListener("load", () => {
        uploaded_image = reader.result;
        let displayImage = document.querySelector("#display_image");
        displayImage.style.backgroundImage = `url(${uploaded_image})`;
        document.querySelector("#display_image_data").value = uploaded_image;
        document.querySelector("#display_image_size").innerHTML = uploaded_image.length.toString();
    });
    reader.readAsDataURL(imageInput.files[0]);
}

The display_image_data element is

<input id = "display_image_data" name = "photoBytesString" hidden>

1.8k

Posted by

rschluet

Reply

Add a Comment

Answer 1

I resolved this issue. I had to specify in the browser to encode as multipart/form-data and then on the server:

case http.MethodPost:
   contentType := request.Header.Get("Content-Type")
   if strings.HasPrefix(contentType, "multipart/form-data") {
      p.DataBodyMap = make(url.Values, 0)
      request.ParseMultipartForm(1000)
      for key, value := range request.MultipartForm.Value {
         p.DataBodyMap[key] = value
      }
      photoFile, header, err := request.FormFile("photoBytesString")
      if err == nil {
         log.Println(header, err)
         photoContentType := header.Header["Content-Type"][0]
         log.Println(photoContentType)

         photoBytes, _ := ioutil.ReadAll(photoFile)
         log.Println("len(photoBytes): ", len(photoBytes))
         encodedImage64 := base64.StdEncoding.EncodeToString(photoBytes)
         encodedImage64WithPrefix := "data:" + photoContentType + ";base64," + encodedImage64
         p.DataBodyMap["photoBytesString"] = []string{encodedImage64WithPrefix}
      }

Posted by

rschluet

Add a Comment

Safari trunctates base64 string representing an image

Replies