Zeroqode "AWS file uploader - any size" issue

Hello @brian,

We pushed an update for the plugin that should address the issue you were facing. Please update the plugin and check if everything works fine on your side.

Best Regards,
Zeroqode Team

Hi @ZeroqodeSupport, sometimes the plugin does not upload images or files. It’s at 7:00 - 10:00 pm aprox. (Time of Bogotá GMT - 5:00)

I used chrome (in pc and mac), safari in mac, and also firefox in pc.

It works after a while without any reason.

Thanks

Hello @juancamilovasquezard, thank you for reachin out!

Our team will check what may cause this issue. For debugging we will need additional information. Please share with us a screenshot of your browser console at the moment when you are trying to upload files and the plugin doesn’t work.
Also, if it’s possible please add support@zeroqode.com as collaborators to your app and let us know the name of your app and page where the plugin is used.

Best Regards,
Zeroqode Team

Hi, Thanks I’ve already added the emial as a collaborator of my app. The page is a reusable element “Adjuntos Internos” in the page “zeroqode”.

It is very rare because it only happens at certain times of the day. It used to happen to me when I updated plugin version 1.33 to a higher one, and I didn’t migrate until now.

Although I had no problems, now it is happening to me again.

Or for example in the test version it works well, but in live it doesn’t.

I don’t know if this can help:

"
(function anonymous(a,b,f
) {
var q=f.keys.s3_bucket_name,m=f.keys.region,G=f.keys.identity_pool_id,x=,y=,z=,D=,u=b.prefix.includes(" “)?b.prefix.replace(/ /g,”“):b.prefix;f=function(){return function(){setTimeout(function(){a.data.loadScriptPromise.then(function(){if(b.maxFilesize&&b.maxTimeout&&b.dictCancelUpload&&b.dictRemoveFile){a.data.cropper&&(a.data.cropper.destroy(),a.data.cropper=null,a.data.initCropper());AWS.config.region=m.trim();AWS.config.credentials||(AWS.config.credentials=
new AWS.CognitoIdentityCredentials({IdentityPoolId:G}));var p={},f=;a.data.croppingImagesProms={};a.data.croppingImagesIndexes={};a.data.index=0;var w=b.aspectRatio?b.aspectRatio.trim().split(”:“):;a.data.resizeWidth=b.resizeWidth;a.data.resizeHeight=b.resizeHeight;if(!a.data.dropzZoneloaded&&q&&m){a.data.widget=$(”

“);a.data.widget.css(“min-height”,b.bubble.height+“px”);a.data.uploader=$(”
“);a.data.uploader.css(“min-height”,
b.bubble.height+“px”);a.data.widget.append(a.data.uploader);a.canvas.append(a.data.widget);a.data.dropzZoneloaded=!0;var H=,r=”“;r=b.crop_modal_title?b.crop_modal_title:“Crop the image”;var A=b.crop_save_button_caption?b.crop_save_button_caption:“Crop”,B=b.crop_cancel_button_caption?b.crop_cancel_button_caption:“Cancel”;b.enableCropping&&(a.data.modalWindow=$(‘
’+
r+‘
×
’+B+‘’+A+”
“),$(“body”).append(a.data.modalWindow));Date.prototype.yyyymmdd=function(){var a=
this.getUTCMonth()+1,b=this.getUTCDate();return[this.getUTCFullYear(),(9<a?”“:“0”)+a,(9<b?”“:“0”)+b].join(”“)};a.data.initCropper=function(c,b){return new Promise(function(b){c?(a.data.modalBody=a.data.modalWindow.find(”.modal-body"),a.data.modalWindow.modal(“show”),a.data.modalWindow.off(“shown.bs.modal”).on(“shown.bs.modal”,function(){$(this).off(“click keyup keypress keydown”);a.data.modalBody.children().remove();a.data.modalBody.append(a.data.$imageContainer);a.data.cropperOptions={minContainerWidth:a.data.modalBody.width(),
minContainerHeihgt:a.data.modalBody.height(),aspectRatio:parseInt(w[0])/parseInt(w[1]),crop:function(a){}};a.data.cropper=new Cropper(a.data.image,a.data.cropperOptions);b()})):(a.data.cropperOptions={minContainerWidth:a.data.modalBody.width(),minContainerHeihgt:a.data.modalBody.height(),aspectRatio:parseInt(w[0])/parseInt(w[1]),crop:function(a){}},a.data.cropper=new Cropper(a.data.image,a.data.cropperOptions),b())})};var E=function(c){return new Promise(function(d){c.type.match(/image./)&&b.imageResizing?
a.data.dropzoneUploader.resizeImage(c,a.data.resizeWidth,a.data.resizeHeight,b.resizeMethod,function(a){p[c.upload.uuid]=a;d()}):d()})},C=function(c){return new Promise(function(d){if(!b.manyFiles&&b.enableCropping&&c.type.match(/image.
/))var e=setInterval(function(){c.dataURL&&(a.data.$imageContainer=$(‘
’),a.data.image=a.data.$imageContainer.find(“img”).get(0),a.data.initCropper(!0).then(function(){var e=
a.data.modalWindow.find(“.zq-save-cropped-image”),h=a.data.modalWindow.find(“.close”),v=a.data.modalWindow.find(“.cancel”);e.off(“click”).on(“click”,function(){var e=a.data.cropper.getCroppedCanvas();!b.cropp_if&&(e.width<b.resizeWidth||e.height<b.resizeHeight)&&(a.triggerEvent(“error”),a.publishState(“errorMessage”,‘Cannot cropp the image because the cropped size is smaller than “Resize Height” or “Resize Width”.’),console.log(“ERROR CROPPING”),d());a.data.cropper.getCroppedCanvas().toBlob(function(b){p[c.upload.uuid]=
b;a.data.modalWindow.modal(“hide”);d()})});h.off(“click”).on(“click”,function(){a.data.cropper.destroy();a.data.modalWindow.modal(“hide”);a.data.Cropper=null;$(this).off(“click”);d()});v.off(“click”).on(“click”,function(){a.data.cropper.destroy();a.data.cropper=null;a.data.modalWindow.modal(“hide”);$(this).off(“click”);d()})}),clearInterval(e))},10);else d()})},n=function(a){return encodeURI(a).replace(/+/gim,“%2B”).replace(/!/gim,“%21”).replace(/“/gim,”%22").replace(/#/gim,“%23”).replace(/$/gim,
“%24”).replace(/&/gim,“%26”).replace(/'/gim,“%27”).replace(/(/gim,“%28”).replace(/)/gim,“%29”).replace(/*/gim,“%2A”).replace(/+/gim,“%2B”).replace(/,/gim,“%2C”).replace(/:/gim,“%3A”).replace(/;/gim,“%3B”).replace(/=/gim,“%3D”).replace(/?/gim,“%3F”).replace(/@/gim,“%40”)},I=function(a){var c=a.name,e=new AWS.S3,l=new Promise(function(d){AWS.config.credentials.get(function(v){e.config.credentials=AWS.config.credentials;e.config.region=AWS.config.region;var h=new Date;v=h.toISOString().replace(/-/g,
“”).replace(/:/g,“”).replace(/..+[^Z]/g,“”);h=h.yyyymmdd().toString();var f=b.enablePrefix?“uuid/filename”===b.uploadType?“/”+a.upload.uuid+“/”+u+““+n(c):”/“+a.upload.uuid+””+u+““+n(c):“uuid/filename”===b.uploadType?”/“+a.upload.uuid+”/“+n(c):”/“+a.upload.uuid+””+n(c),t=“PUT\n”+f+“\n\ncontent-encoding:base64\nhost:”+q+“.s3.”+m+“.amazonaws.com\nx-amz-content-sha256:UNSIGNED-PAYLOAD\nx-amz-date:”+v+“\nx-amz-security-token:”+AWS.config.credentials.sessionToken+“\nx-amz-user-agent:aws-sdk-js/2.249.1 callback\n\ncontent-encoding;host;x-amz-content-sha256;x-amz-date;x-amz-security-token;x-amz-user-agent\nUNSIGNED-PAYLOAD”,
k=new jsSHA(“SHA-256”,“TEXT”);k.update(t);t=k.getHash(“HEX”);t=“AWS4-HMAC-SHA256\n”+v+“\n”+h+“/”+m+“/s3/aws4_request\n”+t;k=e.config.credentials.secretAccessKey;var g=new jsSHA(“SHA-256”,“TEXT”);g.setHMACKey(“AWS4”+k,“TEXT”);g.update(h);k=g.getHMAC(“HEX”);g=new jsSHA(“SHA-256”,“TEXT”);g.setHMACKey(k,“HEX”);g.update(m);k=g.getHMAC(“HEX”);g=new jsSHA(“SHA-256”,“TEXT”);g.setHMACKey(k,“HEX”);g.update(“s3”);k=g.getHMAC(“HEX”);g=new jsSHA(“SHA-256”,“TEXT”);g.setHMACKey(k,“HEX”);g.update(“aws4_request”);
k=g.getHMAC(“HEX”);g=new jsSHA(“SHA-256”,“TEXT”);g.setHMACKey(k,“HEX”);g.update(t);t=g.getHMAC(“HEX”);d({headers:{“X-Amz-Content-Sha256”:“UNSIGNED-PAYLOAD”,Authorization:“AWS4-HMAC-SHA256 Credential=”+AWS.config.credentials.accessKeyId+“/”+h+“/”+m+“/s3/aws4_request, SignedHeaders=content-encoding;host;x-amz-content-sha256;x-amz-date;x-amz-security-token;x-amz-user-agent,Signature=”+t,“X-Amz-Date”:v,“x-amz-security-token”:AWS.config.credentials.sessionToken,“X-Amz-User-Agent”:“aws-sdk-js/2.249.1 callback”,
“Content-Encoding”:“base64”},path:f});H.push(l)})});return l};jQuery.fn.center=function(){this.css(“position”,“absolute”);this.css(“top”,a.data.widget.height()/2-$(this).height()/2-(a.canvas.height()-a.data.widget.height()));this.css(“left”,a.data.widget.width()/2-$(this).width()/2);return this};var J=function(a,b,e){a=a[0];return new Promise(function(c){I(a).then(function(d){var l=p[a.upload.uuid]?p[a.upload.uuid]:a;b.open(e,“https://”+q+“.s3.”+m+“.amazonaws.com”+d.path,!0);for(var h in d.headers)b.setRequestHeader(h,
d.headers[h]);b.send(“PUT”===e?l:null);c()})})},K=function(c,d){var e=new AWS.S3,l=b.enablePrefix?“uuid/filename”===b.uploadType?c.upload.uuid+“/”+u+““+n(c.name):c.upload.uuid+””+u+““+n(c.name):“uuid/filename”===b.uploadType?c.upload.uuid+”/“+n(c.name):c.upload.uuid+””+n(c.name);l={Bucket:q,Delete:{Objects:[{Key:l}]}};$(c.previewElement).remove();setTimeout(function(){a.setHeight(a.data.widget.height())},500);e.deleteObjects(l,function(a,b){});a.data.dropzoneUploader.files.length||$(a.data.uploader.find(“.dz-default.dz-message”).show());
F(d)};A=function(c,d){a.publishState(“errorMessage”,“”);b.enablePreview?$(c.previewElement).css(“left”,a.canvas.find(“.dropzone”).width()/2-$(c.previewElement).width()/2-parseFloat($(c.previewElement).css(“margin”))):($(c.previewElement).text(c.name),$(c.previewElement).center());a.canvas.height()<a.data.widget.height()&&setTimeout(function(){a.setHeight(a.data.widget.height())},500);a.data.uploader.find(“.dz-default.dz-message”).hide();f.push(E(c),C(c));d()};B=function(b,d){a.publishState(“errorMessage”,
“”);a.data.uploader.find(“.dz-default.dz-message”).hide();a.canvas.height()<a.data.widget.height()&&setTimeout(function(){a.setHeight(a.data.widget.height())},500);a.data.lastCropperPromise=C(b);f.push(E(b),C(b));d()};var F=function(c){if(!b.manyFiles&&c.files[0]){var d=c.files[0].upload.uuid,e=n(c.files[0].upload.filename);e=b.enablePrefix?u+““+e:e;a.publishState(“fileURL”,“https://s3.”+m+”.amazonaws.com/“+q+”/“+(“uuid/filename”===b.uploadType?d+”/“+e:d+””+e));a.publishState(“fileName”,c.files[0].upload.filename);
a.publishState(“fileSize”,Math.round(p[d]?p[d].size/1E3:c.files[0].size/1E3))}else if(b.manyFiles||c.files[0]){var l=,h=;z=;x=;y=;$.each(c.files,function(a,c){var d=c.upload.uuid,e=n(c.upload.filename);e=b.enablePrefix?u+““+e:e;l.push(“https://s3.”+m+”.amazonaws.com/“+q+”/“+(“uuid/filename”===b.uploadType?d+”/“+e:d+””+e));h.push(e)});a.publishState(“fileUrls”,l);a.publishState(“fileNames”,h)}else a.publishState(“fileURL”,“”),a.publishState(“fileName”,“”),a.publishState(“errorMessage”,
null),a.publishState(“image_width”,null),a.publishState(“image_height”,null),a.publishState(“fileSizes”,null)};Dropzone.prototype.submitRequest=function(b,d,e){var c=e[0];z.push(.001c.size);a.publishState(“fileSizes”,z);setTimeout(function(){c.type.includes(“image”)&&(x.push(c.width),y.push(c.height),a.publishState(“image_width”,x),a.publishState(“image_height”,y))},100);Promise.all(f).then(function(){J(e,b,“PUT”)})};switch(b.fileExtensions){case “all”:r=null;break;case “images”:r="image/“;break;
case “video”:r=“video/";break;default:r=b.fileExtensions}a.data.dropzoneUploader=new Dropzone(a.data.uploader.get(0),{method:“PUT”,autoProcessQueue:!0,autoQueue:!0,timeout:1E3b.maxTimeout,parallelUploads:1,resizeQuality:parseFloat(b.imageQuality),resizeMimeType:“image/jpeg”,resizeMethod:b.resizeMethod,maxFiles:b.manyFiles?null:1,maxFilesize:b.maxFilesize,acceptedFiles:r,addRemoveLinks:b.addRemoveLinks&&b.enablePreview,dictRemoveFile:b.dictRemoveFile,dictCancelUpload:b.dictCancelUpload,thumbnailMethod:b.thumbnailMethod,
thumbnailWidth:b.thumbnailWidth,thumbnailHeight:b.thumbnailHeight,uploadMultiple:b.manyFiles,createImageThumbnails:b.createImageThumbnails,url:“https://”+q+”.s3.”+m+“.amazonaws.com”,previewsContainer:b.enablePreview?a.data.uploader.get(0):null,clickable:a.data.uploader.get(0),dictDefaultMessage:b.placeholder,removedfile:function(a){K(a,this)},init:function(){window.dropzoneUploader=this;this.on(“addedfile”,function(a){});b.enablePreview||(this.options.previewTemplate=“
”);
this.on(“maxfilesexceeded”,function(c){b.manyFiles||($(this.files[0].previewElement).remove(),$(c.previewElement).remove(),this.files=,this.addFile(c),setTimeout(function(){a.setHeight(a.data.widget.height())},500))});this.on(“error”,function(b,d){this.files=this.files.filter(function(a){return"error"!==a.status});this.files.length||-1===d.indexOf(“File is too big”)||($(b.previewElement).remove(),a.canvas.find(“.dz-default.dz-message”).show());D.push(b.name);a.publishState(“tooBigFilesNames”,D);
a.publishState(“errorMessage”,d);a.triggerEvent(“error”)});this.on(“uploadprogress”,function(b,d){a.publishState(“currentFileProgress”,Math.round(d))});this.on(“totaluploadprogress”,function(b){var c=this;Promise.all(f).then(function(){for(var b=0,d=0,h=0,f=0;f<c.files.length;f++)d+=(p[c.files[f].upload.uuid]?p[c.files[f].upload.uuid]:c.files[f]).size,h+=c.files[f].upload.bytesSent,b=h/d*100;a.publishState(“progress”,Math.round(b)||0)})});this.on(b.manyFiles?“queuecomplete”:“success”,function(){F(this);
f=;a.triggerEvent(“uploadingFinished”)})},accept:b.manyFiles?B:A});a.data.uploader.find(“.dz-default.dz-message”).center()}}})},1)}}();a.data.creatUploader||(f(),a.data.creatUploader=!0);a.data.reset_input&&(a.publishState(“fileName”,“”),a.publishState(“fileURL”,“”),a.publishState(“fileUrls”,“”),a.publishState(“fileNames”,“”),a.setHeight(a.data.widget.height()),a.data.reset_input=!1)
//# sourceURL=PLUGIN_AWS-File-uploader—Any-File-Size-update–File-uploader-.js
})

"

Hello @juancamilovasquezard, thank you for providing the details.

Our team will investigate the plugin in order to find what is causing the issue. Once we will have the solution you will be notified. We will keep you posted regarding the progress.

Best Regards,
Zeroqode Team

1 Like

Thanks !

Hello @juancamilovasquezard,

Our team tested the plugin and checked what is causing the error. From what was observed during our testing the error appears all the time without any dependency on time (we tested on different days and at different times). The description of the error says that credentials are expired. We also tested using our keys and the plugin is working correctly. Considering the abovementioned, our recommendation is to check the key and if it’s possible to try to create a new one. Please let us know if using a new key will fix your issue.

Best Regards,
Zeroqode Team

Hi, but it’s very rare because in other pages in my app it works fine. (Now it’s working, so I don’t think that credentials are expired).

May be it can be that the bugs are in reusable elements?

In the pages “adjuntar_pagos” or “inicio” it works fine.

But now, I’m trying to use it in a reusable element, and sometimes works and sometimes doesn’t.

For example, now it is working properly (in the reusable element), as you can see in the video:

Screen-Recording-18-5-2020-12-45-13

I’ve sent to your mail another video with more details.

Thanks

Hello @juancamilovasquezard, thank you for the additional information.

Our team will check your app once again and will look for other possible causes and solutions. We will inform you once the checking is finished.

Best Regards,
Zeroqode Team

1 Like

hello Zeroqode,
I am not able to get file size after file upload. i want to add conditions to get less image quality if it exceed let’s say 20MB and through workflow i want to upload the file.
i know i can get fixed image quality. and i know i can limit user to upload according file size. but i want let him upload no what matter size but will get it for less quality.
I have showed file size on text but it was empty. any ideas?
Regards,

Hello,

@juancamilovasquezard, we pushed an update for the plugin that should address the issue you were facing. Can you please update the plugin, reopen the app and see if that takes care of it, please?

@solinz, do you have any errors in Browsers Console when the text with file size is empty?

Best Regards,
Alex

Thanks !!!

I will try it :ok_hand:t2:

1 Like

thank you for this plugin and you guys contributed alot to this community :slightly_smiling_face: i will use uploadcare. so the request is not valid anymore.

Note: when we upload and image previewed on uploader and got cleared leaves space
I have wrapped uploader with group that hide/collapse when uploader is empty.
I know there is an option not to preview image. but is there any other option i am missing ?

Hello @solinz, thank you for your kind words.

This shouldn’t happen, could you please share with us a screenshot of this issue and settings of the plugin. Our team will check why this is happening.

Best Regards,
Alex

i have tried to take an image using an iphone 7 and later . it did not allow me to do so ( on chrome, firefox,safari). only to upload existing images not to take new one with camera.

i tried on android it works.
Iphone s it works as well.

I have specified file type to image/* and it is working now.

Hello

When We upload any file the FileName returned value changes the original file name eliminating the spaces and special characters of it.

So when I use the returned value to save it in the Bubble’s Database the Name name sometimes is totaly different.

I dont care about the name in the URL or in the bucket, but to my user is very important to be abble to save the original FileName.

Am I doing someting wrong ?

Hello, @eduardo.escobar.f
Thanks for your question.

Please note that during the file uploading to AWS platform, all the titles of these files are encoded, accordingly to the platform functionality.

This feature is not related to the plugin itself :pray:

Previously, all the special characters in the titles were replaced by another symbols. Now, you will receive an exact URL as in your S3 bucket.
This is how the plug-in works right now.

Sorry for this inconvenience :pray:
Best regards,
Zeroqode Support Team

@ZeroqodeSupport The plugin “AWS” File uploader - Any size / element File uploader threw the following error: TypeError: Cannot read properties of null (reading ‘split’)
at eval (PLUGIN_1527575349408x715242509040615400/-AWS–File-uploader—Any-size–update–File-uploader-.js:8:37)
at https://webapp.getpola.com/package/run_debug_js/ef758101ad7e96bca83eed1a300a34928f70276ab3f9656db387d0ce2b0b0642/xfalse/x23/run_debug.js:17:3138941 (please report this to the plugin author)

Why am I getting this error. Please someone help me out here.

Hello, @adrian8.
Thanks for using our plugin and please accept our sincere apologies for the issue you have with it.

Can you please let us know the details of your use case? The plugin version you are using, the plugin setup and steps to reproduce the issue. We have to replicate it on our end to be able manage the further issue investigation.

Thank you :pray:
Regards,
Zeroqode Support Team