I am using fineUploaderS3() to upload several images to S3. What I would like to do is select a file for upload, resize to a smaller size and upload the smaller file to S3 instead of the original.
I am trying to do this when 'submit' gets triggered:
on('submit', function(event, id, fileName) {
var uploadedFile = jQuery(this).fineUploader('getFile', id);
var reader = new FileReader();
reader.onload = function (e) {
var smallerImageUrl = resizeImage(e.target.result);
var smallerImageBlob = dataURItoBlob(smallerImageUrl);
jQuery('#fine-uploader').fineUploaderS3('addBlobs', smallerImageBlob);
jQuery('#fine-uploader').fineUploaderS3('cancel', id);
};
reader.readAsDataURL(uploadedFile);
})
However, this does not seem to work. Either the call to S3 gets aborted, or the file does not get written to S3.
Can you please recommend the best way to do this? Is there any kind of native support in Fine Uploader for this?
Definitions of functions to resize and to convert dataURL to Blob:
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
try {
return new Blob([ab], {type: mimeString});
} catch (e) {
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
}
function resizeImage(source)
{
var canvas = document.createElement("canvas");
var img = document.createElement("img");
img.src = source;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataUrl = canvas.toDataURL();
return dataUrl;
}
MORE INFO:
This is a bigger chunk of my code:
jQuery('#fine-uploader').fineUploaderS3({
uploaderType: 'basic',
maxConnections: 3,
button: jQuery('#select'),
request: {
endpoint: our endpoint url,
accessKey: our access key
},
objectProperties: {
acl: 'public-read',
key: function(id) {
var regEx = /(?:\.([^.]+))?$/;
var name = jQuery('#fine-uploader').fineUploaderS3('getName', id);
var udid = jQuery('#fine-uploader').fineUploaderS3('getUuid', id);
var extension = regEx.exec(name)[1];
return location of file on S3;
}
},
signature: {
endpoint: signature endpoint
},
uploadSuccess: {
endpoint: upload success url,
params: {
type: 'me',
width: 170,
height: 170
}
},
iframeSupport: {
localBlankPagePath: blank page url
},
retry: {
showButton: true
},
chunking: {
enabled: true
},
resume: {
enabled: true
},
deleteFile: {
enabled: true,
method: "POST",
endpoint: our delete endpoint
},
validation: {
sizeLimit: 15000000
}
}).on('submit', function(event, id, fileName) {
var uploadedFile = jQuery(this).fineUploader('getFile', id);
var reader = new FileReader();
reader.onload = function (e) {
var smallerImageUrl = resizeImage(e.target.result);
var smallerImageBlob = dataURItoBlob(smallerImageUrl);
jQuery('#fine-uploader').fineUploaderS3('addBlobs', smallerImageBlob);
jQuery('#fine-uploader').fineUploaderS3('cancel', id);
};
reader.readAsDataURL(uploadedFile);
})
There's code for other events like "submitted", "cancel", "progress", "complete" which I can share if required.
With this, when I try to upload one file, I see this in Firebug:
Request to our signature endpoint URL:
{"expiration":"2013-11-27T14:08:39.751Z","conditions":[{"acl":"public-read"},{"bucket":"xxxxxx.xxxxxx.com"},{"Content-Type":"image/jpeg"},{"success_action_status":"200"},{"key":"xxxxxx/xxxxxx/20e53c0c-d29e-410c-b2d0-2856861d187e.jpg"},{"x-amz-meta-qqfilename":"cbr1.jpg"},["content-length-range","0","15000000"]]}
Response to this:
{"policy":"eyJleHBpcmF0aW9uIjoiMjAxMy0xMS0yN1QxNDowODozOS43NTFaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6InN5ZG5leS5pbmtpdmUuY29tIn0seyJDb250ZW50LVR5cGUiOiJpbWFnZVwvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAwIn0seyJrZXkiOiJzeWRuZXlcL29yaWdpbmFsXC8yMGU1M2MwYy1kMjllLTQxMGMtYjJkMC0yODU2ODYxZDE4N2UuanBnIn0seyJ4LWFtei1tZXRhLXFxZmlsZW5hbWUiOiJjYnIxLmpwZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCIwIiwiMTUwMDAwMDAiXV19","signature":"P590iCwLUlTnXo+Ek0e4H/7Z3k0="}
Request to our S3 endpoint (there was no response as this was aborted):
-----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="key" xxxxxx/xxxxxxx/20e53c0c-d29e-410c-b2d0-2856861d187e.jpg -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="AWSAccessKeyId" xxxxxxxxxxxxxxx
-----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="Content-Type" image/jpeg -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="success_action_status" 200 -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="acl" public-read -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="x-amz-meta-qqfilename" cbr1.jpg -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="policy" eyJleHBpcmF0aW9uIjoiMjAxMy0xMS0yN1QxNDowODozOS43NTFaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6InN5ZG5leS5pbmtpdmUuY29tIn0seyJDb250ZW50LVR5cGUiOiJpbWFnZVwvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAwIn0seyJrZXkiOiJzeWRuZXlcL29yaWdpbmFsXC8yMGU1M2MwYy1kMjllLTQxMGMtYjJkMC0yODU2ODYxZDE4N2UuanBnIn0seyJ4LWFtei1tZXRhLXFxZmlsZW5hbWUiOiJjYnIxLmpwZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCIwIiwiMTUwMDAwMDAiXV19 -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="signature" P590iCwLUlTnXo+Ek0e4H/7Z3k0= -----------------------------2084011506152072170779848208 Content-Disposition: form-data; name="file"; filename="cbr1.jpg" Content-Type: image/jpeg
The "complete" event did not get triggered.
So in this case, nothing got uploaded. The larger original image did not get uploaded because of this line in the "submit" even handler- jQuery('#fine-uploader').fineUploaderS3('cancel', id), but the issue is that the smaller resized image did not get uploaded either.
Please let me know if you need more information.
Firebug and Chrome Javascript console logs with debug: true in Fine Uploader:
FIREBUG:
[FineUploader 3.9.0-3] Received 1 files or inputs.
all.fi....min.js (line 16)
[FineUploader 3.9.0-3] Submitting S3 signature request for 0
all.fi....min.js (line 16)
[FineUploader 3.9.0-3] Sending POST request for 0
all.fi....min.js (line 16)
POST our signature URL
200 OK 52ms
all.fi....min.js (line 17)
[FineUploader 3.9.0-3] Sending upload request for 0
all.fi....min.js (line 16)
POST our S3 bucket
Aborted
all.fi....min.js (line 19)
[FineUploader 3.9.0-3] Cancelling 0
all.fi....min.js (line 16)
CHROME:
It seems to go in an infinite loop in Chrome. I tried to upload just one photo and I see this:
[FineUploader 3.9.0-3] Received 1 files or inputs. all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 0 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 0 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 0 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 1 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 1 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 0 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 2 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 2 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 1 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 1 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 3 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 3 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 2 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 2 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 4 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 4 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 3 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 3 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 5 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 5 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 4 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 4 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 6 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 6 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 5 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 5 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 7 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 7 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 6 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 6 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Submitting S3 signature request for 8 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 8 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 7 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 7 all.fineuploader-3.9.0-3.min.js:16
6
Uncaught TypeError: Cannot set property 'loaded' of undefined all.fineuploader-3.9.0-3.min.js:19
[FineUploader 3.9.0-3] Submitting S3 signature request for 9 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 9 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 8 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending upload request for 8 all.fineuploader-3.9.0-3.min.js:16
6
Uncaught TypeError: Cannot set property 'loaded' of undefined all.fineuploader-3.9.0-3.min.js:19
[FineUploader 3.9.0-3] Submitting S3 signature request for 10 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Sending POST request for 10 all.fineuploader-3.9.0-3.min.js:16
[FineUploader 3.9.0-3] Cancelling 9 all.fineuploader-3.9.0-3.min.js:16
4
Note- before I started trying to resize and send the resized file instead of the original, Fine Uploader was working fine for me. I have used it to upload several files to S3 in the past.
It looks like your code will always result in an infinite loop. In your onSubmit, you are submitting a scaled version of the file, and cancelling the original, but then that scaled file is hitting onSubmit and you are starting the cycle over again, with no obvious end.
You have two options:
Wait until Fine Uploader adds native support for automatic scaled image uploads (optionally alongside the original). This is being discussed in feature request in issue #1061 in the project's Github issue tracker.
Setup two Fine Uploader instances on your page. One instance will receive the original file, generate the scaled version, and then submit it programmatically via the addBlobs method on the 2nd instance.
Related
I am trying to Automate API that has multipart upload. I am getting 415.
Scenario:
* def Json = {}
* def multiPartText = read(Test.txt)
* def multiPartPng = read(Test.png)
* def multiPartJpg = read(Test.jpg)
When path 'Path'
And multipart field text = multiPartText
And multipart file jpg = { read: 'path/Test.jpg', filename: 'Test.jpg', content-Type: 'image/jpg'}
And header Content-Type = 'multipart/form-data'
And method POST
Then 201
this is what I written but I am getting 415.
Error:
content-disposition: form data; name= "info"; filename=""
content-type: text/plain
content length: 500
Completed: true
IsinMemory: true
Mixed content-disposition: from-data; name="file"; filename="Test.jpg"
content-type: image/jpg
content length: 500
Completed: true
IsinMemory: false >> Note: Path is correct and jpg in the framework.
Any one knows why? or How to solve it?
I am sending a post request to the backend through axios to fetch a Multipart/form-data type response where I receive 1. An Application/json type data and 2. An Application/octet-stream type data which basically is a pdf. Following is the response type passed to the axios post request
responseType: "multipart/form-data",
The response is in the form of string as follows:
--8VsLrsii3Po8wSx8HnipQLwYFlOFDP_FJ-xrfQUv
Content-Disposition: form-data; name="dati"
Content-Type: application/json
[{}]
--8VsLrsii3Po8wSx8HnipQLwYFlOFDP_FJ-xrfQUv
Content-Disposition: form-data; name="pdf"
Content-Type: application/octet-stream
Content-Length: 8481
%PDF-1.5
%����
4 0 obj
<</Filter/FlateDecode/Length 3834>>stream
x���Mo�����wS Xz��\�m8#�V�)�l5PK��h~}I��Α��5��&lү�gμ���4{����K������7�����O���퇛�no~�q�o�?]�3���ۏ7���k.��������\�m�l���M�8͗��q��z��N�����n��}����������w�����7_��|�����}�J���/��������&���h&L��Wּrƹ�JɎ�^��G.................................
%%EOF
--8VsLrsii3Po8wSx8HnipQLwYFlOFDP_FJ-xrfQUv--
I am able to seperate the json part and the pdf part and i am able to get the name, content-type and the actual json data as well as the pdf part. I am using the following code to access the pdf
var data = response // response is the data from the endpoint
var binaryLen = data.length;
var bytes = new Uint8Array(binaryLen);
for (var i = 0; i < binaryLen; i++) {
var ascii = data.charCodeAt(i);
bytes[i] = ascii;
}
var pdfDownload = new Blob([bytes], { type: "application/pdf" });
var url = window.URL || window.webkitURL;
var link = url.createObjectURL(pdfDownload);
var a = document.createElement("a");
a.setAttribute("href", link);
a.setAttribute("target", "_blank");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
And I am getting an empty pdf
Does anyone know a way for me to be able to get correct pdf?
Could anyone please assist me to file upload functionality using Karate API? I have tried many ways, but getting error message as
"[{"title":"QUERY.BIZ.004","status":500,"detail":"Error in uploading document","timestamp":"2021-12-01T09:04:01.033+01:00"}]"
PAYLOAD DETAILS
metadata: {"key":"FILE_NAME","value":"karate-logo"}
metadata: {"key":"FILE_EXTENSION","value":"jpg"}
metadata: {"key":"TAG","value":"REQUEST"}
metadata: {"key":"DOC_TYP","value":"00008"}
file: (binary)
REQUEST HEADERS
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 2368
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary9A1eYQihw4rdVq9f
Below mentioned karate API code which I used in the framework
Given url posturl
And path 'document'
And header id = '1608672'
And header Content-Type = 'multipart/form-data'
And multipart file file = { read: 'classpath:dataDrivenPayload/karate-logo.jpg', filename: 'karate-logo.jpg', contentType: 'image/jpg' }
And multipart field metadata = {"key":"FILE_NAME","value":"karate-logo"}, {"key":"FILE_EXTENSION","value":"jpg"}, {"key":"TAG","value":"REQUEST"}, {"key":"DOC_TYP","value":"00008"}
When method POST
Then status 200
I think the metadata needs to be sent as multiple "parts".
Try something like this:
* url 'https://httpbin.org/anything'
* multipart file metadata = { value: '{"key":"FILE_NAME","value":"karate-logo"}' }
* multipart file metadata = { value: '{"key":"FILE_EXTENSION","value":"jpg"}' }
* method post
* status 200
Otherwise, please use these instructions to troubleshoot, and work with your server-side team if possible: github.com/karatelabs/karate/issues/1645#issuecomment-862502881
I'm using NAVER API to detect faces, so I have to send POST message to API server. The format of message is like below.
[HTTP Request Header]
POST /v1/vision/face HTTP/1.1
Host: openapi.naver.com
Content-Type: multipart/form-data; boundary={boundary-text}
X-Naver-Client-Id: {Client ID}
X-Naver-Client-Secret: {Client Secret}
Content-Length: 96703
--{boundary-text}
Content-Disposition: form-data; name="image"; filename="test.jpg"
Content-Type: image/jpeg
{image binary data}
--{boundary-text}--
After I checked format, I wrote using MultipartRequest and MultipartFile.
Future<void> getFaceData() async {
final Uri url = Uri.parse('https://openapi.naver.com/v1/vision/face');
final request = http.MultipartRequest('POST',url);
request.fields['X-Naver-Client-Id'] = 'client key(I added real value)';
request.fields['X-Naver-Client-Secret'] = 'client secret(I added real value)';
request.files.add(await http.MultipartFile.fromPath(
'image',
_image.path,
contentType: MediaType('multipart','form-data')
));
http.StreamedResponse response = await request.send();
print(response.statusCode);
}
But this code gets 401 error which is UNAUTHORIZED. What is the problem? How can I fix it?
The X-Naver... values are HTTP headers, rather than form fields. Add them like this instead:
request.headers['X-Naver-Client-Id'] = 'client key(I added real value)';
request.headers['X-Naver-Client-Secret'] = 'client secret(I added real value)';
I am trying to do a multi-part upload from my javascript application and it works fine in the chrome browser but fails without error when run in electron.
I can't find information, why it fails in electron, but maybe some of you have an idea? :)
var fileContent = new Uint8Array([64,65,66,67]);
var fileBlob = new Blob([fileContent], {type: 'application/octet-stream'});
var data = new FormData();
data.set('file', fileBlob, 'blob.bin');
fetch('http://my.end.point', {
method: 'POST',
body: data
});
When I run that code in Chrome, I can see the 4 bytes payload in the network tab and my end point receives the 4 bytes. If I do the same in electron, the payload in the network tab is empty and the end point receives the multi-part request with the payload missing. I also tried using XMLHttpRequest instead of fetch but that shows exactly the same behavior.
Request Payload from within electron:
------WebKitFormBoundaryNXzPiiAvBttdDATr
Content-Disposition: form-data; name="file"; filename="blob.bin"
Content-Type: application/octet-stream
------WebKitFormBoundaryNXzPiiAvBttdDATr--
Request payload from withon chrome browser:
------WebKitFormBoundarywTEtXn4z3NFt3sAb
Content-Disposition: form-data; name="file"; filename="blob.bin"
Content-Type: application/octet-stream
#ABC
------WebKitFormBoundarywTEtXn4z3NFt3sAb--
Does someone know, why it doesn't work from within electron?