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?
Related
I'm relatively new to rust and using reqwest to fetch a PDF document from a REST API endpoint. The content-type of the response is multipart/form-data; boundary=bc1f6465-6738-4b46-9d9d-b9ae36afa8cb with two parts:
--bc1f6465-6738-4b46-9d9d-b9ae36afa8cb
Content-Disposition: form-data; name="metadata"
Content-Type: application/json
{"documentId":"QkNfRENfSUwwMDEsRTA1OEU3ODQtMDAwMC1DNzY5LTg1MjktMTRFRkI5RTBFNjRF"}
--bc1f6465-6738-4b46-9d9d-b9ae36afa8cb
Content-Disposition: form-data; name="document"; filename=document.pdf
Content-Type: application/pdf
%PDF-1.4
<binary content>
%%EOF
--bc1f6465-6738-4b46-9d9d-b9ae36afa8cb--
I want now to save the PDF document in the 2nd part as a valid PDF file on disk. But the multipart functionality within reqwest seems to create new multipart requests whereas I need to parse a multipart response.
My code to download the file:
use reqwest::{self, header::AUTHORIZATION};
fn main() {
let url = "https://example.com/rest/document/123";
let authorization_header = String::from("Bearer ") + access_token.as_str();
let res = client.get(url)
.header(AUTHORIZATION, &authorization_header)
.send()
.expect("Error calling API");
}
Any hint on how to process the multipart/form-data response is appreciated!
In my project I want to try to upload files, here is the part of the code responsible for this:
MultipartConfigElement multipartConfigElement =
new MultipartConfigElement(
"/tmp_files",
avatarSize,
avatarSize,
1024
);
request.raw().setAttribute(
"org.eclipse.jetty.multipartConfig",
multipartConfigElement
);
Part uploadedFile = request.raw().getPart("file");
And a request to upload a file using Idea's http client:
POST http://localhost:8080/users/me/avatar
Content-Type: multipart/form-data; boundary=abcd
Authorization: Bearer {{authToken}}
--abcd
Content-Disposition: form-data; name="file"; filename="test.png"
< /Users/user1/resources/test.png
--abcd--
where test.png is a regular picture.
But when I try to load in this code place:
Part uploadedFile = request.raw().getPart("file");
I get an error:
java.nio.file.NoSuchFileException: /tmp_files/MultiPart11851484240893602177
at java.base/sun.nio.fs.UnixException.translateToIOException(UnixException.java:92)
at java.base/sun.nio.fs.UnixException.rethrowAsIOException(UnixException.java:106)
at java.base/sun.nio.fs.UnixException.rethrowAsIOException(UnixException.java:111)
at java.base/sun.nio.fs.UnixFileSystemProvider.newByteChannel(UnixFileSystemProvider.java:218)
at java.base/java.nio.file.Files.newByteChannel(Files.java:375)
at java.base/java.nio.file.Files.createFile(Files.java:652)
It can be assumed that this error is due to the fact that there are no write permissions to the root of the file system (I'm testing on mac os, under the user).
But if i try to upload another file - which is just a zip file then everything works.
POST http://{{host}}/users/me/avatar
Content-Type: multipart/form-data; boundary=abcd
Authorization: Bearer {{authToken}}
--abcd
Content-Disposition: form-data; name="file"; filename="file123.zip"
< /Users/18493151/develop/icandev/api-gateway/src/main/resources/file123.zip
--abcd--
and no exception in this line:
Part uploadedFile = request.raw().getPart("file");
Why is this happening? Why does the result depend on the file type?
sparkjava version 2.9.4
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'm trying to upload a file with some form data using axios in React-Native as multipart/form-data to ASP.NET Web API.
I've followed this - https://learn.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2
and I'm reading the file and form data using MultipartFormDataStreamProvider which seems to be getting both the file and form data. However, the form data isn't complete. For example, I'm sending about 14 fields to the server, but I'm only getting 7 when I try to read it through provider.FormData.
My React Native / Axios Code
var dataToSubmit = new FormData();
// Have about 14 fields in the FormData
dataToSubmit.append('Key1', 'value1');
dataToSubmit.append('Key2', 'value2');
dataToSubmit.append('Key3', 'value3');
.
.
dataToSubmit.append('Key14', 'value14');
// Have 1 file in the FormData
dataToSubmit.append('File', {
uri: filePath,
type: 'image/jpeg',
name: fileName
});
axios({
method: 'POST',
url: 'URL to post',
data: dataToSubmit,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
console.log(response);
});
My Request
I have a debugger on the phone and I saw the following request (with all the 14 fields and the file)
POST /api/urltopost HTTP/1.1
accept: application/json, text/plain, */*
Content-Type: multipart/form-data;
boundary=BOUNDARY_GUID
Content-Length: 53038
Host: HOST_IP
Connection: Keep-Alive
Accept-Encoding: gzip
--BOUNDARY_GUID
content-disposition: form-data; name="Key1"
Content-Length: 24
--BOUNDARY_GUID
content-disposition: form-data; name="Key2"
Content-Length: 24
..
..
--BOUNDARY_GUID
content-disposition: form-data; name="File"
filename="test.jpg",
Content-Type: image/jpeg
Content-Length: 50626
My ASP.NET Web API Code
public async Task<HttpResponseMessage> PostFormData(DTO obj)
{
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.Current.Server.MapPath("~/App_Data");
var provider = new MultipartFormDataStreamProvider(root);
try
{
await Request.Content.ReadAsMultipartAsync(provider);
// Show all the key-value pairs.
foreach (var key in provider.FormData.AllKeys)
{
foreach (var val in provider.FormData.GetValues(key))
{
Trace.WriteLine(string.Format("{0}: {1}", key, val));
}
}
return Request.CreateResponse(HttpStatusCode.OK);
}
catch (System.Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
}
When I look at provider, it shows Contents with count 8, FileData with count 1 and FormData with 7 fields. But I seem to be missing other 7 fields.
NOTE:
I'm using OWIN
I tried uploading files from 21 KB to 5.2 MB. I always get the 8 contents. I even tried multipart/form-data submission without the file and I still get only those fields.
I have the following in my web.config to set request limit, which seems to have no impact with the buffer size of the provider -
<!-- Under system.webServer -->
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="2147483648" />
</requestFiltering>
</security>
<!-- Under system.web -->
<httpRuntime targetFramework="4.5.2" maxRequestLength="2097152" />
I tried using MultipartMemoryStreamProvider and it still gets the 8 contents.
I tried using Postman and I'm still getting the form data in chunk / 8 fields.
I tried setting the buffer size to 5120000 (since it's 4098 by default) for MultipartFormDataStreamProvider and I still get only those 8 fields. I can't seem to find why the other form fields aren't showing up / I can't get the value for them on the server side. I'm pretty sure I'm not doing anything wrong on the client side, since it's not working with Postman either. So I'm guessing it's just the way I'm reading Multipart data on the API.
Can someone tell me what I'm missing / doing wrong? Why am I not seeing all the fields that are sent through the form?
I couldn't figure out why the entire form data was not being submitted. So here is my workaround -
I'm making 2 calls to save the data -
A x-www-form-urlencoded request to save the FormData. I get the record ID / key from this save.
A multipart/form-data request to save the file with the key / identifier
I'm trying to send a multipart/form-data from a worker with IE. I've already done it with Chrome, Firefox, Safari using formData objects (not supported IE, I need a manual one)
The binary data I'm sending is a crypto-js encrypted data. With formData objects I do:
var enc = new Buffer(encrypted.ciphertext.toString(CryptoJS.enc.Base64), 'base64');
formData.append("userFile" , new Blob([finalEncrypted], {type: 'application/octet-binary'}), 'encrypted')
this works fine generating a multipart like this(missed some parts of it):
request headers:
Accept:*/*
Accept-Encoding:gzip, deflate
Cache-Control:no-cache
Connection:keep-alive
Content-Length:30194
Content-Type:multipart/form-data; boundary=WebKitFormBoundary0.gjepwugw5cy58kt9
body:
--WebKitFormBoundary0.gjepwugw5cy58kt9
Content-Disposition: form-data; name="userFile"; filename="encrypted"
Content-Type: binary
all binary data
--WebKitFormBoundary0.cpe3c80eodgc766r--
With the manual multipart/form-data:
IE11 doesn't accept readAsBinaryString(deprecated)
I would like to avoid sending base64 encoded data(readAsDataURL)(33% payload)
The binary data I'm sending is a crypto-js encrypted data.
I'm trying:
finalEncrypted = new Buffer(encrypted.ciphertext.toString(CryptoJS.enc.Base64), 'base64');
then in my manual multipart I tried to convert the buffer to a binary string:
item.toString('binary')
the multipart result looks looks this:
--WebKitFormBoundary642013568702052
Content-Disposition: form-data; name="userfile"; filename="encrypted"
Content-Type: binary
all binary data
ÐçÀôpRö3§]g7,UOÂmR¤¼ÚS"Ê÷UcíMÆÎÚà/,hy¼øsËÂú#WcGvºÆÞ²i¨¬Ç~÷®}éá?'é·J]þ3«áEÁÞ,4üBçðºÇª bUÈú4
T\Ãõ=òEnýR _[1J\O-ïǹ C¨\Ûøü^%éÓÁóJNÓï¹LsXâx>\aÁV×Þ^÷·{|'
On the .NET server we check the hash calculated on client versus calculated on server. Server reply that hashes doesn't match. This makes me think that I'm not sending the file correctly.
It looks like you did not yet get a solution, at least you did not post it here if you had one.
On my end I use jQuery which handles the low level nitty gritty of the actual post.
It may be that you are doing one small thing wrong and IE fails on it. Since you do not show what you used with FormData. It is rather difficult to see whether you had a mistake in there.
// step 1. setup POST data
var data = new FormData();
data.append("some_variable_name", "value_for_that_variable");
data.append("some_blob_var_name", my_blob);
data.append("some_file_var_name", my_file);
// step 2. options
var ajax_options =
{
method: "POST",
processData: false,
data: data,
contentType: false,
error: function(jqxhr, result_status, error_msg)
{
// react on errors
},
success: function(data, result_status, jqxhr)
{
// react on success
},
complete: function(jqxhr, result_status)
{
// react on completion (after error/success callbacks)
},
dataType: "xml" // server is expected to return XML only
};
// step 3. send
jQuery.ajax(uri, ajax_options);
Step 1.
Create a FormData object and fills the form data, that includes variables and files. You may even add blobs (JavaScript objects, will be transformed to JSON if I'm correct.)
Step 2.
Create an ajax_options object to your liking. Although here I show your the method, processData, data, contentType as they must be in case you want to send a FormData. At least, that works for me... It may be possible to change some of those values.
The dataType should be set to whatever type you expect in return.
Step 3.
Send the request using the ajax() function from the jQuery library. It will build the proper header and results as required for the client's browser.