I have a profile to keep data from the user, and he can edit when he want. To keep the session, I pass some info from the user in localStorage, because in this project we don't use a library like redux, and one of these fields is "picture" to represent the photo in user's profile.
The problem consists when I try to "save" the image in the localStorage, when I upload the input and save it, it's ok, the picture saves in the database, and in localStorage that link (where the picture is hosted in the db) is correct, but if I try to edit some other field, like "name" for example and I click to apply the changes, the picture should be the same that I save previously, but the result is a file object and the url is not found in the database. It's like that object file replace that field in the localStorage.
Here I detach some lines of the code to guide me a little.
When I have a succesfull login, I saved the picture from data supplied from the api. PictureURL concat the url from the api with the picture URL that I received from the call.
------------
localStorage.setItem("picture", pictureURL);
------------
In my profile component, I have a state that initially load all the data from the localStorage, picture included. This state I'll use later to send the user to the api
const [userState, setUserState] = useState({
--------------------------------
picture: localStorage.getItem("picture"),
------------------
});
Then in my component, I have an input to upload the new image that I want to change
<Input
type={"file"}
size={"sm"}
mt={"10%"}
ml={25}
accept="image/*"
onChange={imageChange}
></Input>
imageChange is a function that consists in read the file, with FileReader, store the result in another state call imgData (that functionality is to show a preview of that image), and then set the picture in the main state userState that I mentioned before
const imageChange = (e) => {
const reader = new FileReader();
reader.addEventListener("load", () => {
setImgData(reader.result);
});
reader.readAsDataURL(e.target.files[0]);
setUserState({ ...userState, picture: e.target.files[0] });
};
And finally, I have a handler to pass all the data from the userState to a formData and send to the api, and when it's all ok, set the localStorage fields with the new data
---------------------------
localStorage.setItem("picture", userState.picture);
---------------------------
Sorry if it's too long, but I don't know where I have the error, maybe when I manage the picture at the beginning, or it's a problem in the backend, but idk! I have 3 days with this problem and I can't see what's going on.
First of all, thanks a lot for the help. All the critics to become more "clean" and to grow up are welcome :)
Related
Basically, I would like to create some optimistic response loader for the images while they are uploading to render the optimistic images and the loader.
So I have this idea: I use Apollo optimistic response to add a base64 image into the cache to render it while the image is uploading but I also want to add a field for this image type like: imageLoading and I could use it in my UI to show some loader, etc. and remove this loader after the real image will be uploaded.
I know the only way to create a custom field in apollo cache: Field policy -> read functin
But the main problem is: how to let the apollo cache know when I should set the imageLoading field as true or false?
Probably it's possible to use the reactiveVar for this imageLoading marker and later in the Field Policy -> read function I should somehow get this value and based on its return true/false for this cache field.
So far I know I could get this value directly from the reactive var in the read function of the field policy by this way:
const cache = new InMemoryCache({
typePolicies: {
Image: {
fields: {
name: {
imageLoading (name) {
const loading = reactiveVarIsLoading();
return loading;
}
}
},
},
},
});
But I'm not sure if it's the correct way to get the reactive var value directly in the cache.
So I'm wondering what is the best way to achieve that or if I'm moving in the totally wrong direction to achieve my goal?
Thanks for any help!
I have a bulk amount of data in CSV format. I am able to upload that data with python by converting them to the dictionary (dict) with loop. the whole data is getting uploaded.
but now I want to upload bulk data to firebase and images to storage and I want to link between each document and image because i am working on e-commerce react app. so that I can retrieve documents along with images.
which is a good way to do this? should I do this with javascript or python?
I uploaded data manually to firebase by importing from there but again I am unable to upload bulk images to storage and also unable to create references between them. please give me a source where I can find this solution
This is tough, because it's hard to fully understand how exactly your images and CSV's are linked, but generally if you need to link something to items stored in Firebase, you can get a link either manually (go into storage, click and item, and the 'Name' Field on the right hand side is a link), or you can get it when you upload it. So for example, I have my images stored in firebase, and a postgres database with a table storing the locations. In my API (Express), when I post the image to blob storage, I create the URL of the item, and post that as an entry in my table, as well as setting it to be the blobs name. I'll put the code here, but obviously it's a completely different architecture to your problem, so i'll try and highlight the important bits (it's also JS, not Python, sorry!):
const uploadFile = async () => {
var filename = "" + v4.v4() + ".png"; //uses the uuid library to create a unique value
const options = {
destination: filename,
resumable: true,
validation: "crc32c",
metadata: {
metadata: {
firebaseStorageDownloadTokens: v4.v4(),
},
},
};
storage
.bucket(bucketName)
.upload(localFilename, options, function (err, file) {});
pg.connect(connectionString, function (err, client, done) {
client.query(
`INSERT INTO table (image_location) VALUES ('${filename}')`, //inserts the filename we set earlier into the postgres table
function (err, result) {
done();
if (err) return console.error(err);
console.log(result.rows.length);
}
);
});
console.log(`${filename} uploaded to ${bucketName}.`);
};
Once you have a reference between the two like this, you can just get the one in the table first, then use that to pull in the other one using the location you have stored.
Hello !
Context
I created products using a form where I ask the admin to give obligatorily: a name, a price ... an image
This is what the form looks like :
I only save the name of the image in my database under the "PRO_URL" column
I manage very well to retrieve my image on my home page showing all the available products.
The admin also has the option to modify a product, to do this, I use the same form as to create a product.
I manage to recover in my fields thanks to "value" the values of the product EXCEPT the image.
Again this is what the form looks like with the data in it :
The file input is still empty.
To send the product information to my form, I send it via a React-router Link containing in the URL the id of the product to be modified.
And I get it all like this :
useEffect(() => {
if (id) {
getProduitById(id).then(response => {
if (response.data){
setProduit({
nom: response.data.nom,
prix: response.data.prix,
description: response.data.description,
imageurl: response.data.imageurl,
qtestock: response.data.qtestock,
marqueId: response.data.marqueId,
})
}
}).catch(err => console.log(err));
}
}, [])
Each product image is stored in my project under public, UUID renames them to be unique :
I read that the input element of type file is uncontrolled so that the site cannot take the image on our computer.
As I save the image there must be a way so that I can use the url or name of my image for my modified product
If you want the image to render on frontend without getting response from backend you can do it like this
URL.createObjectURL(e.target.files[0])
Otherwise if your want to render image from response you need to first generate URL of your image. You can do this by using any cloud service where you upload you file at backend and then get that URL i.e CLOUDINARY, our you can use MULTER to save file in you project directory and generate URL or try other npm packages.
I've got a simple axios GET request that is working with Azure directline 3.0. The GET request pulls back data and shows it in the console (as seen in the picture).
The data I want to save into a variable is the conversationId. I then want to use this variable with Axios Post in another JS file to post as part of the link e.g. let URL = "https://directline.botframework.com/v3/directline/conversations/"+convID"/activities". With convID being the variable I wish to create. Right now I am manually changing the convID with the new conversation ID, but I want to create a variable so I can place it in the post javascript file so it is automatic.enter image description here
There are various ways you can solve this problem. Easiest one being, exposing the data on a shared object window.convID = convID and then accessing it wherever required.
You could also look to make singleton objects, which can be instantiated only once and hence will share it's variables across the lifespan of the application.
axios.get(/* URL */).then(res => {
window.convID = res.data.conversationId;
});
You can save that variable value in LocalStorage. Something like this:
let routeToYourApi = '/api/conversations'; // or something like this...
axios.get(routeToYourApi).then((response) => {
let conversationId = response.data.conversationId; // not sure if data object from your image is directly nested inside response that you get from server, but you get the idea...
window.localStorage.setItem("convId", conversationId);
}) // here you can fetch your conversation id
Than you can access it anywhere in your app:
let conversationId = window.localStorage.getItem("convId");
... and eventually remove it from local storage:
window.localStorage.removeItem("convId")
Hope this will help you!
I'm am developing a mobile application with cordova. The applications needs in some point to be off-line which means that it has to have data in an internal database.
The data consists on a bunch of fields some of them are links to files. For example:
var restaurant = {
name: 'Restaurant X'
address: 'So far'
logo: http://www.restaurantX.com/logo.png
image: pics/restaurant-x.jpg
}
When the user decides to be off-line we should extract all the relevant information from the database (This point is cleared) and download all the related images (This is where I am stuck). At this point I thought in two options the first one is download all the files to the mobile as files or as data in the database, however, the project chief said that It was mandatory that images were saved as blob on the database.
I've been looking for a function to convert the content of the file into a byte Array for saving it into the database but I need a syncronous function since I have to wait for the pictures before of saving the row in the database.
function(tx, row){
var query = "INSERT INTO Restaurants (name, address, logo, image) values (?,?,?,?)";
var logo = null; // I need to fill it with the logo
var picture = null; // I need to fill it with the picture
tx.executeSql(query, [row["nombre"], row["address"],logo,picture], onSuccess, onError);
});
I'm sorry if the question is too basis, I'm practically new at JavaScript.
You should definitely take a look at promises, if your image serialization routine is async and you want to store it on serialize success. More detailed info about promises you can check here