http://cloudinary.com/documentation/image_upload_api_reference#upload
I tried the following:
user picks from camera roll:
{
data: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZg..."
origURL: "assets-library://asset/asset.JPG?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=JPG",
uri: "file:///Users/me/Library/Developer/CoreSimulator/Devices/1BC4A449-46CF-4ADE-A9B5-78906C9C50FB..."
}
then on the server (Node.js), I am trying to use uri from above:
addUserPhoto(uri) {
const photo = new Promise((resolve, reject) => {
const base64URI = new Buffer(uri).toString('base64');
cloudinary.v2.uploader.upload('data:image/jpeg;base64,'+base64URI, {}, (result) => {
console.log(result);
resolve(result);
});
});
return photo;
}
But I get the error:
{ message: 'Invalid image file', http_code: 400 }
Am not sure about the correct "file". What am I doing wrong? Which field am I supposed to pick from the camera roll data, and how do I convert it to a compatible "file" for Cloudinary API?
The uri is the local filepath to your image (on the phone), so the server doesn't have access to it.
The way to send an image to a distant host is to send the data.
So it ended up being the data one. Like this:
data:image/jpeg;base64,/9j/4AAQSkZ...
After that, Node Express was giving me Error: request entity too large (so I thought it was still wrong)
Turns out I had to do:
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
Related
Hosted remix app with supabase as db on netlify. Is there a way to generate pdf document using remix ?
Remix has a feature called Resource Routes which let you create endpoints returning anything.
Using them, you could return a Response with a PDF, how to generate the PDF will depend on what libraries you are using, if you use something like React PDF you could do something like this:
// routes/pdf.tsx
import { renderToStream } from "#react-pdf/renderer";
// this is your PDF document component created with React PDF
import { PDFDocument } from "~/components/pdf";
import type { LoaderFunction } from "remix";
export let loader: LoaderFunction = async ({ request, params }) => {
// you can get any data you need to generate the PDF inside the loader
// however you want, e.g. fetch an API or query a DB or read the FS
let data = await getDataForThePDFSomehow({ request, params });
// render the PDF as a stream so you do it async
let stream = await renderToStream(<PDFDocument {...data} />);
// and transform it to a Buffer to send in the Response
let body: Buffer = await new Promise((resolve, reject) => {
let buffers: Uint8Array[] = [];
stream.on("data", (data) => {
buffers.push(data);
});
stream.on("end", () => {
resolve(Buffer.concat(buffers));
});
stream.on("error", reject);
});
// finally create the Response with the correct Content-Type header for
// a PDF
let headers = new Headers({ "Content-Type": "application/pdf" });
return new Response(body, { status: 200, headers });
}
Now when the user goes to /pdf it will get the PDF file back, you could also use an iframe to show it on the HTML.
If you don't use React PDF, change the render part to use the library you are using, and keep the headers and the Response creation part.
I have a React Native application that is using fetch to upload some text data and images. We recently noticed not all the images are saving on the server. Firing up Charles I found some of the images look malformed, not sure exactly why or what is causing this.
Through testing I have tried different images, the same image, etc and still seem to have this issue. In the screenshot below you can see the request and how only one image has the correct data. Im not sure what those symbols mean or why they are there..
As you can see in the code, I am appending both images the same exact way..
// data is my object that contains job info, image meta info, etc..
const formData = new FormData();
formData.append("sc", JSON.stringify(data));
// append call images
data.SavedImages.forEach(image => {
if (image.meta && image.meta.uri) {
formData.append(`image_sc_${image.ImageID}`, {
uri: image.meta.uri,
type: "image/jpeg",
name: data.CallID
});
}
});
//append equip images
data.Equip.forEach(e => {
e.SavedImages.forEach(image => {
if (image.meta && image.meta.uri) {
formData.append(`image_equip_${image.ImageID}`, {
uri: image.meta.uri,
type: "image/jpeg",
name: image.EquipmentID
});
}
});
});
return fetch(Api.buildURL("ServiceCallPayload"), {
method: "POST",
body: formData
})
I would expect the images to both be included in the request and in the correct format but instead its corrupted somehow.
Colleague of mine figured it out, the name property needed to have the proper file extension, otherwise it was treated as text.
// append call images
data.SavedImages.forEach(image => {
if (image.meta && image.meta.uri) {
formData.append(`image_sc_${image.ImageID}`, {
uri: image.meta.uri,
type: "image/jpeg",
name: data.CallID + '.jpeg'
});
}
});
I need to upload a selection of images that user picked from CameraRoll to the LoopBack Component Storage. The thing is that the component storage is working fine, because I can upload and download the files through Postman. But, when I try to upload from react native to loopback, it always returns "No file content upload" with http status 400.
I read a lot of people talking about it and tried everything and none worked for me.
First, I am taking the images from the CameraRoll and my images array looks like this:
[
{
exists: 1,
file: "assets-library://asset/asset.JPG?id=3FF3C864-3A1A-4E55-9455-B56896DDBF1F&ext=JPG",
isDirectory: 0,
md5: "428c2e462a606131428ed4b45c695030",
modificationTime: 1535592967.3309255,
size: 153652,
uri: null
}
]
In the example above I just selected one image.
I transformed to Blob, then I got:
[
{
_data: {
blobId: "3FF3C864-3A1A-4E55-9455-B56896DDBF1F",
name: "asset.JPG",
offset: 0,
size: 153652,
type: "image/jpeg"
}
}
]
So I tried a lot of things after this, tried to send the blob itself as the request body, tried to append to a form data and send the form data, but it doesn't matter the way I try, I always get the "No file content upload" response.
I also tried the example from Facebook, didn't work: https://github.com/facebook/react-native/blob/master/Libraries/Network/FormData.js#L28
The way I am trying now:
In my view:
finalizarCadastro = async () => {
let formData = new FormData();
let blobs = [];
for(let i=0;i<this.state.fotos.length;i++){
let response = await fetch(this.state.fotos[i]);
let blob = await response.blob();
blobs.push(blob);
}
formData.append("files", blobs);
this.props.servico.criar(formData);
}
And the function that send to my server:
criar: (servico) => {
this.setState({carregando: true});
axios.post(`${REQUEST_URL}/arquivos/seila/upload`, servico, {headers: {'content-type': 'multipart/form-data'}}).then(() => {
this.setState({carregando: false});
this.props.alertWithType("success", "Sucesso", "Arquivo salvo com sucesso");
}).catch(error => {
this.setState({carregando: false});
console.log(error.response);
this.props.alertWithType("error", "Erro", error.response.data.error.message);
})
}
I found the solution. So the problem was actually not the code itself, the problem was sending multiple files at the same time. To fix everything, I did this:
this.state.fotos.forEach((foto, i) => {
formData.append(`foto${i}`, {
uri: foto,
type: "image/jpg",
name: "foto.jpg"
});
})
this.props.servico.criar(formData);
And my function that sends the request to the server:
criar: (servico) => {
this.setState({carregando: true});
axios.post(`${REQUEST_URL}/arquivos/seila/upload`, servico).then((response) => {
this.setState({carregando: false});
this.props.alertWithType("success", "Sucesso", "Arquivo salvo com sucesso");
}).catch(error => {
this.setState({carregando: false});
this.props.alertWithType("error", "Erro", error.response.data.error.message);
})
},
So you don't need to set the Content-Type header to multipart/form-data and don't need to transform the images to blob, actually you just need the uri of each one, and I think the type and name attributes are opcional.
I'm using react-native-camera and I'm having trouble getting the image as binary data in react-native. I need this to be able to upload images to our backend. The only thing I manage to get is uri's to the image and then maybe sending that as FormData to the server but that is not recommended as that would require some infrastructure change to our backend.
Is there anyone that know a solution or some tips regarding this issue?
Any thoughts or help is very much appreciated.
If you want to get image as binary data from react-native-camera. I recommend to use react-native-fs to read uri
Example
const RNFS = require("react-native-fs");
// response.uri from react-native-camera
RNFS.readFile(response.uri, "base64").then(data => {
// binary data
console.log(data);
});
If you want to upload image via FormData I recommend rn-fetch-blob
Example
import RNFetchBlob from 'rn-fetch-blob'
// response.uri from react-native-camera
const path = response.uri.replace("file://", "");
const formData = [];
formData.push({
name: "photo",
filename: `photo.jpg`,
data: RNFetchBlob.wrap(path)
});
let response = await RNFetchBlob.fetch(
"POST",
"https://localhost/upload",
{
Accept: "application/json",
"Content-Type": "multipart/form-data"
},
formData
);
An alternative if you're already using react-native-camera is upon capturing the image, you request it as base64 directly as such:
takePicture = async function(camera) {
const options = { quality: 0.5, base64: true, doNotSave: true }
const data = await camera.takePictureAsync(options)
console.log(data.base64)
}
If your goal is to only snap the picture, show a preview perhaps then upload to the server and move on, then the benefit of this approach is that it won't save that photo in your device cache (doNotSave: true). Which means that you don't need to worry about cleaning those up after you're done.
You can use 'react-native-image-crop-picker' to pick image and video. Set following property to true
includeBase64: true
and image file content will be available as a base64-encoded string in the data property
ImagePicker.openPicker({
mediaType: "photo",
includeBase64: true // this will give 'data' in response
})
.then((response) => {
console.log(resonse.data)
})
.catch((error) => {
alert(error)
});
I am developing a app where i need to upload an image to the server. Based on the image i get a response which i need to render?.
Can you please help me how to upload an image using react-native?.
There is file uploading built into React Native.
Example from React Native code:
var photo = {
uri: uriFromCameraRoll,
type: 'image/jpeg',
name: 'photo.jpg',
};
var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');
var xhr = new XMLHttpRequest();
xhr.open('POST', serverURL);
xhr.send(body);
My solution is using fetch API and FormData.
Tested on Android.
const file = {
uri, // e.g. 'file:///path/to/file/image123.jpg'
name, // e.g. 'image123.jpg',
type // e.g. 'image/jpg'
}
const body = new FormData()
body.append('file', file)
fetch(url, {
method: 'POST',
body
})
I wrote something like that. Check out https://github.com/kamilkp/react-native-file-transfer
I have been struggling to upload images recently on react-native. I didn't seem to get the images uploaded. This is actually because i was using the react-native-debugger and network inspect on while sending the requests. Immediately i switch off network inspect, the request were successful and the files uploaded.
I am using the example from this answer above it works for me.
This article on github about the limitations of network inspect feature may clear things for you.
Just to build on the answer by Dev1, this is a good way to upload files from react native if you also want to show upload progress. It's pure JS, so this would actually work on any Javascript file.
(Note that in step #4 you have to replace the variables inside the strings with the type and file endings. That said, you could just take those fields out.)
Here's a gist I made on Github: https://gist.github.com/nandorojo/c641c176a053a9ab43462c6da1553a1b
1. for uploading one file:
// 1. initialize request
const xhr = new XMLHttpRequest();
// 2. open request
xhr.open('POST', uploadUrl);
// 3. set up callback for request
xhr.onload = () => {
const response = JSON.parse(xhr.response);
console.log(response);
// ... do something with the successful response
};
// 4. catch for request error
xhr.onerror = e => {
console.log(e, 'upload failed');
};
// 4. catch for request timeout
xhr.ontimeout = e => {
console.log(e, 'cloudinary timeout');
};
// 4. create formData to upload
const formData = new FormData();
formData.append('file', {
uri: 'some-file-path', // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
type: `${type}/${fileEnding}`, // example: image/jpg
name: `upload.${fileEnding}` // example: upload.jpg
});
// 6. upload the request
xhr.send(formData);
// 7. track upload progress
if (xhr.upload) {
// track the upload progress
xhr.upload.onprogress = ({ total, loaded }) => {
const uploadProgress = (loaded / total);
console.log(uploadProgress);
};
}
2. uploading multiple files
Assuming you have an array of files you want to upload, you'd just change #4 from the code above to look like this:
// 4. create formData to upload
const arrayOfFilesToUpload = [
// ...
];
const formData = new FormData();
arrayOfFilesToUpload.forEach(file => {
formData.append('file', {
uri: file.uri, // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
type: `${type}/${fileEnding}`, // example: image/jpg
name: `upload.${fileEnding}` // example: upload.jpg
});
})
In my opinion, the best way to send the file to the server is to use react-native-fs package, so install the package
with the following command
npm install react-native-fs
then create a file called file.service.js and modify it as follow:
import { uploadFiles } from "react-native-fs";
export async function sendFileToServer(files) {
return uploadFiles({
toUrl: `http://xxx/YOUR_URL`,
files: files,
method: "POST",
headers: { Accept: "application/json" },
begin: () => {
// console.log('File Uploading Started...')
},
progress: ({ totalBytesSent, totalBytesExpectedToSend }) => {
// console.log({ totalBytesSent, totalBytesExpectedToSend })
},
})
.promise.then(({ body }) => {
// Response Here...
// const data = JSON.parse(body); => You can access to body here....
})
.catch(_ => {
// console.log('Error')
})
}
NOTE: do not forget to change the URL.
NOTE: You can use this service to send any file to the server.
then call that service like the following:
var files = [{ name: "xx", filename:"xx", filepath: "xx", filetype: "xx" }];
await sendFileToServer(files)
NOTE: each object must have name,filename,filepath,filetype
A couple of potential alternatives are available. Firstly, you could use the XHR polyfill:
http://facebook.github.io/react-native/docs/network.html
Secondly, just ask the question: how would I upload a file in Obj-C? Answer that and then you could just implement a native module to call it from JavaScript.
There's some further discussion on all of this on this Github issue.
Tom's answer didn't work for me. So I implemented a native FilePickerModule which helps me choose the file and then use the remobile's react-native-file-transfer package to upload it. FilePickerModule returns the path of the selected file (FileURL) which is used by react-native-file-transfer to upload it.
Here's the code:
var FileTransfer = require('#remobile/react-native-file-transfer');
var FilePickerModule = NativeModules.FilePickerModule;
var that = this;
var fileTransfer = new FileTransfer();
FilePickerModule.chooseFile()
.then(function(fileURL){
var options = {};
options.fileKey = 'file';
options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
options.mimeType = 'text/plain';
var headers = {
'X-XSRF-TOKEN':that.state.token
};
options.headers = headers;
var url = "Set the URL here" ;
fileTransfer.upload(fileURL, encodeURI(url),(result)=>
{
console.log(result);
}, (error)=>{
console.log(error);
}, options);
})
Upload Files : using expo-image-picker npm module. Here we can upload any files or images etc. The files in a device can be accessed using the launchImageLibrary method. Then access the media on that device.
import * as ImagePicker from "expo-image-picker";
const loadFile = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
aspect: [4, 3],
});
return <Button title="Pick an image from camera roll" onPress={loadFile} />
}
The above code used to access the files on a device.
Also, use the camera to capture the image/video to upload by using
launchCameraAsync with mediaTypeOptions to videos or photos.