4 Replies Latest reply on Aug 11, 2014 4:32 AM by mcollinge

    Image not decoded from base64 when using Images API

    pearle

      I am uploading an Image using the images Api with the following code

       

      var blob = new Blob([imageData], { type: "image/png"});
      formData.append("file", blob, "pe_test_file.png");
        $j.ajax({
          type: "POST",
          url: _url,
          data: formData,
          dataType: "multipart/form-data",
          processData: false,  // tell jQuery not to process the data
          contentType: false,   // tell jQuery not to set contentType
          
          success: function(data) {
          success = true;
        },
        // If the process fails, get the error, parse into JSON and then display the message
        error: function (jqxhr) {
        console.log(jqxhr);
        alert(jqxhr.responseText);
        }
      

      This is working in that the binary content is uploaded to the server - BUT when it is being processed it is in the base64 encoded format - i.e. 'character' representation. This causes the upload to fail, as the process assumes it to be character rather than binary format.

       

      If I put a breakpoint in DbImageManager.java, method isValidByMimetype() I can see that the content of the input stream is in base 64 encoded format - e.g.

       

      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhE..
      

       

      Is there an additional step I should be performing, or setting a variable in the API call in order to force the data stream to be decoded from base64 to binary?

       

      Ryan Rutan - do you have any ideas on this? See also a related post at Re: Use upload new image rest call

        • Re: Image not decoded from base64 when using Images API
          Ryan Rutan

          As I said on the previous thread, I do not have exposure with this using jQuery for this.  That being said,  doing some quick searching, it might be worthwhile to give this library a check:

          https://github.com/CoeJoder/jquery.image.blob

          For some sample code.  At a high-level, it looks like it is structured correctly.

          Also, this thread (while I’m sure you found it, may have some syntax pattern suggestions)

          http://hayageek.com/jquery-ajax-form-submit/

           

          Hope this helps

            • Re: Image not decoded from base64 when using Images API
              pearle

              I got this working using the library available at the link Ryan suggested - i.e. CoeJoder/jquery.image.blob · GitHub

               

              My code has implemented this as follows.

              Note that variable imageDate is in base64 format. (There is a reason why this is base64 rather than binary format which is related to the specific implementation within my application).

               

              Stage 1 - Create a (hidden) image on the page using my base64 data

              $j('#imageDataDebug').html('<img id="circuitBoardRendered" src="' + imageData + '" />');
              

               

              Stage2 - Convert to binary (using the jquery.image.blob library

              var blob = $j('#circuitBoardRendered').imageBlob().blob();
              

               

              Stage 3 - Create a Formdata object with the image binary and metadata

              var formData = new FormData();
              var blob = new Blob([imageData], { type: "image/png"});
              formData.append("file", blob, "pe_test_file.png");
              


              Stage 4 - Use API to upload

              var _url = <server> + "/api/core/v3/images";
              $j.ajax({
                 type: "POST",
                 url: _url,
                 data: formData,
                 dataType: "multipart/form-data",
                 processData: false,  // tell jQuery not to process the data
                 contentType: false,   // tell jQuery not to set contentType
                
                 success: function(data) {
                  ..
                },
                error: function (jqxhr) {
                ..
                }
              });
              

               

              NB - System Property jive.rest.internal.csrf.token.enabled must be set 'false' otherwise this the Image API POST fails (see Re: Use upload new image rest call )