We Keep Coding

React Native: Retrieve image URL from firestore

This is a function that uploads an image to the firebase storage and then retrieves the URL using the 'getDownloadURL' function.
The uploading of images works fine but it fails to retrieve the URL as it is trying to access the URL while the image is still uploading.
Please solve this problem !!
const getGSTURI = async () => {
if (GSTLoading) {
return;
}
setGSTLoading(true);
const result = await DocumentPicker.getDocumentAsync({
copyToCacheDirectory: true,
});
console.warn(result);
setGSTName(result.name);
setGSTURI(result.uri);
setGSTLoading(false);
async function uploadGST(uri, name) {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.warn(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
const storageRef = ref(storage, `sellers/${sellerID}/${name}`);
uploadBytes(storageRef, blob).then(() => {
console.warn("GST Upload Successfull");
});
getDownloadURL(ref(storage, `sellers/${sellerID}/${name}`))
.then((url) => {
// `url` is the download URL for 'images ' stored in firestorage
console.log(url);
setGSTURL(url);
console.log(GSTURL);
})
.catch((error) => {
"Errors while downloading";
});
// We're done with the blob, close and release it
blob.close();
}
uploadGST(GSTURI, GSTName);
};

you have to wait for the uploadBytes function to complete before trying to retrieve the url
instead of
uploadBytes(storageRef, blob).then(() => {
console.warn("GST Upload Successfull");
});
you can use the await operator as below to wait for the task to complete
try {
await uploadBytes(storageRef, blob);
console.warn('GST Upload Successfull');
} catch (e) {
console.warn('GST Upload Failed', e);
}

Image cannot be uploaded to S3 due to base 64 encoding

I am trying to code a functionality in my website which allows users to update their profile picture. The S3 url updates in dynamoDB however the image does not get uploaded to S3 and I do not understand why.
I believe I have taken the necessary steps to decode the base 64 image in lambda. However it still does not upload the image to S3. Any suggestions will be helpful. The image I tried to upload is a png. In console response.message is "file_key and file URL updated" but file is not uploaded to S3.
Javascript:
function uploadImage() {
var response = "";
var jsonData = new Object();
jsonData.user_name = sessionStorage.getItem("user_name");
var file = document.getElementById("imageUploader").files[0];
if (!file) {
alert("No file selected")
throw new Error("No file selected.");
}
var reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = function () {
console.log(file)
jsonData.file = file.name;
jsonData.file_key = reader.result.split(',')[1];
console.log(reader.result)
console.log(jsonData.file_key)
// console.log(jsonData.file_key)
var request = new XMLHttpRequest();
request.open("PUT", "https://acdn3jddd.execute-api.us-east-1.amazonaws.com/user-profile-image", true);
request.onload = function () {
if (request.status === 200) {
response = JSON.parse(request.responseText);
console.log(response);
console.log(response.message);
if (response.message == "file_key and file URL updated") {
alert('Image uploaded successfully.');
} else {
alert('Error. Unable to upload image.');
}
} else {
console.error(`Request failed with status: ${request.status}`);
}
};
request.send(JSON.stringify(jsonData));
};
}
Lambda code:
case 'PUT /user-profile-image':
body = JSON.parse(event.body);
const fileKey = body.file_key;
const userName = body.user_name;
const s3Params = {
"Bucket": 'uploading-image-bucket',
"Key": body.file_key,
"Body": fileKey,
"ContentType": 'image/png'
};
s3.upload(s3Params, (err, data) => {
if (err) {
return callback(err);
}
// Get URL of the uploaded file
const fileUrl = `https://s3.amazonaws.com/${s3Params.Bucket}/${fileKey}`;
// Store URL in DynamoDB
const dynamoParams = {
TableName: 'hearty_eats_users',
Key: { "user_name": userName },
UpdateExpression: "set file_key = :file_key",
ExpressionAttributeValues: {
":file_key": fileUrl,
},
};
dynamo.update(dynamoParams, (err, result) => {
if (err) {
return callback(err);
}
return callback(null, { "message": "file_key and file URL updated" });
});
});

What is analog of URL.createObjectURL for Service Worker

With manifest v2, I used URL.createObjectURL in order to return file from background to content. How do this with manifest v3 and Service Worker? I know about XMLHttpRequest to fetch. But what analog URL.createObjectURL?
// background.js
function onContentMessage(message, sender, sendResponse) {
if (message.action == 'requestFileGET') {
requestFileGET(message.url, (url) => sendResponse(url));
}
return true;
}
function requestFileGET(url, callback) {
let request = new XMLHttpRequest();
request.responseType = 'blob';
request.onreadystatechange = function () {
if (request.readyState == 4) {
let url = URL.createObjectURL(request.response);
callback(url);
}
};
request.open('GET', url);
request.send();
}
// content.js
backgroundFileGET(urlCover, (cover) => {
let url = `${HANDLER_UPLOADPIC}?kind=${kind}&sign=${sign}`;
let formData = new FormData();
formData.append('file', cover);
requestFilePOST(url, formData, callback);
});
function backgroundFileGET(url, callback) {
backgroundRequest('requestFileGET', url, (backgroungdUrl) => {
requestFileGET(backgroungdUrl, (file) => callback(file));
});
}
function backgroundRequest(action, url, callback) {
chrome.runtime.sendMessage({ action: action, url: url }, (response) => callback(response));
}

My Solution Store the data with a ID and open a new tab with a page like download.html#ID
let videoId = '#' + new Date().valueOf();
self.DownloadedVideoData[videoId] = { data: data, filename:
filename, mimetype:mimetype, segment:segment, action:'download' };
chrome.tabs.create({ url: "video.html" + videoId, active: false });
Inside the Page register a function to onload and your downloading Code
chrome.runtime.sendMessage({
action: 'GetVideoDataByID',
VideoID: self.VideoID,
}, function (videoData) {
if (videoData.action == 'download') self.DownloadVideo(videoData);
);
self.DownloadVideo = function (request) {
let blob = new Blob(request.data, { type: request.mimetype }),
downloadId;
chrome.downloads.onChanged.addListener(function (dl) {
if (dl.id === downloadId && dl.state && dl.state.current ==
'complete') {
window.close();
}
});
chrome.downloads.download({
url: URL.createObjectURL(blob),
filename: request.filename
}, function (id) {
downloadId = id;
window.close();
});
}
Now you need only a Listener in your Backround Worker like that
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
switch (request.action) {
case 'GetVideoDataByID':
sendResponse(self.GetVideoDataByID(request.VideoID));
break;
default:
break;
}
}

GET request from browser works to download file to local but XMLHttpRequest Javascript script does not download file

I'm having trouble with XMLHttpRequest I think, when I navigate to localhost/dashboard/downloadfile?file-name=hw3.txt the file downloads locally but If I use the function checkDownload() to start an XMLHttpRequest the file does not get downloaded.
Here is my client code:
function checkDownload() {
const filename = "hw3.txt";
const xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open('GET', `/dashboard/downloadfile?file-name=${ filename }`);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
}
}
}
xhr.send();
}
And then here is my server code:
app.get('/dashboard/downloadfile', requiresLogin, (req, res) => {
const userid = req.user.id;
const filename = req.query['file-name'];
db.getFileKey([userid, filename], (keyres) => {
const params = {
Bucket: S3_BUCKET,
Key: keyres.rows[0].filekey,
};
res.setHeader('Content-disposition', `attachment; filename=${ filename }`);
res.setHeader('Content-type', `${ mime.getType(keyres.rows[0].filetype) }`);
s3.getObject(params, (awserr, awsres) => {
if(awserr) console.log(awserr);
else console.log(awsres);
}).createReadStream().pipe(res);
});
});

I got it working. Instead of trying to create a read stream from s3.getObject() I generated a signed url to the s3 object on the server and returned that to the client, then used an 'a' html element with element.href = signedRequest and used javascript to click that element. The new problem I'm running into is that I can't figure out a way to set the metadata for the s3 object when it is initially uploaded, I needed to manually change the metadata on an individual s3 object through the aws console so that it had the header Content-Disposition: attachment; filename=${ filename }.
changed client code:
function initDownload(filename) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/sign-s3-get-request?file-name=${ filename }`);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
startDownload(response.signedRequest, response.url);
}
}
}
xhr.send();
}
function startDownload(signedRequest, url) {
var link = document.createElement('a');
link.href = signedRequest;
link.setAttribute('download', 'download');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
changed server code:
app.get('/sign-s3-get-request', requiresLogin, (req, res) => {
const userid = req.user.id;
const filename = req.query['file-name'];
db.getFileKey([userid, filename], (keyres) => {
const s3Params = {
Bucket: S3_BUCKET,
Key: keyres.rows[0].filekey,
Expires: 60,
};
s3.getSignedUrl('getObject', s3Params, (err, data) => {
if (err) {
// eslint-disable-next-line
console.log(err);
res.end();
}
const returnData = {
signedRequest: data,
url: `https://${S3_BUCKET}.s3.amazonaws.com/${ keyres.rows[0].filekey }`,
};
res.write(JSON.stringify(returnData));
res.end();
});
});
});

You are getting a blob back from the server, so in order to download you need to do something when xhr.status === 200.
Something like this:
...
if(xhr.status === 200) {
var fileUrl = URL.createObjectURL(xhr.responseText)
window.location.replace(fileUrl)
}
...

To download having the URL you could use the attribute download of a tag:
<a download="something.txt" href="https://google.com">Download Google</a>
If you use xhr.responseType = "blob", you have to do somethig like:
function checkDownload() {
const filename = "hw3.txt";
const xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.onreadystatechange = () => {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
var reader = new FileReader();
reader.readAsArrayBuffer(xhr.response);
reader.addEventListener("loadend", function() {
var a = new Int8Array(reader.result);
console.log(JSON.stringify(a, null, ' '));
});
}
}
}
xhr.send();
}
checkDownload()
But that code doesn't download the file.

How to download any file from Byte Array in Cordova application?

I have a cordova - ionic application.
I want to download a file from webservice and the file may be any type(JPG,PDG,DOCX etc). I cannot download the file from direct URL. So the app is taking byte array of the file from Webservice.
Anybody know how to download the file in Mobile from the Byte Array. Please help me.

you can use the
cordova-plugin-file and the
cordova-plugin-file-opener2 plugin.
https://github.com/apache/cordova-plugin-file
https://github.com/pwlin/cordova-plugin-file-opener2
in function with the webservice your code should look like that:
var bytes = new Uint8Array(data.d);
app.writePDFToFile(fileName.split(fileName.split, bytes);
and here is teh function forcing the download:
writePDFToFile: function (fileName, data) {
try {
window.resolveLocalFileSystemURL(cordova.file.externalApplicationStorageDirectory, function (directoryEntry) {
directoryEntry.getFile(fileName, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function (e) {
//window.open(cordova.file.externalApplicationStorageDirectory + fileName, '_system', 'location=yes');
cordova.plugins.fileOpener2.open(cordova.file.externalApplicationStorageDirectory + fileName, 'application/pdf',
{
error: function (e) {
console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success: function () {
console.log('file opened successfully');
}
}
);
};
fileWriter.onerror = function (e) {
alert(e);
};
var blob = new Blob([data], { type: 'application/pdf' });
fileWriter.write(blob);
}, function onerror(e) {
alert(e);
});
}, function onerror(e) {
alert(e);
});
}, function onerror(e) {
alert(e);
});
} catch (e) {
alert(e);
}
},
Hope this will help!