I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!
Related
Using BIRT. Added Image in a Grid. Unable to put label and data fields over image in certain region. Please advise if you achieved it.
Thanks,
Yasar
I think all you can do is use the image as background-url. AFAIK this only works for images that actually come from an URL, but not for images that come from e.g. a database BLOB (but you might download the BLOB to a temporary file and use the file name as URL).
In vue-filepond, I can drag or select files and they process fine, but I want to be able to submit user entered data along with each image. For example, they may want to tag the image or enter a title, etc..
I can't find any documentation on how to do this?
You can use the file.setMetadata method (https://pqina.nl/filepond/docs/patterns/api/file/#methods) to add metadata to each file, each upload will contain a File object and a JSON object (the JSON object will contain the metadata).
I have an application that gets a JSON file via a web service. The JSON is fairly large, and represents a Person object, with typical properties such as first name, last name, title and image for example. The person's image is stored as a base64 field in the JSON. It is bound to an image tag using Angular. So for example, the HTML looks like this:
<img ng-src="data:image/jpeg;base64,{{ person.fileImage }}">
When the end user right clicks on the image and chooses to save the image, the browser defaults to the name "download.jpg". What I need to do is name the image so that when the user right clicks and chooses to save, it gives a meaningful filename, e.g.:
todd.davis.jpg
I'm not sure how to make this happen. I've seen some solutions that use an anchor tag with a download="todd.jpg" parameter, but that is not working for me. I think it expects an actual URL and in this case, I don't really have one. The image data is just embedded in the JSON.
Is there a way to manipulate this so that I can add a name to the image for saving purposes?
In angular2 using aberezkin/ng2-image-upload
I have in my template
<image-upload
[max]="1"
[url]="uploadUrl"
[preview]="true"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
(onFileUploadFinish)="imageUploaded($event)"
(onRemove)="imageRemoved($event)"
(isPending)="disableSendButton($event)"
></image-upload>
This is part of a larger form for an e-commerce site's product capture/edit screen including this image upload
It's all great for a new product and a new image but if I have to edit an existing product and thus have the data from the server for that product, including the image, how can I pre-populate image-upload with this image thus allowing a user to keep it or delete it/change it?
Also is there a way to filter file type allowed?
So you want to let user select the image and able to change it befor Uploading
I made a simple example of preview and uploading image I think it will be helpful for you
Preview and uploade image angular2
I'm new in this topic, so my apologies for this question :)
I need to create a page that must show all images uploaded in a post, one at time. When the user click next button, the it must load the next picture, replacing the first one.
< [ image1 ] >
Title
Description
other content
--> User clicks next
< [ image2 ] >
Title
Description
other content
However, in order to speed the image display load, the two following images need to be downloaded in hidden panels, so the images will be cached when user clicks next and load the next bundle of images.
If I use ajax to do this task, will the browser use the downloaded images or ajax will download them once again?
Is there a way to do this process more optimal?
Thank you very much!
You can download the next image's data to strings using ajax and convert it to a base64 string and embed it in the html (when the next button is clicked, using javascript) by changing the src atribute of your image to "data:image/png;base64,(base64stringhere)" replacing (base64stringhere) with the downloaded base64 string of an image
ref: http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/
ref: How can you encode a string to Base64 in JavaScript?
Note: most browsers cache images, so it will waste quite a bit of bandwidth if the users are viewing images they already have downloaded.