B4J Question Send an image with ajax post to ABmaterial upload handler

Discussion in 'B4J Questions' started by Joan Paz, May 29, 2018.

  1. Joan Paz

    Joan Paz Member

    Hi! is possible send a .jpg picture to abmuploadhandler using a ajax post metod?

    I just want to send a after crooped picture to the server, not the original picture
     
  2. Joan Paz

    Joan Paz Member

    I did solve it:

    Code:
    ' refresh the page
        page.Refresh
        
        
    ' Tell the browser we finished loading
        page.FinishedLoading
        
    ' restoring the navigation bar position
        page.RestoreNavigationBarPosition
        

        
    Dim script As String = $"var image = document.getElementById('img1');
                                var cropper = new Cropper(image, {
                                  aspectRatio: 16 / 9,
                                  dragMode:'crop',
                                  rotatable:true,

                                  
                                  
                                  crop: function(event) {
                                    console.log(event.detail.x);
                                    console.log(event.detail.y);
                                    console.log(event.detail.width);
                                    console.log(event.detail.height);
                                    console.log(event.detail.rotate);
                                    console.log(event.detail.scaleX);
                                    console.log(event.detail.scaleY);
                                  }
                                  
                                  
                                  });
        
                                
                                
                                $(".upload").click(function() {
                                            
                                            cropper.getCroppedCanvas();

                                            cropper.getCroppedCanvas({
                                              width: 160,
                                              height: 90,
                                              minWidth: 256,
                                              minHeight: 256,
                                              maxWidth: 4096,
                                              maxHeight: 4096,
                                              fillColor: '#fff',
                                              imageSmoothingEnabled: false,
                                              imageSmoothingQuality: 'high',
                                            });

                                            // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
                                            cropper.getCroppedCanvas().toBlob(function (blob) {
                                              var formData = new FormData();
                                                
                                              //formData.append('croppedImage', blob);   
                                              formData.append('imageFromCanvas', blob);
                                              console.log(formData);
                                              // Use `jQuery.ajax` method
                                              $.ajax({
                                                url:'/core-base/sandbox/abmuploadhandler',
                                                method: "POST",
                                                data: formData,
                                                processData: false,
                                                contentType: false,
                                                success: function () {
                                                  console.log('Upload success');
                                                },
                                                error: function () {
                                                  console.log('Upload error');
                                                }
                                              });
                                            });       
                                            
                                            
                                        });
                                
        
        "$

        
        
        ws.Eval(script,
    Null)

    Important: 1- http://localhost:8888/core-base/sandbox/ is the address of the class module in my app were i did the image upload.
    2- Add the library crooper.js in your BuildPage().

    Code:
    page.AddExtraCSSFile("https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.3.6/cropper.min.css")
        
    page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.3.6/cropper.min.js")

    Check the original example of cropper.js
    https://github.com/fengyuanchen/cropperjs/blob/master/README.md


    I hope help somebody!
     
    XbNnX_507, Don Oso and inakigarm like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice