Storing base64 strings to GridFS(mongoDB file storage) - javascript

I'm trying to paste an image from the clipboard into an <img> tag. The source of this image is Prnt Scrn command and not a file. This clipboard image would be in base64 format. This base64 string can be inserted into src attribute of <img> tag(once ctrl-v is pressed) using javascript for display purposes. This is accomplishable by using this plugin.
So the <img> tag would be something like this:
<img id="screen_image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYAAAMACAI......(long string here)"
Although, I could persist this entire string into a mongoDB collection and retrieve it back for displaying that image, my ultimate goal is to persist this image into gridFS. Is there a way if I could interpret base64 as a file and persist it into gridFS?
I hope I've made it clear. Comments welcome.
UPDATE: I want to maintain a common collection to store images or any file for that matter(I'm already using gridFS to persist file attachments so I do not want to create a new collection to store clipboard images). I have also tried decoding the string using window.atob() but then I don't know how that could be persisted to gridFS

I'm using Mongo for my senior project right now and previously I was storing child (client is a local non profit like world vision) pictures with GridFS but recently I've moved to storing them in the actual child doc in base64. All of the images are around 3mb and base64 converts out to mostly 4-5mb. If you can store them as base64 it makes for a much simpler schema, I think.
I know you said you wanted to use GridFS, but I would only go that route if you have files over 16mb. For what I hope are obvious reasons it's much simpler to just store them as strings in docs.

Related

Upload a string as a text file to a server, js (node accepted too, I guess)

So, I have a firebase storage server, and I wish to store the path to every uploaded file inside a text file, for future reference. So, every time I upload a file, I will read my paths text file from the server, then add the latest path/string to it, then re-upload it. The only thing being is that I don't think we can upload a String to firebase just like that. How do I convert the modified string back into a file? Upon that, I do not know how to read data from the downloaded text file to, so any help would be highly appreciated.
Thanks!

how to get data from a base64 encoding of a .pptx file in javascript

I get data from a server of the .pptx file in base64 encoding now i would like to get the text that is present inside the base64 data.
Is there any third party java script library to do this especially scanning in base64 code rather than taking the file path and i would like insert these strings into a power point using office js.
Client side would be preferred.
thanks
Seems that what you need is a JavaScript decoder for base64 files, there are many projects in Github Doing this, for instance here is one https://github.com/mathiasbynens/base64.
That said, I am not sure about your scenario, and what types of files are been base64-encoded. Base64 at the end of the day is a text "representation" of usually a binary file, like an image or a compressed zip file. I wonder if once you decode it you will get what you expect. And if you are expecting text, i wonder why your service is even encoding it like this.
Anyways... once you have whatever text you want to insert, you can use the setSelectedDataAsync method of our Office.js in PPT to write it in your presentation's active selection. https://dev.office.com/reference/add-ins/shared/document.setselecteddataasync

Store image in localstorage **without** converting to Base64 and referencing in HTML as path?

Question..
Is it possible to store an image in localstorage (or any browser based storage mechanism) without converting it to Base64 and referencing this image in HTML as path (not as inline data)?
The reason..
I am working with a WYSIWYG editor that can display Base64 images (in it's contenteditable div).
It works.. But it degrades performance a bunch. The data string inlined in the HTML img src chokes the WYSIWYG performance, whereas an img tag with a path string as src would not cause this issue.
For reasons I won't get into, I have the requirement to store the images locally and only locally.
Other solutions?..
Localstorage AFAIK is limited to storing serialized data (strings) so my guess is this is a dead end. But perhaps there any other solutions?
Edit
I do not need to upload images to server. This app will be entirely offline.The app will store data (JSON and images) locally only.

Displaying images stored in MongoDb

I have an pinterest like application. Images and other related information are stored in MongoDb. Generally size of images is about 1 mb. Images are displaying with infinite scroll. When long script with base64 string is loaded, browser crashes or response time is really high (especially for Internet Explorer)
What is the best way to display images that are stored in MongoDb?
I think the best way to achieve this, is to have you file physically in some public folder on your server. This should be accesible in a way that you will only need to use something like
http://www.myhost.com/images/my/path/to/image.jpg
You can still maintain your Base64 image in mongodb as backup, however, this is not the best way to retrieve you images due performance issues (as you have seen). I recommend you to do the following:
Each time you store the image on mongo, be sure to also store the "image file" as itself on some public place on your server. Have in mind that you should keep the path to that file on the mongo model you are using. So, the next time you call the object, rather than get the base 64 image, you should only get the path to the image.
Lets say, you have this model
myModel = {
name: "some name",
image64: "someextralongstringveryveryveryweird......",
imageUrl: "/images/my/path/to/image/imagename-id.jpg"
}
the next time you query on it, you can just ignore the image64 using mongo projection, and in you client side you just use some html tag that makes use of that url.
<img src="/images/my/path/to/image/imagename-id.jpg">
This will help you lots on performance.
There are some libraries that could help you to manage the image file creation. ImageMagick is one that I have used and is so versatile.
I guess you have some server side part of this application? Why don't you create a tiny API to retrieve images?
So your browser will have information about image and can ask your server for it, something in line of http://your_server/api/image/imageID or http://your_server/images/imagename and then your server would just stream this image, you don't need to store this in the file system.
On the client side (browser) you just need to implement 'lazy loading'.
If you're using MongoDB, you should be storing images in your database using GridFS (http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/), a feature which exposes something like a virtual filesystem for your application.
Using GridFS, you could write a controller method which streams a requested file from your MongoDB instance and pipes the file content to the response.
I would recommend storing the images on the filesystem and using your web server to handle serving them to clients.
For performance, I would put them on a CDN - that will be able to handle the traffic.
In your application storage (mongo), you can store a URL/location to the image and then use that when retrieving the image in your javascript code.
In addition, in your code I would recommend preloading images via javascript that preloads images before the user has scrolled to see them. There are some great tools out there that you can leverage for that.
In the off chance that you cannot change the storage and you have to use mongo the way it is - I would look at preloading images with javascript.
I was having the same issue. So i used a mongodb to store my images.
This is how I proceeded:
Define a logo schema:
var logoSchema = new mongoose.Schema({
name: String,
url: String
});
Compile the logo schema into a model:
var Logo = mongoose.model("Logo", logoSchema)
Creating a new logo:
var rectblack = new Logo({
name:"rect&black",
url:"public/image.jpg"
});
Saving it :
rectblack.save(function(err, logo){
if(err){
console.log("some went wrong")
} else {
console.log("logo saved")
console.log("logo")
}
});
Now to use this logo or image I just called it with the image tag (just the file name!!!):
<img src="/image.jpg">.

How to handle blob data in Electron?

I'm using Github's Electron, which builds native desktop applications in HTML/JS. I need to handle some blob data from the clipboard, but there are only methods to read text, HTML, images (JPG and PNG) and RTF data. (http://electron.atom.io/docs/v0.37.3/api/clipboard/)
I don't mind not being able to handle blob data in any specific way, I just need to be able to store it in a local database and then reload it into the clipboard. I assumed I could do this using readText and writeText but I'm not sure that's possible. When copying a PSD file and printing that out using writeText, for example, I get 0 bytes.
I see blob data as being anything other than the formats listed above. So things like: .psd, .doc, .img, .bin, or anything with binary data that cannot be read in plain text.
How can I read, store and put this data back into the clipboard?
In your scenario, I suggest using Electron File object API and store file path in clipboard for later usage.

Categories

Resources