I am creating a personal blog using node js and mongo db and implementing the function of writing posts.
I thought that the title and description of the post could be saved in the mongo db in String format, but I am curious about how to save the elements such as the image of the textarea and the font size.
I used tinyMCE as a text editor to write the content and the code is as follows.
<form action="/articles" method = "POST">
<h4>title</h4>
<input required type="text" name = "title" / class='form-control'><br>
<h4>description</h4>
<textarea name="description" class = 'form-control'></textarea><br>
<h4>contents</h4>
<textarea id="mytextarea" name="contents" rows = '10'></textarea>
취소<button type = "submit" class="btn btn-primary">저장</button>
</form>
And an example of a post is as follows.
I am wondering how can I save the contents of a textarea containing a picture in a db.
You can refer to this question here.
However, in terms of scalability I do not recommend uploading pictures to mongoDB. It will take way too much space. What I would do is the following:
Create a bucket on AWS s3 or something similar.
Connect your nodes.js server to the newly created bucket using multer in combination with the aws-sdk. (good example here )
Once uploaded the bucket will create a link to the image.
Save the image link on mongoDB.
This way you only store the link, which makes the project a lot more scalable.
Related
I am trying to embed an image inside HTML which is generated by an azure function. when I run it in localhost I am able to see the image, but when I convert that to an azure function it throws a broken thumbnail image.iam using matplotlib to save the plot
plt.savefig(f'{basepath}/plot.png')
this will save it to a temporary path and then I am using it inside my HTML content
<div class="image">
<img src="""f'../{basepath}/plot.png'""">
</div>
on inspecting the page also iam able to see the correct path, though not the image
converting the image to a base encoded version
encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')
and calling that inside the HTML worked for me
<img src="""f'data:image/png;base64,{encoded}'""">
I´m looking for some help. I´m creating a gallery application using nodejs, mongoDB and handlebars template to show the gallery. Everything goes fine till I find all images in my mongoDB (stored as Binary Data) and try to render in my handlebar template. I'm trying this:
routes.js
router.get('/gallery', async (req, res) =>{
const pics = await Img.find();
console.log(pics); // No problems showing images as binary data and all fields in the Schema
res.render('images/gallery.hbs', {pics});
});
template.hbs
{{#each pics}}
<div class="row">
<img src='????'>
</div>
{{/each}}
where ???? is my big problem, I don't know what's the code to put there or if I'm using the right way.
Pls help. I'm newer on this
if you are storing binary you can be added to the src of course, but you should consider the metadata associated with the binary like this:
<img src="data:image/png;base64,...">
Note:
This is a bad practice by the way, and you should never save the images on the DB whatever the case, you can use external service like aws s3 and upload your images there and store their Uri instead, they're a lot of reasons for this the biggest one it gonna cost you a lot of money -_-
I am very much new to mechanize and in fact python too. I am trying to write script that auto fill ups form with my custom data and after a long search over web I landed to mechanize page and found something I was looking for.
I am able to retrieve the web page in which I need to auto fill the fields. But the web page that I retrieved is not in clean html format. It contains stuffs like \n like
\n<input type="text" name="jcaptcha" value="" id="appEntry_jcaptcha" style="width: 240px;"/></div> </div>\n </div>\n\n <div>\n <input type="hidden" name="statusType" value="NEWLICENSE" id="appEntry_statusType"/>\n <div align="center" id="wwctrl_confirmBox">
I got this from the code
import mechanize
br= mechanize.Browser()
dotm = 'http://example.com'
br.set_handle_robots(False)
br.open(dotm)
br.select_form(nr=0)
br['someField'] = ['value']
br['someField'] = ['someValue']
response = br.submit()
print(response.read())
I got this web page after doing br.submit() from some previous page. The actual form that I wanted to auto fill is actually on 'response'. So, how can I render the messy stuff containing \n to a clean HTML so that I can select input fields over there and auto fill with my custom data? It would be great if you showed some example of selecting fields over there and auto filling them.
I have a simple reactive form in angular 6 that it also has a file input to upload images.
The scenario is to submit the form, save the image and the text fields of the form and then update a photo gallery with the new image. For a photo gallery, I use the ng carousel.
This is the code in the front-end
<form [formGroup]="myForm" (ngSubmit)="submitForm($event.target)" >
<input type="file" (change)='imageChange($event)' formControlName="imageInput" name = 'imageInput'>
<input type="text" formControlName="imageName" name='imageName'>
<button type="submit" >Submit</button>
</form>
save it like
submitForm(form){
let formData = new FormData(form);
this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
event=>{
if(event.type === HttpEventType.Response){
eb = event.body;
this.addpic(eb.data);
}
});
}
eb.data contains data that came from the server, after successfully saving the form data, the id of the new image and its file name.
In addpic I try to add a new image in the carousel. Add all the new data to an array, so I can use the array later, to ngFor it and dynamically create the ng Carousel
addpic(data){
this.images.push({
'id': data.id,
'name': data.name
});
}
use it like so
<ngb-carousel #carousel *ngIf="images" >
<ng-template ngbSlide *ngFor="let im of images; let i = index" id="{{im.id}}">
<img src='../assets/images{{im.newName}}' >
</ng-template>
</ngb-carousel>
So this works fine, but the image is never rendered. I get no errors, I see all the data saved in my database, the image is transferred in the folder as it should, but no new image in the carousel, just a 404 error in the console. The images array is updated, but no image in the carousel. The URL is ok, all the other images with the same URL are rendered in the carousel. It's like the app had no time to see the whole update, so it cannot show the image.
I tried to grab the image file object from the form, save it in angular in a selectedFile: File; and use this in the carousel, but this has no path or anything similar. Grab it when it is set in the form
imageChange(e){
this.selectedFile = e.target.files[0];
}
and use it in addpic
addpic(data){
this.images.push({
'id': data.id,
'name': this.selectedFile.path
});
}
I also tried to use the formData before the form submission, t get the image, but the result is the same, an object with no path.
I also tried to "read" the file using HTML5 FileReader, but this is an image and in the carousel, I need to provide a URL for the src, not just the image file.
I also used formidable in the node to parse the form and take the path of the image, return it back in the front-end along with the id and the file name and use that as an src. But this won't be used by the browser for security reasons I guess, because it is a URL in the temp files.
I also tried to get all the images from the server with a query, but the new image is still not available, giving a 404 error, even though the image is in the folder and the database is updated.
like this
addpic(data){
this.getImages(this.currentId); //get all images again
this.images.push({
'id': this.images.id,
'name': this.images.path
});
}
I have to refresh the page for the image to show. I don't know how to fix this. Any ideas? Is it a security issue that I cannot get the image right away, even though it is saved and I have to refresh? I would like to avoid performing an extra get, if it is possible, to keep client-server communication minimum.
I use angular6 and node 8.11. in windows 10, all locally in my laptop.
Thanks
Might be issue related to updated variable refers to same reference. inside addPic(). add this line of code as last line.
this.images = this.images.slice();
Can anyone let me know what I'm doing wrong?
I saved a based 64 image on my MongoDB, part of capturing digital signature and storing it on MongoDB.
so the data stored looks like this.
data: '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAEsCAYAAABtx9BIA...
When I display the raw data on an image tag it works perfectly,
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAEsCAYAAABtx9BIA..."/>
But when i try to display it via ejs it does not work, example:
<img src=<%= data %>/>
Can anyone tell me what I'm doing wrong! Thanks a lot in advance!!!
I had to remove the quotes from the mongodb data it display it like this
<img src="<%= employee.data.replace(/"/g,"") %>">
if your data comes like this
src='"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAEsCAYAAABtx9BIA..."'
it wont work. probably when you pick your data it comes with the apostrophe ' '
try removing it. probably thats how ejs has outputted the data on the src tag
split the string at the comma, the data:image/png;base64, isn't actually part of the base64