react-native-blob-util icon indicating copy to clipboard operation
react-native-blob-util copied to clipboard

Error: ReactNativeBlobUtil.fetchBlobForm failed to create request body

Open indapublic opened this issue 2 years ago • 1 comments

Cannot find a correct way to upload file chosen from picker

"react-native-blob-util": "^0.18.2"
"react-native": "0.71.10"
import ReactNativeBlobUtil from "react-native-blob-util";
import { DocumentPickerResponse } from "react-native-document-picker";

const result = await pick({
	mode: "import",
	copyTo: "cachesDirectory",
	allowMultiSelection: false,
});

const a = ReactNativeBlobUtil.wrap(document.uri).replace("file://", "");
const b = ReactNativeBlobUtil.wrap(document.uri.replace("file://", ""));
const c = ReactNativeBlobUtil.wrap(document.uri.replace("file://", "")).replace("file://", "");

ReactNativeBlobUtil.fetch(
	"POST",
	`${API_URL}/${API_VERSION}/cad/Convert?outputFormat=${format}`,
	{
		Authorization: `Bearer ${await connect()}`,
	},
	[	
		{
			name: "drawing",
			filename: document.name,
			type: "application/dwg",
			data: a,
		},
	],
)
.then((res) => {
	console.log(res.text());
})
.catch((err) => {
	console.error(err);
});

debug output:

uri:

file:///Users/indapublic/Library/Developer/CoreSimulator/Devices/3F85443D-E32A-4C49-B9D2-07226D514FAB/data/Containers/Data/Application/B9B3D42F-4B75-4F28-A60B-5ABD9EB84EDF/tmp/com.myapp-Inbox/%D0%90%D0%A0_%D0%9F%D0%BB%D0%B0%D0%BD%20%D0%BD%D0%B0%20%D0%BE%D1%82%D0%BC-%200-000.dwg

a:
ReactNativeBlobUtil-file:///Users/indapublic/Library/Developer/CoreSimulator/Devices/3F85443D-E32A-4C49-B9D2-07226D514FAB/data/Containers/Data/Application/B9B3D42F-4B75-4F28-A60B-5ABD9EB84EDF/tmp/com.myapp-Inbox/%D0%90%D0%A0_%D0%9F%D0%BB%D0%B0%D0%BD%20%D0%BD%D0%B0%20%D0%BE%D1%82%D0%BC-%200-000.dwg

b:
ReactNativeBlobUtil-file:///Users/indapublic/Library/Developer/CoreSimulator/Devices/3F85443D-E32A-4C49-B9D2-07226D514FAB/data/Containers/Data/Application/B9B3D42F-4B75-4F28-A60B-5ABD9EB84EDF/tmp/com.myapp-Inbox/%D0%90%D0%A0_%D0%9F%D0%BB%D0%B0%D0%BD%20%D0%BD%D0%B0%20%D0%BE%D1%82%D0%BC-%200-000.dwg

c:
ReactNativeBlobUtil-/Users/indapublic/Library/Developer/CoreSimulator/Devices/3F85443D-E32A-4C49-B9D2-07226D514FAB/data/Containers/Data/Application/B9B3D42F-4B75-4F28-A60B-5ABD9EB84EDF/tmp/com.myapp-Inbox/%D0%90%D0%A0_%D0%9F%D0%BB%D0%B0%D0%BD%20%D0%BD%D0%B0%20%D0%BE%D1%82%D0%BC-%200-000.dwg

a and b will cause error [Error: ReactNativeBlobUtil.fetchBlobForm failed to create request body]

c will not throw this exception but seems like tries to pass empty file

indapublic avatar Jun 11 '23 12:06 indapublic

i picked file by react-native-document-picker, then uploaded to server. My file like this: { "fileCopyUri": "file:///var/mobile/Containers/Data/Application/.../PNG%20image.png", "name": "PNG image.png", "size": 2124954, "type": "image/png", "uri": "file:///private/var/mobile/Containers/Data/Application/.../PNG%20image.png" } and i resolved:

await ReactNativeBlobUtil.fetch( 'POST', url, { 'Content-Type': 'multipart/form-data', }, [ { name: 'FileData', filename: file.name, data: ReactNativeBlobUtil.wrap( Platform.OS === 'ios' ? decodeURIComponent(file.uri.replace('file://', '')) : file.uri, ), }, ......... i hope it can help u.

duongnguyen17 avatar Aug 10 '23 17:08 duongnguyen17