I am trying to develop a simple app.This app posts a multipart form data with image and some text field. I am picking the image using react-native-image-picker. My App works fine. But i noticed it is not clearing the images. That is why the size of my app is increasing. If i go to General>Iphone storage, i can see my app size increasing.
I have tried the following code to delete the image but it did not work.
import RNFetchBlob from 'react-native-fetch-blob';
RNFetchBlob.fs.unlink(imageuri)
.then(() => {
console.log('file deleted!');
});
I think RnFetchBlob needs the actual file path.The code of my upload function is given below.
upload() {
var new_state = this.state;
var image_array = this.state.imageArray;
var comment = this.state.main_comment;
var new_state = this.state;
new_state.loader_show = !new_state.loader_show;
this.setState(new_state);
navigator.geolocation.getCurrentPosition(position => {
var lat = parseFloat(position.coords.latitude);
var lon = parseFloat(position.coords.longitude);
var new_state = this.state;
new_state.lat = lat;
new_state.lon = lon;
});
var position = "position(" + this.state.lat + "," + this.state.lon + ")";
for (var i = 0; i < image_array.length; i++) {
var file_name = position + "-" + i;
const data = new FormData();
data.append("name", file_name);
data.append("comment", comment); // you can append anyone.
data.append("images", {
uri: image_array[i].uri,
type: "image/jpeg", // or photo.type
name: "testPhotoName"
});
fetch("#####", {
method: "post",
body: data
})
.then(res => {
alert("Successfully uploaded from " + position);
************************* Here I want to Delete the file *******
RNFetchBlob.fs.unlink(image_array[i].uri).then(() => {
console.log("file deleted!");
});
****************************************************************
})
.catch(err => {
// ...
alert(err);
});
}
Please be informed that i store the image uri in my state. I dont have the Local file path.I want to delete the image using the uri after the upload is done.
I solved my problem. The below code worked for me.
var uri = images[i].uri;
var path = uri.split("///").pop();
RNFetchBlob.fs
.unlink(path)
.then(() => {
alert("File deleted");
})
.catch(err => {
alert(err);
});
Related
I'm new to async and await, I have a simple web app with firebase which gets files through input fields and upload them to the firebase via a button click but when I click button it does,t wait for async function to uload the files at first click. But when I click second time the files uploaded and I got the expected output. How can I solve this?
Here are my codes
Upload Function
async function uploadImages() {
var storageRef = firebase.storage().ref();
var uploadImages = document.getElementsByName("fupload").forEach((element) => {
var imageRef = storageRef.child(
"projects/" + projectName + "/" + (element as HTMLInputElement).files[0].name
);
let file = (element as HTMLInputElement).files[0];
imageRef.put(file).then((snapshot) => {
snapshot.ref.getDownloadURL().then(function (downloadURL) {
paragraphUrl.push(downloadURL);
});
});
});
if (document.getElementsByName("fupload").length == paragraphUrl.length) {
return paragraphUrl;
} else {
return 1;
}
}
Button click function
async function upload(){
await uploadImages().then((data) => {
if (data != 1) {
paragraphData = paragraphData.map(
function (x, i) {
return {
Title: x.Title,
Paragraph: x.Paragraph,
Image: data[i],
};
}.bind(this)
);
console.log(paragraphData);
//dispatch("paragraphData",{data})
} else {
console.log("d");
}
});
}
Thank you all I fixed the problem I'll add my code below.
Upload function
async function uploadImages() {
var storageRef = firebase.storage().ref();
for (const file of document.getElementsByName("fupload")) {
// let test = (file as HTMLInputElement).files[0].name;
// console.log(test);
var imageRef = storageRef.child(
"projects/" + projectName + "/" + (file as HTMLInputElement).files[0].name
);
let test = (file as HTMLInputElement).files[0].name;
let testFile = (file as HTMLInputElement).files[0];
await imageRef.put(testFile).then((snapshot) => {
snapshot.ref.getDownloadURL().then(function (downloadURL) {
paragraphUrl.push(downloadURL);
});
});
}
return paragraphUrl;
}
Button Click function
async function submitParagraphData() {
paragraphTitles = [];
paragraphs = [];
var e = document.getElementsByName("ParagrphTitle").forEach((element) => {
paragraphTitles.push((element as HTMLInputElement).value);
});
var f = document.getElementsByName("Paragraph").forEach((element) => {
paragraphs.push((element as HTMLInputElement).value);
});
let paragraphData = paragraphTitles.map(
function (x, i) {
return { Title: x, Paragraph: paragraphs[i] };
}.bind(this)
);
await uploadImages().then((data) => {
console.log(data);
});
}
The problem I had was when I click the button it displayed an empty array because file upload takes some time but when I click second time it displays the expected output because file was uploaded. So I added await to the line
imageRef.put(testFile) ............
So it fixed my problem.Thank you all for the support.
I need to GET all the data of a workbook, and I tried one method, but it does not work properly.. The problem is that the Promise is returning the first line of the first worksheet, but it does not continue the process for the rest of the rows of the worksheet, respectively, all the worksheets and I don't know what to do. Maybe you know..
So I wrote this code:
const SheetGet = {
getSheet: (req, res) => {
return new Promise ((resolve, reject) => {
XlsxPopulate.fromFileAsync(filePath)
.then(workbook => {
const wb = xlsx.readFile(filePath, {cellDates: true});
const sheetNames = wb.SheetNames;
sheetNames.forEach(function (element){
let endOfData = false;
let i = 2;
let dataArr = [];
while (endOfData === false){
let taskId = workbook.sheet(element).cell("A" + i.toString()).value();
if (taskId !== undefined){
res.send({
type: 'GET',
list_name: element,
task_id: taskId,
task_name: workbook.sheet(element).cell("B" + i.toString()).value(),
task_description: workbook.sheet(element).cell("C" + i.toString()).value(),
task_due_date: workbook.sheet(element).cell("D" + i.toString()).value(),
task_priority: workbook.sheet(element).cell("E" + i.toString()).value(),
task_status: workbook.sheet(element).cell("F" + i.toString()).value(),
task_notes: workbook.sheet(element).cell("G" + i.toString()).value()
});
i++;
}
else {
endOfData = true;
}
}
})
});
})
}
}
It only gets this an then it stops, and I need to get all of the data from the worksheet.
Do you have any idea on how to resolve this issue? Or the proper way to make it work? Thank you very very much for your time and help!!! Much appreciated every help!!
P.S. I tried this code with "console.log", and it works very well, but the problem is when I changed to res.send, in order to get the info to Postman.
I assume you are using express as the framework, the problem is when you use res.send method, the server already send the data to client, while the rest of the code still running in the background. What I'm gonna do with this case are like this.
const SheetGet = {
getSheet: (req, res) => {
return new Promise ((resolve, reject) => {
XlsxPopulate.fromFileAsync(filePath)
.then(workbook => {
const wb = xlsx.readFile(filePath, {cellDates: true});
const sheetNames = wb.SheetNames;
sheetNames.forEach(function (element){
let endOfData = false;
let i = 2;
let dataArr = [];
while (endOfData === false){
let taskId = workbook.sheet(element).cell("A" + i.toString()).value();
if (taskId !== undefined){
dataArr.push({ // this one
type: 'GET',
list_name: element,
task_id: taskId,
task_name: workbook.sheet(element).cell("B" + i.toString()).value(),
task_description: workbook.sheet(element).cell("C" + i.toString()).value(),
task_due_date: workbook.sheet(element).cell("D" + i.toString()).value(),
task_priority: workbook.sheet(element).cell("E" + i.toString()).value(),
task_status: workbook.sheet(element).cell("F" + i.toString()).value(),
task_notes: workbook.sheet(element).cell("G" + i.toString()).value()
});
i++;
}
else {
endOfData = true;
}
}
})
return res.json({ data: dataArr }); // this one
});
})
}
}
While there is some unnecessary code, the least change you can do to make it works are the code above.
Cheers.
I'm trying to build a weather app in nodejs with dark-sky API. I got a separate js file and keep my forecast info in a callback function. However, I also want to use Skycons for visualization.
this is my forecast.js. in that script I get info like temperature etc. so I need to get "icon" data as well
const request = require('request')
const getWeather = (latitude, longitude, callback) => {
const url = 'https://api.darksky.net/forecast/b0854aec02e1655c7203e05c7d77dfd1/' + latitude + ',' + longitude + '/?units=si'
request({
url: url,
json: true
}, (error, {
body /* "response " evezine response object icindeki "body" birbasa daxil edirem function-a*/
}) => {
if (error) {
callback('Unable to connect to weather service!', undefined)
} else if (body.error) {
callback('Unable to find location'.undefined)
} else {
callback(undefined,
'It is currently ' + body.currently.temperature + '°C out in ' + body.timezone + '. Weather ' + body.daily.data[0].summary + ' There is a ' + (body.currently.precipProbability * 100) + '% chance of rain.'
)
}
})
}
module.exports = getWeather
This is the fetch function, and I tried to invoke and activate Skycons in this function. but I cannot get "icon" data from API.
const weatherForm = document.querySelector("form");
const search = document.querySelector("input");
const messageOne = document.querySelector("#message-1");
const messageTwo = document.querySelector("#message-2");
const skycons = new Skycons({
color: '#222'
})
skycons.set('icon', 'clear-day');
skycons.play();
const icon = data.forecast.icon;
weatherForm.addEventListener("submit", e => {
e.preventDefault();
const location = search.value;
messageOne.textContent = "Please wait....";
messageTwo.textContent = "";
fetch(
"http://localhost:4000/weather?address=" + encodeURIComponent(location)
).then(response => {
response.json().then(data => {
if (data.error) {
messageOne.textContent = data.error;
} else {
messageOne.textContent = data.location;
messageTwo.textContent = data.forecast;
}
currentSkycons(icon, document.getElementById('icon'));
});
});
messageOne.textContent;
messageTwo.textContent;
});
function currentSkycons(icon, iconID) {
const currentIcon = icon.replace(/-/g, "_").toUppercase();
skycons.play();
return skycons.set(iconID, Skycons[currentIcon]);
}
but to use Skycons, I need to get "icon" from the dark-sky API. how I can get this data aside from my forecast js? To get and assign that data to a variable and use in another function
It looks like the data object is only accessible in the response json, which means you would need to access forcast.icon when you have the response.
I have had this issue start to appear with the device file name being created in this format:
.../DCIM/Camera/IMG_20170819_155509.jpg
But the media file data when using Cordova captureImage being returned as:
.../DCIM/Camera/1503140105277.jpg
Therefore being unable to return the image.
Here is the code:
$('body').off('click', '#add-image-inspect-attr-list').on('click', '#add-image-inspect-attr-list', function(event) {
var options = { limit: 1 };
navigator.device.capture.captureImage(inspectAttrPictureSuccess, inspectPictureError, options);
$(this).off();
});
function inspectAttrPictureSuccess(imageData) {
console.log(imageData);
var countOfImg = $('.image-display-inspect-attr-list').children().length;
var file = {
ContentType: "image/jpeg",
base64: imageData,
Data: imageData,
ID: countOfImg
};
var fileName = file.base64;
inspectShowAttrFile(fileName,0);
}
function inspectShowAttrFile(fileName, type) {
var countOfImg = $('.image-display-inspect-list').children().length;
$('.image-display-inspect-list').append('<img id="inspect-img-index-' + countOfImg + '" class="img-responsive img-thumbnail img-inspect" src="' + fileName[0].fullPath + '">');
}
The app is built with cordova 6.3.1 and the device has andriod 4.4.2
This works on some devices but not others
To get around this issue, I had to check what the last file added was to the image file location. Get the folder path, get the latest file added, then update the image data created by the captureImage function with the new file name and location data:
function inspectAttrPictureSuccess(imageData) {
var deviceImageFolder = imageData[0].localURL.replace(imageData[0].name, '');
window.resolveLocalFileSystemURL(deviceImageFolder, function (dirEntry) {
var directoryReader = dirEntry.createReader();
directoryReader.readEntries(successfile, failfile);
}, function (err) {
var errToSave = err.message;
});
function successfile(entries) {
var latestimage = entries[entries.length - 1];
imageData[0].fullPath = latestimage.fullPath
imageData[0].localURL = latestimage.nativeURL
imageData[0].name = latestimage.name
var countOfImg = $('.image-display-inspect-attr-list').children().length;
var file = {
Filename: "inspect-attr-img-" + Math.random().toString(36).substring(2, 15) + ".jpg",
ContentType: "image/jpeg",
base64: imageData,
Data: imageData,
ID: countOfImg
};
inspectImageAttrFileSendAry.push(file);
inspectImageFileSendALLAry.push(file);
console.log(inspectImageAttrFileSendAry);
console.log(inspectImageFileSendALLAry);
var fileName = file.base64;
inspectShowAttrFile(fileName, 0);
}
function failfile(error) {
console.log("Failed to list directory contents: ", error);
}
}
I'm wondering how to upload file onto Firebase's storage via URL instead of input (for example). I'm scrapping images from a website and retrieving their URLS. I want to pass those URLS through a foreach statement and upload them to Firebase's storage. Right now, I have the firebase upload-via-input working with this code:
var auth = firebase.auth();
var storageRef = firebase.storage().ref();
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var file = evt.target.files[0];
var metadata = {
'contentType': file.type
};
// Push to child path.
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);
// Listen for errors and completion of the upload.
// [START oncomplete]
uploadTask.on('state_changed', null, function(error) {
// [START onfailure]
console.error('Upload failed:', error);
// [END onfailure]
}, function() {
console.log('Uploaded',uploadTask.snapshot.totalBytes,'bytes.');
console.log(uploadTask.snapshot.metadata);
var url = uploadTask.snapshot.metadata.downloadURLs[0];
console.log('File available at', url);
// [START_EXCLUDE]
document.getElementById('linkbox').innerHTML = 'Click For File';}
Question what do I replace
var file = evt.target.files[0];
with to make it work with external URL instead of a manual upload process?
var file = "http://i.imgur.com/eECefMJ.jpg"; doesn't work!
There's no need to use Firebase Storage if all you're doing is saving a url path. Firebase Storage is for physical files, while the Firebase Realtime Database could be used for structured data.
Example . once you get the image url from the external site this is all you will need :
var externalImageUrl = 'https://foo.com/images/image.png';
then you would store this in your json structured database:
databaseReference.child('whatever').set(externalImageUrl);
OR
If you want to actually download the physical images straight from external site to storage then this will require making an http request and receiving a blob response or probably may require a server side language ..
Javascript Solution : How to save a file from a url with javascript
PHP Solution : Saving image from PHP URL
This answer is similar to #HalesEnchanted's answer but with less code. In this case it's done with a Cloud Function but I assume the same can be done from the front end. Notice too how createWriteStream() has an options parameter similar to bucket.upload().
const fetch = require("node-fetch");
const bucket = admin.storage().bucket('my-bucket');
const file = bucket.file('path/to/image.jpg');
fetch('https://example.com/image.jpg').then((res: any) => {
const contentType = res.headers.get('content-type');
const writeStream = file.createWriteStream({
metadata: {
contentType,
metadata: {
myValue: 123
}
}
});
res.body.pipe(writeStream);
});
Javascript solution to this using fetch command.
var remoteimageurl = "https://example.com/images/photo.jpg"
var filename = "images/photo.jpg"
fetch(remoteimageurl).then(res => {
return res.blob();
}).then(blob => {
//uploading blob to firebase storage
firebase.storage().ref().child(filename).put(blob).then(function(snapshot) {
return snapshot.ref.getDownloadURL()
}).then(url => {
console.log("Firebase storage image uploaded : ", url);
})
}).catch(error => {
console.error(error);
});
Hopefully this helps somebody else :)
// Download a file form a url.
function saveFile(url) {
// Get file name from url.
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", transferComplete);
xhr.addEventListener("error", transferFailed);
xhr.addEventListener("abort", transferCanceled);
xhr.responseType = 'blob';
xhr.onload = function() {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
a.download = filename; // Set the file name.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
if (this.status === 200) {
// `blob` response
console.log(this.response);
var reader = new FileReader();
reader.onload = function(e) {
var auth = firebase.auth();
var storageRef = firebase.storage().ref();
var metadata = {
'contentType': 'image/jpeg'
};
var file = e.target.result;
var base64result = reader.result.split(',')[1];
var blob = b64toBlob(base64result);
console.log(blob);
var uploadTask = storageRef.child('images/' + filename).put(blob, metadata);
uploadTask.on('state_changed', null, function(error) {
// [START onfailure]
console.error('Upload failed:', error);
// [END onfailure]
}, function() {
console.log('Uploaded',uploadTask.snapshot.totalBytes,'bytes.');
console.log(uploadTask.snapshot.metadata);
var download = uploadTask.snapshot.metadata.downloadURLs[0];
console.log('File available at', download);
// [START_EXCLUDE]
document.getElementById('linkbox').innerHTML = 'Click For File';
// [END_EXCLUDE]
});
// `data-uri`
};
reader.readAsDataURL(this.response);
};
};
xhr.open('GET', url);
xhr.send();
}
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
function transferComplete(evt) {
window.onload = function() {
// Sign the user in anonymously since accessing Storage requires the user to be authorized.
auth.signInAnonymously().then(function(user) {
console.log('Anonymous Sign In Success', user);
document.getElementById('file').disabled = false;
}).catch(function(error) {
console.error('Anonymous Sign In Error', error);
});
}
}
function transferFailed(evt) {
console.log("An error occurred while transferring the file.");
}
function transferCanceled(evt) {
console.log("The transfer has been canceled by the user.");
}