For my project, I had created a "question.jsp" & in that I had used fileupload control to upload image to Servlet. It works perfectly fine for New Entry but when I retrieve the data for update, I succeeded to show image somehow( I had used JSON & images are sent as Base64 string). Image displayed perfectly as background of DIV but now If I submit this data to Servlet it wont save that image because the image is not a part of Form Data.
Now my question is that, Is it possible to assign Base64 encode image to fileupload control? Or how I can send that Base64 encode images back to servlet? (In current scenario, it goes null because fileupload control is send null)
Please help me to provide proper solution for this.
Thanks in Advance
Anand...
Related
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!!
I am new to this area, I have added a number of images to gridfs. Now i want to display all these images on html page. I have retrieved the images from mongodb using the following code.
Query query = new Query(where("filename").is("file"));
List<GridFSDBFile> images = gridFsTemplate.find(query);
model.addAttribute("images",images");
It gives me all the images, now i have no idea how to display these images on html page. i am using velocity template.
#foreach($image in $images)
//code for image
#end
Outputting GridFSDBFile type of objects in velocity template does not make sense. You should rather output the URL to the iamge, like
#foreach($imageId in $imageIds)
<img src="getImageFromGridFs?id=$imageId">
#end
and then create a getImageFromGridFs Servlet (or relevant Server Side code) to fetch the corresponding image and stream it to the Servlet's OutputStream.
After fetching the image from GridFs, You can access the image data in the Servlet using GridFSDBFile.getInputStream()
Hope this helps.
Masters,
I have a scenario where i have a list of Items and on clicking single item it gets details along with image src url using ajax call.
I want to display(render) image right on page.
Now Image source URL is a FileActionResult returning Base64 string.
The problem is the page does not render image although it is having correct Src URL.
And I don't want any additional Ajax call.
Please Help.
Thanks in advance.
How are you forcing the image to be updated?
The DOM is going to keep the image the same until you tell it to refresh the image -- I would suggest using something like
document.getElementById('theImg').src="/newImg.gif?unique=someuniquestring";
where someuniquestring is a new random datetime or something (to make sure browsers like IE don't cache the GET request).
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.
I would like to send a lot of data through ajax request to my server which will generate pdf or jpg format according to that data.
Now i have done all that, my issue is to how output that generated pdf/jpg back to the user trough ajax? I guess i might be able to use json for that, but im not really sure how, and i think there would be a lot issues with pdf.
Also if some one gonna suggest using form with hidden inputs that will not work since i have really big multidimensional array with lot's of data and it would simply take to much effort to make it work.
By the way, i am using jquery, but anything else is acceptable as long as it does the job done without making me to rewrite half of my script.
To display a JPG
AJAX: You can return the data hex encoded (be sure to set the content type appropriately: header('Content-type: image/jpeg')). Then you just inject an <img/> element into the DOM and set it's src attribute to the returned Data URI.
HTML: Also, you could inject the <img/>'s with a normal src URL to some location on your server.
For PDF
It's a little more tricky. Some browsers display PDF's natively (Chrome/Firefox), others rely on optional third-party plugins. You can detect these plugins, but can't control whether the PDF is displayed in a window/frame or is downloaded.
If you choose to display, you can create a new window/tab to display it or display it in an iframe dynamically.