react native upload file form data - asp.net
it is work fine on post man so i copy the whole code from post mane
formdata.append("file_1", fileInput.files[0], "file.pdf");
and i change fileInput.files[0]to response from react native document picker
my problem i am getting an error on line 166 and this is below back end side code
this code built the .net
line 166 attachments.Add(new OpportunityAttachmentInfo()
{
ContentType = file.ContentType,
FileData = content,
FileName = fileDate.FileName +
file.FileName.Substring(file.FileName.LastIndexOf(".")),
AttachmentTypeId = request[i].AttachmentTypeId,
});
}
this is my react native code
uploadFIle = async (res) => {
var myHeaders = new Headers();
myHeaders.append('Authorization', 'Bearer ' + this.props.accessToken);
var formdata = new FormData();
formdata.append('file', res, res.name);
formdata.append(
'data',
JSON.stringify({
****
}),
);
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: formdata,
redirect: 'follow',
};
fetch(
'https://****',
requestOptions,
)
.then((response) => response.text())
.then((result) => {
console.log('result', result);
this.apiGetSupplierItem();
})
.catch((error) => console.log('error', error));
};
Related
Saved image in Firebase Storage is invalid
Firstly I have to say that I'm using Expo, so from one library I get a data url (I have already checked that it is correct) and then tries to save this image in Firebase Storage, but every time I send it to the base I see the error 'Error loading preview'. I've tried many ways, such as changing it to a Blob using a request, and here I get another error: [Unhandled promise rejection: TypeError: Network request failed] const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function () { resolve(xhr.response); }; xhr.onerror = function () { reject(new TypeError('Network request failed')); }; xhr.responseType = 'blob'; xhr.open('GET', dataUrl, true); xhr.send(null); }); uploadBytes(storageDatabaseReference, blob as Blob).then(() => { console.log('Uploaded a blob or file!'); }); And there are my previous tries: const base64result = dataUrl.split(',')[1]; await uploadString(storageDatabaseReference, base64result, 'base64', { contentType: 'image/png', }).then(async () => { const url = await getDownloadURL(storageDatabaseReference); return url; }); await uploadString(storageDatabaseReference, dataUrl, 'data_url', { contentType: 'image/png', }).then(async () => { const url = await getDownloadURL(storageDatabaseReference); return url; }); for example dataUrl can have value: data:image/png;base64,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 And this happens always after upload (which works only with uploadString currently): .
How to handle FormData in Miragejs?
Miragejs handles json out-of-the-box but seems to be unable to handle FormData. When I post FormData and log the received request in mirage endpoint, request.requestBody is empty. Simplified code examples: POSTing FormData: const testFile = new File(['hello'], 'hello.png', { type: 'image/png' }); const formData = new FormData('file', testFile); fetch('https://localhost:3000/api/endpoint', {method: 'POST', body: formData}); // ... receiving POST in mirage mock server: this.post('/endpoint', (schema, request) => { console.log('request:', request); // request.requestBody is an empty string! }); Possibly a related issue: https://github.com/miragejs/ember-cli-mirage/issues/74
It's possible to cast the request.requestBody to FormData and then parse the file. Shortening the excellent solution described in How to handle uploading and parsing files in your frontend app tests: this.post('/endpoint', (schema, request) => { const readFile = async (file: File): Promise<string> => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = () => reject(new Error('There was an error reading the file!')); reader.onload = () => resolve(reader.result as string); reader.readAsText(file); }); const formData: FormData = request.requestBody as unknown as FormData; const uploadFile: File = formData.get('file') as File; const fileContents: string = await readFile(uploadFile); console.log('Uploaded file contents:', fileContents); });
Next js upload image fail
There is no problem upload image using postman postman However let data = new FormData(); randomArray.forEach(image => { data.append('file', image.file); }) axios.post("http://localhost:8000/preview", data, { headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { console.log("success"); }).catch((error) => { //handle error console.log("fail"); }); I this code get 500 response to me. Here is a file list example
I tried to make a POST with react, it works, but my objects are empty when I verify in Postman
I have this POST to send the score and the name of a player after finnishing the game var sendScoreToAPI = (val) => { //get player name from browser prompt var playerName = prompt("Good Game, Well Played! Please enter your name: ", "Victor"); if (playerName != null) { var dataToSave = { //replace 10 with your actual variable (probably this.state.gameScore or this.state.time) playerName: playerName, playerScore: val, //currentTime: new Date() }; console.log(dataToSave) // Actual API call fetch( "https://localhost:44327/api/MineSweeper", // replace with the url to your API {method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(dataToSave)} ) .then(res => res.json()) .then( (result) => { alert('GG '+playerName + "! Ai un scor de "+val); }, // Note: it's important to handle errors here (error) => { alert('Bad API call'); console.log(error); } ) } } It works, in the console I see the right atributtes, but after the POST is empty when I try to GET from Postman.
Why is my image not loading in the Storage dashboard after uploading from Firebase Functions?
I am using the following firebase functions code. const functions = require('firebase-functions'); const admin = require('firebase-admin'); admin.initializeApp(functions.config().firebase); const firestore = admin.firestore(); firestore.settings({timestampsInSnapshots: true}); const cors = require("cors")({ origin: true }); const path = require('path'); const os = require('os'); const fs = require('fs'); // Node.js doesn't have a built-in multipart/form-data parsing library. // Instead, we can use the 'busboy' library from NPM to parse these requests. const Busboy = require('busboy'); exports.uploadFile = functions.https.onRequest((req, res) => { cors(req, res, () => { console.log('Request headers: ' + JSON.stringify(req.headers)); console.log('Request body: ' + JSON.stringify(req.body)); if (req.method !== "POST") { return res.status(500).json({ message: "Not allowed" }); } const busboy = new Busboy({ headers: req.headers }); let uploadData = null; busboy.on("file", (fieldname, file, filename, encoding, mimetype) => { console.log('fieldname ' + fieldname + 'file ' + file + ' encoding ' + encoding + ' mimetype ' + mimetype); const filepath = path.join(os.tmpdir(), filename); uploadData = { file: filepath, type: mimetype }; file.pipe(fs.createWriteStream(filepath)); }); busboy.on("finish", () => { console.log('Finished'); const destBucket = admin.storage().bucket("wairz-d5aee.appspot.com"); destBucket.upload(uploadData.file, { uploadType: "media", metadata: { metadata: { contentType: uploadData.type } }, destination: '/Images/myImage.jpg' }) .then(() => { console.log('200!'); res.status(200).json({ message: "It worked!" }); }) .catch(err => { res.status(500).json({ error: err }); }); }); busboy.end(req.rawBody); }); }); Here is my request. Here are the logs from the function. Request headers: {"host":"us-central1-wairz-d5aee.cloudfunctions.net","user-agent":"PostmanRuntime/7.20.1","transfer-encoding":"chunked","accept":"*/*","accept-encoding":"gzip, deflate","cache-control":"no-cache","content-type":"multipart/form-data; boundary=--------------------------830355209915480769258810","forwarded":"for=\"67.149.5.133\";proto=https","function-execution-id":"pzmqiu8jmisw","postman-token":"6421769e-df95-494c-a88e-c4cb92885fe1","x-appengine-city":"royal oak","x-appengine-citylatlong":"42.489480,-83.144649","x-appengine-country":"US","x-appengine-default-version-hostname":"ncac955097ca6038f-tp.appspot.com","x-appengine-https":"on","x-appengine-region":"mi","x-appengine-request-log-id":"5dec9cdb00ff072e2cbbdcacd70001737e6e636163393535303937636136303338662d7470000164306565646538376331393663343865373435386434653763616334326336393a3338000100","x-appengine-user-ip":"67.149.5.133","x-cloud-trace-context":"f59ac36f71c2827523171e4a58e540e7/11977574301495828521;o=1","x-forwarded-for":"67.149.5.133","x-forwarded-proto":"https","connection":"close"} Request body: {"type":"Buffer","data":[45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,56,51,48,51,53,53,50,48,57,57,49,53,52,56,48,55,54,57,50,53,56,56,49,48,13,10,67,111,110,116,101,110,116,45,68,105,115,112,111,115,105,116,105,111,110,58,32,102,111,114,109,45,100,97,116,97,59,32,110,97,109,101,61,34,105,109,97,103,101,34,59,32,102,105,108,101,110,97,109,101,61,34,116,101,115,116,73,109,97,103,101,46,106,112,101,103,34,13,10,67,111,110,116,101,110,116,45,84,121,112,101,58,32,105,109,97,103,101,47,106,112,101,103,13,10,13,10,255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,219,0,132,0,9,6,7,16,15,16,16,16,15,15,15,15,16,15,15,15,14,16,16,13,15,15,15,16,15,15,21,17,22,22,21,17,21,21,24,29,40,32,24,26,37,29,21,21,33,49,33,37,41,43,46,46,46,23,31,51,56,51,45,55,52,45,46,43,1,10,10,10,14,13,14,26,16,16,26,43,31,29,29,43,45,45,45,45,45,43,45,43,43,45,43,43,45,43,45,45,45,45,43,45,45,45,45,45,47,43,45,43,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,255,192,0,17,8,0,184,1,18,3,1,34,0,2,17,1,3,17,1,255,196,0,28,0,0,2,3,1,1,1,1,0,0,0,0,0,0,0,0,0,2,3,0,4,5,1,7,6,8,255,196,0,68,16,0,2,1,2,4,2,6,7,5,4,7,9,0,0,0,0,1,2,0,3,17,4,5,18,33,49,65,19,34,81,97,113,129,6,23,50,83,145,147,210,7,35,66,161,177,51,82,209,225,20,98,115,146,193,194,240,21,22,36,68,114,130,178,226,241,255,196,0,25,1,0,3,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,2,3,1,4,5,255,196,0,45,17,0,3,0,1,3,3,3,2,4,7,0,0,0,0,0,0,0,1,2,17,3,18,33,4,49,65,19,20,97,34,81,50,113,161,177,5,36,129,145,193,225,241,255,218,0,12,3,1,0,2,17,3,17,0,63,0,242,129,12,8,34,24,157,216,56,89,209,12,65,16,196,194,108,32,33,1,4,67,2,2,54,16,16,192,156,81,8,64,70,194,88,96,65,81,24,4,204,18,108,37,17,138,32,168,140,81,52,133,48,212,70,168,128,162,57,4,8,85,12,65,30,130,45,68,114,8,196,42,134,164,122,8,180,18,197,37,154,66,171,35,17,99,149,103,17,99,149,96,38,72,22,16,88,106,176,194,195,38,11,211,57,162,63,76,154,96,5,98,144,10,203,69,98,217,96,97,89,150,44,172,178,194,45,150,105,68,196,17,22,194,60,136,182,19,10,38,33,132,83,8,246,17,76,38,162,169,137,104,182,141,113,20,209,138,32,36,146,72,195,159,20,33,8,34,26,200,158,227,8,67,2,8,134,32,73,132,4,53,16,64,134,4,194,109,132,33,172,16,35,20,67,4,155,58,162,49,68,226,136,192,33,130,52,206,129,24,130,10,136,197,19,9,54,49,68,125,49,20,130,61,4,212,115,219,24,162,61,4,90,136,228,17,142,106,99,169,172,179,76,68,83,89,106,152,152,217,49,200,177,202,32,32,142,81,23,32,194,81,12,9,16,70,233,141,147,0,211,37,161,218,66,32,96,176,151,139,168,150,50,197,46,48,113,3,127,33,51,60,143,183,233,201,81,150,41,132,123,69,176,140,42,43,176,128,194,57,132,91,9,165,81,93,196,75,9,97,196,75,205,69,83,43,188,75,71,188,67,198,43,32,78,206,73,52,115,226,132,53,16,68,53,146,61,198,26,136,106,32,136,106,32,73,134,33,8,34,24,129,38,18,198,44,5,141,88,18,160,150,48,8,43,24,176,33,76,37,17,138,32,136,197,19,25,22,198,32,143,88,164,17,200,38,16,161,169,28,162,41,99,82,49,207,69,220,56,23,151,13,43,111,51,169,153,171,130,112,221,86,236,147,174,6,211,197,112,10,199,44,23,167,164,219,151,40,75,12,139,83,135,134,57,12,178,22,226,85,6,95,193,166,165,240,152,222,16,250,83,185,224,171,56,99,113,9,165,136,137,38,50,100,170,118,182,130,165,199,202,46,191,19,29,135,27,159,9,93,205,201,130,238,59,226,16,166,138,104,211,11,15,68,189,251,163,231,2,68,186,120,69,83,2,170,218,106,182,4,20,70,22,7,172,78,253,135,159,100,202,168,110,111,50,105,51,170,244,107,77,45,222,68,48,149,222,88,121,93,229,80,178,33,226,30,61,226,30,49,105,23,36,25,32,83,7,199,8,193,22,35,22,72,246,152,193,12,64,16,196,9,176,196,37,128,176,196,210,52,49,99,22,44,70,44,48,70,134,172,98,197,172,106,197,100,40,53,17,171,32,160,214,190,147,105,208,38,18,180,208,197,18,222,19,14,106,27,2,1,149,4,117,54,230,54,35,152,129,31,60,150,106,208,106,102,204,45,216,121,31,3,58,178,230,19,30,173,100,174,53,47,239,115,29,241,249,150,82,105,14,146,147,116,180,77,136,117,223,79,141,191,88,187,177,195,11,209,220,183,71,43,245,5,48,71,77,198,252,227,104,83,147,45,199,218,200,254,70,104,58,14,35,129,136,219,79,12,105,210,138,89,144,41,117,133,143,17,254,175,58,148,140,48,188,199,17,45,132,4,2,60,12,92,141,232,238,40,145,105,127,42,171,102,177,224,68,167,138,91,24,120,13,220,70,124,162,90,73,198,178,95,37,204,210,215,7,227,42,81,91,153,119,54,220,2,7,124,167,129,226,102,75,250,74,117,17,252,198,62,229,160,182,70,239,19,41,140,214,198,54,154,126,59,76,154,98,236,38,195,242,47,85,31,84,194,33,225,55,50,252,32,74,96,182,218,184,147,192,95,132,167,130,195,116,149,149,109,178,245,155,248,77,252,99,45,180,105,37,109,118,3,128,183,1,230,98,106,95,132,122,31,195,250,85,151,169,93,151,7,207,230,231,171,117,216,18,7,126,158,95,25,139,85,44,55,154,213,171,235,212,199,128,61,95,229,50,208,26,174,163,123,92,2,64,38,192,158,59,74,233,240,136,245,41,106,86,87,158,197,54,49,14,101,188,106,5,176,28,64,26,172,117,13,124,192,54,23,28,37,23,51,162,121,71,43,135,47,2,220,196,60,99,152,138,134,57,73,64,94,72,50,64,182,15,145,88,197,138,88,197,146,61,138,67,1,134,34,196,49,2,109,6,35,22,40,67,89,164, etc. fieldname imagefile [object Object] encoding 7bit mimetype image/jpeg Finished 200! The image seems to successfully get uploaded to Firebase Storage and it looks like it is the right size. However, when I try to view it in the Storage dashboard, it never loads. Why is this happening?
The issue is that firebase thinks that you have not signed the upload file. You should sign you upload and generate download token in a unique way. You send downloadToken as a property in metadata called firebaseStorageDownloadTokens. import { v4 as uuidv4 } from 'uuid' const uuid = uuidv4() const blobStream = fileUpload.createWriteStream({ metadata: { contentType: file.mimetype, metadata: { firebaseStorageDownloadTokens: uuid } } }) // then you link will be const url = format( `https://firebasestorage.googleapis.com/v0/b/${bucket.name}/o/${fileUpload.name}?token=${uuid}&alt=media` )