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

[Joan Paz]

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

 

[Joan Paz]

I did solve it:

    ' 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().

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!