Cropping and S3 upload(client)

Wappler General Need Help
1

@patrick @Teodor @patrick

Pinging you all as I don’t know who built the feature.

I am integrating cropper library . So far so good.

Kapture 2020-09-02 at 10.42.57

But I need to be able to pass the cropped data to the S3 connector.

Is it enough if I set the dmx.app.data.s3upload1.file.dataUrl to the new data(plus changing name, size and type if needed)?

Something in these terms:

dmx.app.data.s3upload1.file.dataUrl = image.cropper.getCroppedCanvas().toDataURL("image/png");

Or will I run into problems later on?

2 Likes
2

Setting the dataUrl property will not work, that is not being send to the server.

You can try:

cropper.getCroppedCanvas().toBlob(function(blob) {
  document.getElementById('s3upload1').dmxComponent.file = blob;
}
2 Likes
3

Confirmed that using blob worked. Thanks @patrick

After confirming this and getting S3 connector working with some custom providers I went back and cleaned a bit the code. I changed blob to file to make sure it’s future proof and it doesn’t break if at some point instanceof is called.

cropper.getCroppedCanvas({"width" : "200", "height" : "200", "imageSmoothingQuality" : "high", "imageSmoothingEnabled" : true}).toBlob(function(blob) {
       document.getElementById('s3upload1').dmxComponent.file = new File([blob], "profile_photo.jpg", { lastModified: new Date().getTime(), type: blob.type });
     }, 'image/jpeg', 0.8);
2 Likes
4

This post took me WAY too long to find ha. For the benefit of other searchers, I was looking to upload cropper output just to server via file input, rather than S3, and came up with the following working snippet:

    cropper.getCroppedCanvas({"width" : "400", "height" : "400", "imageSmoothingQuality" : "high", "imageSmoothingEnabled" : true}).toBlob(function(blob) {
          const fileInput = document.getElementById('input_cropped_image_file');
          const file = new File([blob], "croppedImage.jpg", {type: "image/jpeg", lastModified: new Date().getTime()});
          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(file);
          fileInput.files = dataTransfer.files;
});

but this may not be the most optimal methodology and there’s likely better callouts using dmx. Newb in that area.