Cant get firebase image URL from storage right after uploading - javascript

I'm using firebase storage for an app so that I can store images I want to be displayed in a popup window. Right now I can reference the image but I'm unable to get the URL for the image using getDownloadURL().
I've tried everything but can't seem to get the URL and only get errors in the console saying Error: Reference.push failed: the first argument contains undefined in property 'markers.imageURL.i'", AND " Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404)
Anyone know why?
Heres a snippet of my code. imageFURLY is what doesn't return the URL.
document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);
var task = storageRef.put(file);
console.log('storageRef ', storageRef)
imageFURL = storageRef;
console.log('imageFURL ', imageFURL);
//Upload file
imageFURLY = imageFURL.getDownloadURL();
console.log('imageFURLY ', imageFURLY);
//Variables that store data inputted in infowindow
var postName = document.getElementById('formName');
var postNameF = postName.value;
var postMessage = document.getElementById('formMessage');
var postMessageF = postMessage.value;
var postImageRef = imageFURLY;
console.log('postImageRef - URL: ', postImageRef);
var latitude = location.lat(location);
var longitude = location.lng(location);
//Closes markers open infowindow
largeInfowindow.close(map, marker);
//Sets markers infowindow to NEW content
console.log('Setting infowindow content!! ');
largeInfowindow.setContent('<div>' + '<div>Name: ' + postNameF + '</div><br>' + '<div>Message: ' + postMessageF + '</div><br>' + '<div>Image: ' + '</div>' + '<img style="height: 100px; width: 100px;" src="' + postImageRef + '" alt="Mountain View">' + '<br>' + '</div>');
console.log('Set infowindow content!! ');
largeInfowindow.open(map, marker);
// Make sure the marker property is cleared if the infowindow is closed.
largeInfowindow.addListener('closeclick', function () {
largeInfowindow.marker = null;
});

I'm willing to bet you're trying to get the URL of something that doesn't exist yet.
document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);
All fine so far
var task = storageRef.put(file);
That's deferred. task is a promise.
console.log('storageRef ', storageRef)
imageFURL = storageRef;
console.log('imageFURL ', imageFURL);
//Upload file
imageFURLY = imageFURL.getDownloadURL();
put hasn't been executed yet, but you're calling getDownloadURL(). Therefore, it's not there yet! And you get a 404.
Here's how you fix it:
document.getElementById('infowindowSubmit').addEventListener('click', function (event, imageFURL) {
// This function saves the newly created marker and the infowindow information when
//the 'Submit' button is clicked.
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
//Create storage ref
var storageRef = firebase.storage().ref('markerpics/' + file.name);
var task = storageRef.put(file);
task.then(function(snapshot) {
console.log('storageRef ', storageRef)
imageFURL = storageRef;
console.log('imageFURL ', imageFURL);
//Upload file
imageFURLY = imageFURL.getDownloadURL();
// ...
});

let file = await bucket.upload(fromFilePath, {destination: toFilePath});
const trimUrl = file[0].metatata.mediaLink

Related

How do i access a filemaker script with javascript in Web Viewer using Apple Mapkit?

I have Filemaker 18 with a Web Viewer using Apple Maps. When I move a pin on the map I want to send the coordinates to a filemaker script that writes to 2 fields. The problem is I can not trigger the script. The database is hosted on a FM Server 18. I have tried these 3 approaches but I am not even able to run a simple "Hello" script. The database name is WEBMAP.fmp12 . Here is how I have tried to run the script. I get no response:
1)
var theURL = "fmp://$/" & Get ( FileName ) & "?script=Hello&param=" + lat +"|"+ long;
window.location = theURL;
2)
var theURL ="fmnet://ip_address_of_server/WEBMAP.fmp12?script=Hello&param=" + lat +"|"+ long;
window.location = theURL;
3)
var theURL = "window.location = "fmp://$/WEBMAP.fmp12?script=Hello&param=" + lat +"|"+ long;
window.location = theURL;
In fact I notice that when I have anything after showing a popup (then I want to run the script) the map is blank whatever I add like "alert("hello").
Here is my js file in Filemaker 18:
var message = document.getElementById("message");
var center = new mapkit.Coordinate(x,y); //
mapkit.init({
authorizationCallback: done => {
done(
"<<$$JWT.TOKEN>>"
);
}
}); //alert("<<$$JWT.TOKEN>>");
var map = new mapkit.Map("map", {
showsScale: mapkit.FeatureVisibility.Visible,
center: center
});
var marker = new mapkit.MarkerAnnotation(map.center, {
draggable: true,
selected: true,
title: "Dra meg og slipp!"
});
marker.addEventListener("drag-start", function(event) {
// No need to show "Drag me" message once user has dragged
// event.target.title = "";
// Hide message
message.style.display = "none";
});
marker.addEventListener("drag-end", function() {
// center map to marker when moved
map.setCenterAnimated(marker.coordinate);
// hide message after seconds
window.setTimeout(function () {
message.style.display = "none";
}, 3550);
// message to show after move
var lat = marker.coordinate.latitude;
var long = marker.coordinate.longitude;
var message = document.getElementById('message');
message.innerHTML = "<p>Vi har lagret posisjonen</p>Latitude: " + lat + " <br />Longitude: " + long;
message.style.display = "block";
//alert("Hello"); ** this alert works!! **
//var test = ‘Hello World!’; alert(test); ** this line gives me a blank map just adding a "var statement" **
var theURL = "fmp://$/" & Get ( FileName ) & "?script=Testaccess&param=" + lat +"|"+ long;
window.location = theURL;
// alert(theURL) here gives me blank map
}); // END drag-end
map.addAnnotation(marker);
var lat = marker.coordinate.latitude;
var long = marker.coordinate.longitude;
var borchbio = new mapkit.CoordinateRegion(
new mapkit.Coordinate(lat,long),
new mapkit.CoordinateSpan(0.002, 0.002)
);
map.region = mymap;
map.mapType = "hybrid";map.setCenterAnimated(new mapkit.Coordinate(x,y), true);
The solution was to set "fmurlscript" rights. Thanks to #michael.hor257k and more detailed help from #paul_tuckey at the Claris Community. His answer here.
File-->Manage-->Security-->Advanced Settings-->Extended Privileges,
Select fmurlscript
Click Edit,
Add the Privilege set that is aligned to your Account Name to the selected fmurlscript
With this code I am able to run a FM script from javascript. Here is the code that triggers the script. Notice that when my database is "WEBMAP.fmp12" I only use "WEBMAP" as the name. I am sending the lat and long to the script that does stuff with it (converts it and writes to the post). The "fmp18://" targets specific version 18.
var theURL = "fmp18://$/WEBMAP?script=My_FM_Script_Name&param=" + lat +"|"+ long;
window.location = theURL;

Output SharePoint Document Library Files to CSV File Using JavaScript

I’m seeking how to output SharePoint Document Library Files to csv file. I found script that get me almost there, but I can’t figure out how to update the code to export the information to a csv file instead to the console.log() or to an alert(). Everything I tried breaks the code. I review other JavaScript concept that shows the how to add out to CSV but I again the script concept breaks the code I’m trying to modify. The script I am using. In addition, the script output the file names. I like to get help on how I can not only output the file name, but I like to output, modified date, created date, and the link to the file. I hope this is possible and I appreciate any help in achieving this concept. Script I'm using follows below.
jQuery(document).ready(function() {
var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
$.getScript(scriptbase + "SP.Runtime.js", function() {
$.getScript(scriptbase + "SP.js", function() {
$.getScript(scriptbase + "SP.DocumentManagement.js", createDocumentSet);
});
});
});
var docSetFiles;
function createDocumentSet() {
//Get the client context,web and library object.
clientContext = new SP.ClientContext.get_current();
oWeb = clientContext.get_web();
var oList = oWeb.get_lists().getByTitle("Fact Sheets & Agreements");
clientContext.load(oList);
//Get the root folder of the library
oLibraryFolder = oList.get_rootFolder();
var documentSetFolder = "sites/nbib/ep/Fact%20Sheets/";
//Get the document set files using CAML query
var camlQuery = SP.CamlQuery.createAllItemsQuery();
camlQuery.set_folderServerRelativeUrl(documentSetFolder);
docSetFiles = oList.getItems(camlQuery);
//Load the client context and execute the batch
clientContext.load(docSetFiles, 'Include(File)');
clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
}
function QuerySuccess() {
//Loop through the document set files and get the display name
var docSetFilesEnumerator = docSetFiles.getEnumerator();
while (docSetFilesEnumerator.moveNext()) {
var oDoc = docSetFilesEnumerator.get_current().get_file();
alert("Document Name : " + oDoc.get_name());
console.log("Document Name : " + oDoc.get_name());
}
}
function QueryFailure() {
console.log('Request failed - ' + args.get_message());
}
Sample test script in chrome.
function QuerySuccess() {
//Loop through the document set files and get the display name
var csv = 'Document Name\n';
var docSetFilesEnumerator = docSetFiles.getEnumerator();
while (docSetFilesEnumerator.moveNext()) {
var oDoc = docSetFilesEnumerator.get_current().get_file();
//alert("Document Name : " + oDoc.get_name());
//console.log("Document Name : " + oDoc.get_name());
csv += oDoc.get_name();//+',' if more cloumns
csv += "\n";
}
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'DocumentList.csv';
hiddenElement.click();
}

Unable to download dynamic image in ionic

hey i am creating a app in which dynamic images should be download from the net but some cant able to download kindly check the code below and give some suggestion to download and also tell how to pass dynamic image link in social share plugin in ngcordova .
$
scope.downloadImage = function() {
$http.get('http://sabkideal.com/phpapi_/cashback.php').success(function(response) {
$scope.data = response;
for (var i=0 ;i <response.length; i++)
{
var url = response[i].image;
var deal = response[i].id;
//url showing the same url every time i click and not jumping to next statement when click on send image download .
console.log(deal);
console.log(url);
var filename = url.split("/").pop ;
console.log(filename);
var targetPath = encodeURI(cordova.file.dataDirectory + fileName);
console.log(targetPath);
var options = {};
var trustHosts = true;
}
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(
function(result) {
alert('Download success');
refreshMedia.refresh(targetPath);
},
function(err) {
alert('Error: ' + JSON.stringify(err));
},
function(progress) {
// progressing download...
})
});
}

Issues with uploading image to webserver using phonegap

EDIT: Changed win() function and added am image corresponding to it's result.
I am having trouble uploading image to a webserver using phonegap.
This is the code that I have for the app:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "http://www.tayabsoomro.me/upload.php", win, fail, options);
}
function win(r){
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
alert(r.response);
}
function fail(error){
alert("An error occured while uploading image: " + error.code);
}
The code triggers win() function and shows the JSON data of the result when the image is captured so at least it doesn't fail().
And here's an image of what win() function alerts.
and this is what my upload.php looks like:
<?php
print_r($_FILES);
$new_image_name = "myimg.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$new_image_name);
?>
Ensure that you have all the appropriate (Read/Write) permissions set to your target folder uploads/ where you try to upload your files.
Hope this helps!.

php get video from file_get_contents('php://input')

I'm trying to upload a video with some other parameters via a shared web worker.
Here below I paste de code I'm using:
record.js
function sendVideo(name, path) {
var worker = new SharedWorker("js/upload.js");
worker.port.postMessage([path, name + '.webm', blob]);
// worker.port.start();
worker.port.onmessage = function(e) {
console.log('Message received from worker ' + e.data);
}
}
upload.js
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var path = e.data[0];
var fileName = e.data[1];
var video = e.data[2];
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost/channel/upload', true);
request.onload = function () {
port.postMessage(request.responseText);
};
request.send('fileName=' + fileName + '&video=' + video);
}
// port.start(); // not necessary since onmessage event handler is being used
}
channel.php
public function upload()
{
$data = file_get_contents('php://input');
// get the video from $data and move it
}
The problem is if my worker send:
request.send('fileName=' + fileName + '&video=' + video);
the content that my php code get is [blob data].
and if my worker send:
request.send('video=' + video);
the content that my php get is the video coded, full of special characters.
My question is how could I get the text and the video like if I had $_FILES in order to process it correctly.
Thanks in advice.

Categories