This is my react native version
react-native-cli: 2.0.1
react-native: 0.63.4
can please someone help ? I tried so many things to change my file from mobile device to send it as base64 or blob to server
But none can change my file to base 64 or blob
here's how my console logh : path : look like
file:///storage/emulated/0/DCIM/b01f3aef-4b56-48d9-b7a2-e3424df0f054.jpg --------IMAGEURI
yes thats an image uri and I can show it up on my mobile screen just by calling
<Image uri={that file path...}/>
for (var i = 0 ; i < entriesImage.length ; i++){
IdImage = [i][0]
LabelImage = entriesImage[i][0]
ImageUri = entriesImage[i][1].uri
Notes = entriesImage[i][1].notes
Latitude = entriesImage[i][1].location.latitude
Longitude = entriesImage[i][1].location.longitude
//DateImage = entriesImage[i][1].date
DateImage = new Date()
console.log(ImageUri,'--------IMAGEURI')
objImage = {
"surveyId": "3",
"photo": entriesImage[i][1].uri,
"photoId": [i][0],
"label": entriesImage[i][0],
"latitude": entriesImage[i][1].location.latitude,
"longitude": entriesImage[i][1].location.longitude,
"photoDate": DateImage,
"notes": Notes
}
arrayImage.push(objImage)
}
console.log(ImageUri,'--------IMAGEURI'), ImageUri as filepath I wanted to send to server
but still no luck on how to convert to to base64 or blob
I also tried expo image manipulator , also no luck , help please
Create a formData and use it like this to send to server
Create a function
const CreateFormData = (filePath) => {
var formdata = new FormData();
formdata.append('file', {
name: 'SampleImage.jpg',
uri: filePath, // File path
type: 'image/jpg',
});
return formdata;
};
Now use it like this
const response = CreateFormData("file:///storage/emulated/0/DCIM/b01f3aef-4b56-48d9-b7a2-e3424df0f054.jpg")
Now perform a POST request with this response formData in body
Related
My model is held in a JavaScript object on the client side, where the user can edit its properties via the UI controls. I want to offer the user an option to download a JSON file representing the model they're editing. I'm using MVC core with .net 6.
What I've tried
Action method (using Newtonsoft.Json to serialize the model to JSON):
public IActionResult Download([FromForm]SomeModel someModel)
{
var json = JsonConvert.SerializeObject(someModel);
var characters = json.ToCharArray();
var bytes = new byte[characters.Length];
for (var i = 0; i < characters.Length; i++)
{
bytes[i] = (byte)characters[i];
}
var stream = new MemoryStream();
stream.Write(bytes);
stream.Position = 0;
return this.File(stream, "APPLICATION/octet-stream", "someFile.json");
}
Code in the view to call this method:
<button class="btn btn-primary" onclick="download()">Download</button>
And the event handler for this button (using jQuery's ajax magic):
function download() {
$.ajax({
url: 'https://hostname/ControllerName/Download',
method: 'POST',
data: { someModel: someModel },
success: function (data) {
console.log('downloading', data);
},
});
}
What happened
The browser console shows that my model has been posted to the server, serialized to JSON and the JSON has been returned to the browser. However no file is downloaded.
Something else I tried
I also tried a link like this to call the action method:
#Html.ActionLink("Download", "Download", "ControllerName")
What happened
This time a file was downloaded, however, because ActionLink can only make GET requests, which have no request body, the user's model isn't passed to the server and instead the file which is downloaded represents a default instance of SomeModel.
The ask
So I know I can post my model to the server, serialize it to JSON and return that JSON to the client, and I know I can get the browser to download a JSON-serialized version of a model, but how can I do both in the same request?
Edit: What I've done with the answer
I've accepted Xinran Shen's answer, because it works as-is, but because I believe that just copying code from Stack Overflow without understanding what it does or why isn't good practice, I did a bit of digging and my version of the saveData function now looks like this:
function saveData(data, fileName) {
// Convert the data to a JSON string and store it in a blob, a file-like
// object which can be downloaded without it existing on the server.
// See https://developer.mozilla.org/en-US/docs/Web/API/Blob
var json = JSON.stringify(data);
var blob = new Blob([json], { type: "octet/stream" });
// Create a URL from which the blob can be downloaded - see
// https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
var url = window.URL.createObjectURL(blob);
// Add a hidden hyperlink to the page, which will download the file when clicked
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = fileName;
document.body.appendChild(a);
// Trigger the click event on the hyperlink to download the file
a.click();
// Release the blob's URL.
// Browsers do this when the page is unloaded, but it's good practice to
// do so as soon as it's no longer needed.
window.URL.revokeObjectURL(url);
// Remove the hidden hyperlink from the page
a.remove();
}
Hope someone finds this useful
First, Your code is right, You can try to access this method without ajax, You will find it can download file successfully,But You can't use ajax to achieve this, because JavaScript cannot interact with disk, you need to use Blob to save the file. change your javascript like this:
function download() {
$.ajax({
url: 'https://hostname/ControllerName/Download',
method: 'Post',
data: { someModel: someModel },,
success: function (data) {
fileName = "my-download.json";
saveData(data,fileName)
},
});
}
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
I think you may need FileStreamResult, also you need to set the MIME type to text file or json file.
// instead of this
return this.File(stream, "APPLICATION/octet-stream", "someFile.json");
// try this
return new FileStreamResult(stream, new MediaTypeHeaderValue("text/plain"))
{
FileDownloadName = "someFile.txt"
};
// or
return new FileStreamResult(stream, new MediaTypeHeaderValue("application/json"))
{
FileDownloadName = "someFile.json"
};
Reference: https://www.c-sharpcorner.com/article/fileresult-in-asp-net-core-mvc2/
I am sending blob PDF generated by JSPDF to Laravel API from the front end, but Laravel doesn't seeing it and saying the the field is required, when I console.log() the blob I see that it exists as bellow
Blob
size: 2888211
type: "application/pdf"
[[Prototype]]: Blob
the code in Laravel to store it
$report = $request->file('report');
$ext = $report->getClientOriginalExtension();
$report_name = $request->qr_url . ".$ext";
$report->move(public_path('uploads/reports/'), $report_name);
What is the wrong here please?
Why ?
just send them as files
let reader = new FileReader();
reader.addEventListener('load', (event) => {
// send that file
let file = event.target.result;
let formData = new FormData();
formData.append('file', file);
let request = new XMLHttpRequest();
request.open("POST", "endpoint url");
request.send(formData);
});
reader.readAsDataURL(blob);
I have a case in my application where I need to send data as form data to a server. The data includes a message and an optional list of files. The problem I'm facing is that when sending the request it's not being formed properly.
Request Payload
Expected (sample with the same request in the browser)
Actual (resulting request when running in NativeScript)
The actual result is that the payload is somehow being URL encoded.
Code example
sendData({ id, message, files }) {
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
const payload = new FormData();
payload.append('message', message);
if (files && files.length > 0) {
files.forEach((file) => {
payload.append(`files`, file, file.name);
});
}
return AXIOS_INSTANCE.post(
`/api/save/${id}`,
payload,
config
);
}
As you can see from the above, I'm using axios and also I'm trying to use FormData to format the data. From my research it seems that NativeScript used to not support binary data via XHR - however looking at this merge request on GitHub it looks like it's been fixed about a year ago.
So my suspicion is that I'm doing something wrong, maybe there's an alternative to using FormData, or else I shouldn't use axios for this particular request?
Version Numbers
nativescript 6.8.0
tns-android 6.5.3
tns-ios 6.5.3
Nativescript's background-http supports multipart form data.
See below for how its configured to do multipart upload
var bghttp = require("nativescript-background-http");
var session = bghttp.session("image-upload");
var request = {
url: url,
method: "POST",
headers: {
"Content-Type": "application/octet-stream"
},
description: "Uploading "
};
var params = [
{ name: "test", value: "value" },
{ name: "fileToUpload", filename: file, mimeType: "image/jpeg" }
];
var task = session.multipartUpload(params, request);
I am fairly new to coding and I'm in the learning phase for both React Native and Laravel. I was working on some practice project and I needed to upload an image from my React Native app to the Laravel server and from the server I could save it on a cloud or something. I can upload and display the image on the app using expo-image-picker but I just can't seem to get it to post it to the server using formData.
Also, why is that when I console.log formData why is it showing an empty object?
My code to loading the image and uploading it:
pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if(!result.cancelled)
{
this.setState({
image : result.uri
})
}
// ImagePicker saves the taken photo to disk and returns a local URI to it
let localUri = result.uri;
//console.log("localUri:", localUri)
let filename = localUri.split('/').pop();
console.log("filename:", filename)
// extract the filetype
//let fileType = localUri.substring(localUri.lastIndexOf(".") + 1);
//console.log(fileType)
let fileType = localUri.substring(localUri.lastIndexOf(":") + 1,localUri.lastIndexOf(";")).split("/").pop();
console.log("type:", fileType)
let formData = new FormData();
formData.append("photo", {
uri : localUri,
name: `photo.${fileType}`,
type: `image/${fileType}`
});
console.log("formdata", formData)
let options = {
method: "POST",
body: formData,
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data"
}
};
let response = await fetch(`${this.props.url}imagetest`, options)
result = await response.json()
console.log(result)
My simple code for api.php in Laravel is:
Route::post("/imagetest", function (Request $request) {
return ["uploaded" => $request->hasFile("photo")];
});
Found the solution at
send image using Expo
The problem I was having, I was testing it by running the code on web, when I ran it on the device I could see the formdata as well as the image was been uploaded too
I am developing cross platform app with nativescript, I get a problem with getting user selected image from gallery, the library I used return user selected image path. It is very easy in android, it is my code for create File for user selected image that I used in android.
String File_Path = "/storage/emulated/0/Pictures/Screenshots/Screenshot_20171016-173404.png"
File file = new File(File_Path);
The reason I need to create File of user selected image is I will need to send user selected image as a File in Multipar/FormData.
I tried many ways can't find soluction. Any suggestion greatly appreciated.
Thanks
It is my sample code for formdata
The answer above works, however another option would be to convert the selected image to a Base64String and treat it as any other string.
To do that just create a new ImageSource from file path and than simply use the toBase64String method provided.
Simlpy pass the format (jpg, png etc) and you're all set
Use nativescript background http, pass the path to this function
viewModel.uploadImage = function (imageUrl) {
var token = applicationSettings.getString("accessToken");
var form = new FormData();
form.append("file", imageUrl);
var bghttp = require("nativescript-background-http");
var session = bghttp.session("image-upload");
var request = {
url: <url>,
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
"File-Name": "somename",
"Authorization": token
},
description: "image for something"
};
var params = [
{ name: "somename", value: "value" },
{ name: "fileToUpload", filename: imageUrl, mimeType: 'image/jpeg' }
];
let task = session.multipartUpload(params, request);
return task;
}