Rails 6 upload wdget saves before applying crop

mccollek
mccollek Member Posts: 3

The following code is used in my rails 6.1 application to upload images via the widget. The upload works fine . After cropping the image, either clicking 'crop' or 'save' uploads the original image instead of the crop.

<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>


<script type="text/javascript">


  var myWidget = cloudinary.createUploadWidget({

    cloudName: '<cloudname>',

    upload_preset: '<%= cloudinary_preset %>',

    sources: [

      "local",

      "camera"

    ],

    cropping: true,

    styles: {

      palette: {

        window: "#FFFFFF",

        windowBorder: "#90A0B3",

        tabIcon: "#1891F7",

        menuIcons: "#5A616A",

        textDark: "#0F2E51",

        textLight: "#FFFFFF",

        link: "#1891F7",

        action: "#FF620C",

        inactiveTabIcon: "#3F5A81",

        error: "#F55A68",

        inProgress: "#0078FF",

        complete: "#34D09B",

        sourceBg: "#e0e4f5"

      },

      fonts: {

        default: null,

        "'Poppins', sans-serif": {

                    url: "https://fonts.googleapis.com/css?family=Poppins",

          active: true

        }

      }

    }

  }, (error, result) => {

    if (result.event == "success") {

      fetch('/graphics', {

        method: 'POST',

        credentials: "same-origin",

        headers: {

          "X-CSRF-Token": <x-csrf-token>,

          "Content-Type": "application/json"

        },

        body: JSON.stringify({

          graphics: {

            graphicable_id: <%= graphic.id %>,

            graphicable_type: "<%= graphic.class.name %>",

            stored_at: result.info['public_id'],

            label: result.info['original_filename']

          }

        })

      }).then(response => response.text())

       .then((response) => {

         console.log(response)

         eval(response);

       })

       .catch((error) => console.log(error)

       )

    }

  })


  document.querySelector(".image-upload-button").addEventListener("click", function () {

    console.log('image upload requested');

    myWidget.open();

  }, false);

Tagged:

Comments

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 74

    Hi @mccollek,

    I pasted your code here and everything seems to work, can you please share the upload preset you use? a screenshot of what you see when you upload a new file?

    Looking forward to your response,

    Tamara

  • mccollek
    mccollek Member Posts: 3

    The upload preset soley sets the folder. In the Cloudinary library I see the full image, not the crop. I can upload a screencast showing what I'm seeing?

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 74

    Hi @mccollek,

    Sure, and if you want to share it in private, you can open a new support ticket here.

    Best,

    Tamara