Let user upload an image into a database using JavaScript - javascript

I looked for this question, but I could not find it. Essentially, I have an html form and I want to let the user upload an image into a web database using JavaScript.
Is there a way to accomplish this?

Yes, use a file input element, or if you're using AJAX use FormData.
As an aside, typically once you get the file to the server, you only store the storage path in the db, the image itself is stored on disk; DB aren't particularly good at storing binary data.

Related

How to Store Image in SQLite Database in React Native

I have taken an image with Image Picker and want to store it in sqlite database and retrive it. Should I store uri which I got in reponse from Image Picker or what should I do,
Thanks!
My honest opinion is to use a dedicated storage space for your images, and store the url and the image meta data in your database.
You can store your image as a base64, however this will take up a lot of space in your database, and the conversion to base64 and back to binary may even make the image size bigger.
Stick to a storage solution for your image (Both Google and AWS offers them), and save the url in your database.
Regards
Stephan Bakkelund Valois
you have to save image in local storage and save uri of that in SQLite. that's way is the better performance .

Can we write to file from React?

Currently I'm developing a React web application that needs to store some data from user in the client side and also this data are Important and should not swap suddenly so we can't use Indexed DB.
I just thought about using a file to store data as JSON but in a file that can be stored in user computer and also access to read and write it from React.
The best way to work with that is using localStorage.
Cookies are mainly for reading server-side, and local storage can only be read by the client-side. Other point is saving data, a big technical difference is the size of data you can store, localStorage give you more space.
Check it out https://medium.com/#siobhanpmahoney/local-storage-in-a-react-single-page-application-34ba30fc977d
What you're looking for is the in-browser sessionStorage or localStorage. Having the ability a JSON file to a user's computer would be a major vulnerability and is not possible from a browser/client. I suppose you could create one and trigger a download for them to accept–and then have them subsequently re-upload it when you need the data again. But, I'd argue that session/localStorage is more what you're looking for.

Saving and retrieving data on server with Javascript & PHP

I have a form on my website that I want to ensure each client only submits once per year.
To do this, I would like to save the client's id # and the current year to a .txt file on my server when they submit the form.
When the form is submitted, I also need to check the current contents of that file to ensure their id has not already been recorded, and display a message if they have already submitted the form that year.
I believe I need to use PHP to do this, but I'm brand new to PHP and I'm also not very experienced with jQuery. Any assistance would be much appreciated!
Using a simple database would be much better, because it will be easier to retrieve the stored data later on. There are more than enough tutorials if youre not familiar with databases (use mysql database if you have few experience with databases).
If you use a database you can also store the submitted data from the form very easy.
As Dan already said, first learn PHP and database connects and querys and then jQuery (which you dont need for putting data from a form into a database, but with ajax its cooler (you dont even need jQuery for ajax, vanilla javascript can also do that for you) ;) ).
Just google everything, there are more than enough tutorials online.
If you don't want to use a database, probably the simplest option will be to rename the received file with clientId-currentYear when you put it on the server.
For example, when a user submits a file for client 12345, you will have to check if a file 12345-2018 already exist. If it doesn't exist, you can create it, if not, you send your message to the user.
This is going to be easier to manage than a text file or a database if your programming level is low.

Download a PDF from MongoDB using jade

I'm using Node, along with express, Jade and a MongoDB. So far I'm able to query the database and display the data in a webpage.
In the database I am storing PDFs and I would like to be able to download these from the webpage. I can currently get the pdf data in the form of a string (of random character) and display them on a webpage but I'd like to have a button where the user can download it as a pdf.
To insert the pdf into the db I the below python code to open it and pyMongo to insert it.
file = Binary(open(filePath, "rb").read(), 0)
Thanks in advance.
This has little to do with the technologies you mention, but how you handle data on the client. Essentially you will need to utilise frontend JavaScript, HTML and how the browsers handle those in conjunction with data. A pointer would be here https://stackoverflow.com/a/39515978/3580261

Angular: hide JSON data from user

My Angular application loads JSON files as search material using $http
$http.get('my.json').success(function(data){ ... };
Unfortunately, this method loads the JSON file in to the browser and allows the user to see it's content.
Screenshot from Safari
I'd like to hide that file from the user.
To refine my question. I know that I won't be able to totally hide that data from the user.
A user can easily write a script to scrape the data off my site.
I just don't want to hand those files to the user so easily, to just let them sit there for him to just copy and paste.
Everything you sent to client is anyhow visible by client. There is no way to absolutely hide it from him.
All you can do is .zip or encode data on server and unzip or decode it on client. But even in this case all decoding mechanisms will be available to user and if he wishes and has some skills, he can decode it and access all data you send him.
UPD:
Ok, you want to uglify your data so client couldn't see it simple way.
You need to somehow encode data on server, send it encoded to the client, and decode on client so you could use it.
Checkout lz-string - it's js library that can archive / unarchive json strings, converting them to binary format, so data becomes unreadable. And it's pretty fast (I haven't noticed any delays encoding/decoding 2Mb strings - I use it to compress data and store it in localStorage).
It's as easy as LZString.compress(JSON.stringify(data)) to compress json and JSON.parse(LZString.decompress(data)) to decompress.
Only thing you need in addition - to find a server-side library that uses exactly this format. If you use NodeJS at your server, you can take lz-string itself. Otherwise, quick googling gave me solution for php - I think it's pretty possible to find solutions for other languages..
If you want the user to see only parts of the document, you should filter it on the server.
Create some kind of service/Api-function/etc. which loads the document and pass it the user information via ajax request. Now filter it depending on this user information and return the filtered data.

Categories