upload mp4 with expo in react native problem - react-native

I'm new in react native and this might be a silly question, but when I'm trying to upload .mp4 with react native using expo in my backend server side (laravel) I receive a jpg/jpeg file which is weird because with the same code when I try to upload .mov file it works as expected without any problem.
is there anything I've done wrong?
p.s: I've already tried to fetch method and axios but I get the same result with both.
here's my code:
postForm = () => {
var body = new FormData();
body.append("title", this.state.text);
body.append("description", this.state.description);
body.append("category_id", this.state.category_id);
body.append("type", this.state.type);
body.append('media_path', {
uri: this.state.photos.photos[0].file,
name: `media.mp4`,
type: this.state.format
});
this.state.photos.photos.map((item, index) => {
console.log("addable item is", index, item.file);
//skip first photo to media_path
if (index == 0) {
console.log("avalin index: ", item.file)
return
}
else {
file = item.file.toLowerCase();
console.log("full name is", file);
let addable = {
uri: item.file,
name: `addables`,
type: this.state.format
}
body.append("addables[]", addable)
}
})
console.log("final body: ", body);
this.setState({
uploading: true,
}, function () {
let apiUrl = `${config.BASE_URL}api/products`;
console.log(apiUrl);
axios({
method: 'POST',
url: apiUrl,
data: body,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
"authorization": this.state.token
}
})
.then((response) => {
//handle success
console.log("success response: ", response);
if (response.data.status == true) {
this.setState({
uploading: false
}, function () {
this.props.navigation.push('profile');
})
}
else {
this.setState({
uploading: false
}, function () {
this.showToast("unsuccessful operation.", "danger", 3000);
})
}
})
.catch(function (response) {
//handle error
console.log(response);
alert("response)
});
})
}
and this is what laravel logs tels me:
array (
'title' => 'test',
'description' => 'test',
'category_id' => '3',
'type' => 'video',
'media_path' =>
Illuminate\Http\UploadedFile::__set_state(array(
'test' => false,
'originalName' => 'media.mp4',
'mimeType' => 'image/jpeg',
'error' => 0,
'hashName' => NULL,
)),
)

Related

How to upload a file in react-native iOS?

While trying to upload a file I ran into an issue on iOS, the code works fine on android. After a bit of googling, I found that it is a known issue in react-native iOS and has a bug report submitted. This is the issue. I want to know if there is any other way to upload files on iOS. Below is the snippet of code I'm using. Please let me know if there is something that can be done.
const resp = await fetch(uploadUrl, {
method: 'POST',
headers: {
'content-type': 'multipart/form-data',
},
body: file, // file is File type
});
You can something like below code snippet
function uploadProfileImage(image, token) {
const url = ServiceUrls.UPLOAD_PROFILE_IMAGE
return uploadResourceWithPost({
url,
authToken: token,
formData: createFormData(image),
})
}
const createFormData = (data) => {
const form = new FormData()
form.append('file', {
uri: Platform.OS === 'android' ? data.uri : data.uri.replace('file://', ''),
type: 'image/jpeg',
name: 'image.jpg',
})
return form
}
const uploadResourceWithPost = ({ url, authToken, formData }) => {
return handleResponse(axios.post(url, formData, defaultUploadOptions(authToken)))
}
const defaultUploadOptions = (authToken) => ({
timeout,
headers: {
'X-Auth-Token': authToken,
'Content-Type': 'multipart/form-data',
},
})
const handleResponse = (responsePromise) => {
return NetInfo.fetch().then((state) => {
if (state.isConnected) {
return responsePromise
.then((response) => {
return ResponseService.parseSuccess(response)
})
.catch((error) => {
return ResponseService.parseError(error)
})
}
return {
ok: false,
message: 'Check your network connection and try again.',
status: 408,
}
})
}
const parseSuccess = ({ data, headers }) => ({ ...data, headers, ok: true })
const parseError = ({ response }) => {
let message = 'Check your network connection and try again.'
let status = 408
if (response && response.data) {
const { data } = response
message = data.message
status = data.code
}
return { status, message }
}

React native camera image upload

I have some problems with image upload in react native :) please help!!!
Here Is my example:
async function uploadFirstPicture(uri) {
const photo = {
name: 'first-selfie',
type: 'image/jpeg/jpg',
uri: Platform.OS === 'android' ? uri : uri.replace('file://', ''),
};
const formData = new FormData();
formData.append('file', photo);
const response = await axios({
method: 'POST',
url: `${API_ROOT}/Session/Upload`,
data: {
SessionId: sessionId,
File: formData,
DataType: 3,
},
headers: {'Content-Type': 'multipart/form-data;'},
});
(await response.data.success) && updateState({uploadFirstPicture: true});
}
Request Headers:
accept application/json, text/plain, */* content-type
multipart/form-data;
Request body:
{
"SessionId":"0198a8c6-e250-485d-82c3-8ce9190a4d20",
"File":{
"_parts":[
[
"file",
{
"name":"first-selfie",
"type":"image/jpeg/jpg",
"uri":"/var/mobile/Containers/Data/Application/BBAFA325-BE23-45C5-B81F-255BBC4856B8/Library/Caches/Camera/D6D7839A-E1B1-425E-8488-BC8FDA0DE092.jpg"
}
]
]
},
"DataType":3
}
Request Error 400
Failed to read the request form. Missing content-type boundary.
request Url:
https://bio.dev.cdigital.am/api/Session/Upload
Swager:
https://bio.dev.cdigital.am/swagger/index.html
For select image, you can use following.
ImagePicker.launchImageLibrary(options, response => {
console.log("My repoinse data --- > ", response)
if (response.didCancel) {
} else if (response.error) {
} else if (response.customButton) {
} else {
let searchString = response.fileName
? response.fileName.toString().toLowerCase()
: '';
if (!searchString) {
return;
}
this.setState(
{
profileImage: response.uri,
cropperVisible: true,
AmazingCropper: true,
imageType: response.type,
imageFileName: response.fileName,
imgLat: response.latitude,
imgLong: response.longitude
},
() => {
this.uploadOriginalImage(Platform.OS);
},
);
}
});
Upload image to the server:-
uploadOriginalImage = type => {
this.setState({ loading: true, responseMessage: "" });
let passData = new FormData();
passData.append('original_image', {
uri:
type === 'android'
? this.state.profileImage
: this.state.profileImage.replace('file://', ''),
type: this.state.imageType,
name: this.state.imageFileName,
});
Dating.uploadimage(passData, true)
.then(res => {
this.setState({ loading: false, });
if (res.Status === 200) {
} else if (res.Status === 401) {
} else {
}
})
.catch(err => {
this.setState({ loading: false });
});
};

How to upload image to server in React Native

I'm trying to upload image by using React Native axios. But I get this response. I tried every solutions but it didn't work. I'm using react-native-image-picker to get image
{ result: null,
message: 'Wrong access',
error: true,
type: 'command_not_found' }
Here is my code
ImagePicker.showImagePicker(options, (response) => {
let formData = new FormData();
formData.append('image', { uri: response.uri, name: response.fileName, type:response.type });
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios({
url: "URL",
method: 'POST',
data: formData,
config
})
.then(result => console.log(result))
.catch(error => console.log(error))
}
Try with raw fetch api.
const createFormData = (photo) => {
const data = new FormData();
data.append("photo", {
name: photo.fileName,
type: photo.type,
uri:
Platform.OS === "android" ? photo.uri : photo.uri.replace("file://", "")
});
return data;
};
and then try to upload it again
fetch("http://localhost:3000/api/upload", {
method: "POST",
body: createFormData(photo)
});

How to get Html code by fetching web API response?

When we are trying to fetch html code via fetch API response but we are enable to get it because it return "Unexpected Token <"
onLoginService2 = async () => {
try {
var hittingURl = "https://members.iracing.com/membersite/Login?username=dave#rms55.com.au&password=rms55Pa55&utcoffset=-600&todaysdate=1558055491688&checkbox=0";
const myRequest = new Request(hittingURl.toString(),
{
method: 'POST',
headers: {
'Accept': 'text/html',
'Content-Type': 'text/html;charset=ISO-8859-1',
},
timeout: 1000,
// body: JSON.stringify("")
}
);
fetch(myRequest)
.then((response) => console.log("abcdefghijklmon--> "+JSON.stringify(response)))
.then((data) => {
console.log("RESPONSERR----> ",data+"");
// this.setState({ isLoading: false })
// this.onLoginSuccessFull(responseJson)
})
.catch((error) => {
this.setState({ isLoading: false })
console.log("response--31" + error);
})
} catch{
}
// }
}
The response of first then has a method .text(), which return Promise
Try this
fetch(myRequest)
.then(resp => resp.text())
.then(text => {
//text is html
})
*Just copy the above and run in console to see the result.

Upload image using fetch doesn't work in React Native (iOS)

I am working on a mobile app using React Native and posting an image on iOS doesn't work. I have hooked up my code to requestbin, setup the info.plist to allow non-https urls and other post requests are working (e.g login). For the image, all I get is a blank body for the request. Here is the code posting the image:
uploadImage = () => {
const data = new FormData();
data.append('photo', {
uri: this.state.logo.uri,
name: 'logo'
});
fetch([requestbin url here], {
method: 'post',
body: data
}).then(res => {
console.log(res);
});
for the image, I am using react-native-image-picker to get it and store it in state under the variable 'logo'. Here is that code as well
handleNewImage = () => {
var options = {
title: 'Choose new company logo',
storageOptions: {
skipBackup: true,
path: 'images'
}
};
showImagePicker(options, response => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
logo: source
});
}
});
Remember that you also should pass a name key too, like below:
let url = "",
headers = "",
method = "POST",
body = new FormData(),
uri = "URI of the picked image.";
body.append("photo", {
name: "Just a name",
uri : Platform.OS === "android" ? uri : uri.replace("file://", "")
}
);
fetch(url, method, headers, body)
.then(function (response) {
})
.catch(function (error) {
});
function uploadProfilePicture(mImage) {
var data = new FormData();
data.append('theFile', { uri: mImage.uri, name: 'profile_photo.jpg', type: 'image/jpg' });
fetch(AppConstant.BASE_URL + AppConstant.upload_media, {
method: 'POST',
body: data
})
.then((response) => response.json())
.then((responseJson) => {
var err = 'error_message' in responseJson ? true : false
if (err) {
alert(responseJson.error_message)
} else {
alert(JSON.stringify(responseJson))
}
})
.catch((error) => {
console.error(error);
alert(error)
});
}
If anyone has issues with using fetch in iOS, check out react-native-file-upload I have found it to be extremely helpful in both image uploading and regular posts.