Error while trying to get download URL from firebase-storage - javascript

I've been trying to get download URL for the an image in my firebase-storage but it keeps throwing an object-does-not-exist error. Any clue what the problem might be? I'm certain the directories match up and there is a profilePhoto.jpg file in the firebase-storage directory.
var storageRef = firebase.storage().ref() //root reference;
var usersRef = storageRef.child('users/');
var userPaths = []; //list of all users
usersRef.listAll()
.then(res => {
for (var i = 0; i < res.prefixes.length; i++) {
userPaths[i] = res.prefixes[i].location.path_;
}
var photoRef = storageRef.child(`${userPaths[0]}/profilePhoto.jpg`);
photoRef.getDownloadURL().then(url => {...});
});
This is the error:
FirebaseError: Firebase Storage: Object 'users/6TitxcYcENhRHXDy0Xatk4ODQKo2/profilePhoto.jpg' does not exist.

I'm with Doug here: I have never seen Firebase give that error message if the file actually exists, so it's more likely that something is wrong in the mapping.
If you can't spot it, maybe you can show a screenshot of the file in the Firebase console, or see if the file shows up when you request a list of files.

Related

How to use the fetchImage function from the face-api.js

I am currently playing around with a face recognition in JavaScript.
I am new in JavaScript and faced some problems and I hope you can help me out with this. In my project I use following API: https://justadudewhohacks.github.io/face-api.js/docs/index.html. The API is also correctly embedded in the project
My Project:
User upload a picture on a HTML page with input type:
<input class="chooseFile" type="file" id="preview">
Working: The project detect the faces in the uploaded picture
Not working: Project should recognize which person is on the uploaded picture
My Code so far (in script.js file) when I try to load my labeled images:
async function loadLabledImages() {
console.log("load labeled images");
let labels = ["BlackWidow", "CaptainAmerica", "CaptainMarvel",
"Hawkeye", "JimRhodes", "Thor", "TonyStark"];
return Promise.all(labels.map( async label => {
let descriptions = [];
for(let i = 1; i <= 2; i++) {
let filePath = `labeled_images/${label}/${i}.jpg`;
let imgAsBase64String = await imgToBase64(filePath);
let imgAsBlob = base64toBlob(imgAsBase64String, 'image/*');
let img = await faceapi.fetchImage(imgAsBlob);
let detections = await faceapi.detectSingleFace(img)
.withFaceLandmarks().withFaceDescriptor();
descriptions.push(detections.descriptor);
}
return new faceapi.LabledFaceDescriptors(label, descriptions);
}));
}
The labeled images are stored locally in the same directory.
The problem as far I know occurs on the faceapi.fetchImage(...) call.
When I run the HTML page with a Live Server I get following Error:
Failed to load resource: the server responded with a status of 404 (Not Found).
The network Header:
I also tried to store the folder labeled images on GitHub and to pass the link of the Github folder to the fetchImage function. I don't want the pictures to show on my HTML Page (just the uploaded picture).
Is there any solution how to use the fetchImage function with the locally stored images?

Using CSV node module in chrome extension

I am trying to make an extension for chrome and one of the needed functionality is to make it possible to save user's data locally (But I do plan to integrate Gdrive saving). I wanted to save user's data into CSV assuming that it would be easier but it turned out a disaster.
I have tried many different methods in order to make it possible but it seems like it's no use.
Here's part of the code that doesn't work:
var { parse } = require('csv-parse');
const fs = require("chrome-fs");
const records = [];
const csvFile = chrome.runtime.getURL("save_file.csv");
var parser = parse({ columns: true }, function(err, records) {
console.log(records);
});
fs.createReadStream(chrome.runtime.getURL("save_file.csv")).pipe(parser);
and here's an error that browser throws at me when I try to initialize this code:
Uncaught Error
at chrome.js:511:1
if (err.name === 'NotFoundError') {
var enoent = new Error()
511: enoent.code = 'ENOENT'
callback(enoent)

Upload File to Firebase Ddmin SDK (GCS) with https stream

When trying to upload a stream into a Google bucket I am getting Error: Not Found when using get method and Error: socket hang up after a few second delay when using the request method.
Everything with firebase seems to be initialized fine, and when I log the stream I see the data coming through, but what would be the best way to write a file to GCS using a remote URL?
const storage = firebase.storage()
const bucket = storage.bucket("bucket/path")
const file = bucket.file("filename.pdf")
const url =
"https://url/to/file/filename.pdf"
https.get(url, async (res) => {
console.log(res)
res.pipe(file.createWriteStream())
})
The cause of the issue was passing the folder path into the bucket name instead of the file name.
Bucket name is available in the storage console, and do not pass in a folder path.
Bucket name example:
gs://bucket.appspot.com
(remove the gs:// when passing it as a value)
const bucket = storage.bucket("bucketname")
const file = bucket.file("bucket/path/filename.pdf")

MS Graph API file replace SharePoint ReactJS 404 item not found or stream issue

I am trying to use the MS Graph API and ReactJS to download a file from SharePoint and then replace the file. I have managed the download part after using the #microsoft.graph.downloadUrl value. Here is the code that gets me the XML document from SharePoint.
export async function getDriveFileList(accessToken,siteId,driveId,fileName) {
const client = getAuthenticatedClient(accessToken);
//https://graph.microsoft.com/v1.0/sites/{site-id}/drives/{drive-id}/root:/{item-path}
const files = await client
.api('/sites/' + siteId + '/drives/' + driveId + '/root:/' + fileName)
.select('id,name,webUrl,content.downloadUrl')
.orderby('name')
.get();
//console.log(files['#microsoft.graph.downloadUrl']);
return files;
}
When attempting to upload the same file back up I get a 404 itemNotFounderror return. Because this user was able to get it to work I think I have the MS Graph API correct, although I am not sure I'm translating correctly to ReactJS syntax. Even though the error message says item not found I think MS Graph might actually be upset with how I'm sending the XML file back. The Microsoft documentation for updating an existing file state the contents of the file in a stream should be returned. Since I've loaded the XML file into the state I'm not entirely sure how to send it back. The closest match I found involved converting a PDF to a blob so I tried that.
export async function putDriveFile(accessToken,siteId,itemId,xmldoc) {
const client = getAuthenticatedClient(accessToken);
// /sites/{site-id}/drive/items/{item-id}/content
let url = '/sites/' + siteId + '/drive/items/' + itemId + '/content';
var convertedFile = null;
try{
convertedFile = new Blob(
[xmldoc],
{type: 'text/xml'});
}
catch(err) {
console.log(err);
}
const file = await client
.api(url)
.put(convertedFile);
console.log(file);
return file;
}
I'm pretty sure it's the way I'm sending the file back but the Graph API has some bugs so I can't entirely be sure. I was convinced I was getting the correct ID of the drive item but I've seen where the site ID syntax can be different with the Graph API so maybe it is the item ID.
The correct syntax for putting an (existing) file into a document library in SharePoint is actually PUT /sites/{site-id}/drive/items/{parent-id}:/{filename}:/content I also found this code below worked for taking the XML document and converting into a blob that could be uploaded
var xmlText = new XMLSerializer().serializeToString(this.state.xmlDoc);
var blob = new Blob([xmlText], { type: "text/xml"});
var file = new File([blob], this.props.location.state.fileName, {type: "text/xml",});
var graphReturn = await putDriveFile(accessToken, this.props.location.state.driveId, this.state.fileId,file);

Expected full URL but got a child path, use ref instead

This is related to this thread, but it's a new problem I encountered. I am trying to add an image to a table cell in HTML, and I'm using Firebase Storage in combination with Firebase Database for this. The idea is to get the image from a gs://xxxxxxxx path in the database and use it in the js, but I get this error in the console:
Firebase Storage: Invalid argument in refFromURL at index 0: Expected full URL but got a child path, use ref instead."
So it seems that the url_ul path is not working. If, for example, I introduce the 'gs://xxxxxxxx' instead of url_ul, it works like a charm. And if I read the value url_ul as a text, I get that path. However, it doesn't work if I have that variable in refFromURL('url_ul')
I have the following js code for this:
var rootRef = firebase.database().ref().child("Test");
var storage = firebase.storage();
rootRef.on("child_added", snap => {
var headline = snap.child("headline").val();
var url_ul = snap.child("imageUrl").val();
var storageRef = storage.refFromURL('url_ul').then(function(url) {
var test = url;
document.querySelector('img').src = test;
}).catch(function(error) {});
$("#table_body").append("<tr><td>" + headline + "</td><td><img src='test' alt='' border=3 height=100 width=100></td></tr>");});
where the database looks like this:
So there is a gs://xxxxx path, which, according to Firebase documentation, should work fine:
// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg')
Any idea what is wrong here?
To make things more clear:
This line works perfectly fine:
var storageRef = storage.refFromURL("gs://nameofapp.appspot.com/armonii_culturale.png").getDownloadURL().then(function(url) ...
But this one doesn't
var storageRef = storage.refFromURL("url_ul").getDownloadURL().then(function(url) ...
And it's strange because "url_ul" should contain the same value.

Categories