I'm using Rails to create a website that allows users to upload document files with various file formats (pdf, doc, docx, ppt, pptx, xls, xlsx, png, jpg, jpeg) and store them on aws S3.
I'm using Carrierwave to directly upload files to S3, and everything works well so far. Uploaded files are nicely stored in S3.
But now, I want to display preview images (thumbnail images) for uploaded files. I've tried several different methods by manipulating Carrierwave configuration, but it seems like generating thumbnail images only works on PDF files, not other file formats. Can anyone please give me any insight to make this work? Thanks
Rather than generating thumbnails within the application, you could consider using systems that can generate thumbnails on-the-fly, such as:
Cloudinary
Imgix
This link might help you:
http://guides.railsgirls.com/thumbnails
I also found a tutorial that says you should be able to uncomment some code in the image_uploader file.
version :thumb do
process :resize_to_fill => [50, 50]
end
https://code.tutsplus.com/tutorials/rails-image-upload-using-carrierwave-in-a-rails-app--cms-25183
See if either of these solutions work.
As John wrote, for your images you can try generating thumbnails on the fly with a solution like Cloudinary's jQuery image upload library. This solution enables image uploading to the cloud. Uploaded images are stored safely in the cloud with secure backups and revision history, utilizing Amazon's S3 service.
Cloudinary's jQuery library also enables on the fly generation of thumbnails.
Here is a sample code that creates a 150x100 thumbnail of an uploaded image and updates an input field with the public ID of this image.
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {
$('.preview').html(
$.cloudinary.image(data.result.public_id,
{ format: data.result.format, version: data.result.version,
crop: 'fill', width: 150, height: 100 })
);
$('.image_public_id').val(data.result.public_id);
return true;
});
Here you can find some Ruby on Rails examples
Related
Situation
I'm trying to use my own images in the Tensorflow Style Transfer demo, but they're causing the following error message:
InvalidArgumentError: Unknown image file format. One of JPEG, PNG, GIF, BMP required. [Op:DecodeImage]
What I've tried
The error message says the file format must be a JPEG among other file types. When I check the file info, it says Kind: JPEG image, and the file extension is .jpg.
The image was shot on a Google Pixel 6 Pro, pulled directly from Google Photos, and then uploaded directly to my GCS Bucket. So I can't understand how there could be a problem with the file format, or what to check for to resolve this.
I've also tried several links to the same GCS object.
https://storage.cloud.google.com/01_bucket-02/PXL_20220315_232045529.PORTRAIT.jpg
gs://01_bucket-02/PXL_20220315_232045529.PORTRAIT.jpg
But I'm getting the same error message with both.
I'm able to view the images in a browser window, so my authentication should be ok.
Causing further confusion, I downloaded one of the wikimedia images used in the demo, then immediately uploaded it to my GCS bucket, and it caused the same error message. The Wikimedia file was .jpg, but when I downloaded it, the extension was .jpeg.
This is the original Wikimedia file I was testing:
https://upload.wikimedia.org/wikipedia/commons/d/d7/Green_Sea_Turtle_grazing_seagrass.jpg
Any clarification on what might be going on with this would be greatly appreciated.
Doug
I have a webform with and want to open it on smartphone - than take pictures of some documents which need to be merged in one PDF, and on the end this file need to be uploaded to server.
My solution is to use Google Drive to upload PDF (scan) to GDrive and then somehow download this file from gdrive to server via some sort of widget (any links appreciate) installed on website.
Maybe someone have a better idea?
I know its late but my answer might help others. I also face the same challenge and implemented a custom solution based on Javascript and Since you are using web form so this solution will perfectly fits on your need.
You have to use JSPdf javascript library, JSPdf provide you pdf object in your browser and you can upload it download it and there are many other thing to play with.
First you have to initialize JSPdf object as per your requirement. I am creating PDF with page size width:500px and height 500px.
pdf = new jsPDF("l", "pt", [500,500]);
Simply when you will take picture from camera you will have each picture in form of base64, that base64 format you have to insert in JSPdf object
pdf.addImage(imgData, 'JPEG', 0, 0);
you can repeat the above code to add pictures from camera as much as you want, at the back-end these images are compiling and creating pdf document where each page have each images in sequence.
Once you are done, you can get PDF object in form of base64 object using below code that you can upload to any server.
pdf.output('datauristring')
above is only pdf part, you can find complete working example including camera part here Javascript Component to Scan Document
I'm developing a simple web app and I just want to allow the user to upload some pictures.
should I just store the picture url on my database table or should I upload the whole picture?
how can I validate the size of the picture being uploaded?
how can I upload the picture from my controller?
thank you all!
I would NOT store the image data in the database. I would create a Behavior that will upload the image to the image directory and store a reference to that image. The behavior can then handle size, mime type, etc. Then add a file upload form to the controller and when the data goes to the model to be saved, it will automatically upload the image and put it where it goes.
If you do not want to build your own, here is a very popular behavior that someone has built.
https://github.com/jrbasso/MeioUpload
Or you could try this simple way of doing it (check the readme.md file) :
https://github.com/malikov/cakephp2.0-image-upload
I am uploading an image via Amazon SDK to S3. Those PNG images are optimized using ImageMagick ASP.NET library. The problem is that I can see them fine when optimized on my computer (testing locally), but when uploaded to S3, they are being heavily distorted. Do you know what can be the cause for this?
I am using ASP.net. I thought that the reason for that is that the image haven't been completely saved, but that no seems to be a good option because the file should have been locked and couldn't be streamed.
Here, take a look..
http://i1182.photobucket.com/albums/x448/dphotowriter/2011-09-07_002928.png
I did a test. When I upload the image directly to Amazon via AWS it is fine. The problem lies somewhere between saving the image and the moment it is streams. Maybe is asynchronous and the image hasn't finished to be written completely and then uploaded only part of it.
I tried to put:
System.Threading.Thread.Sleep(5000);
after the optimization to but it didn't help either. Maybe it something to do with the STREAM for that PNG files. I do the following:
1) Save the image to a temp.png file.
2) Read the file to an image object
3) convert the file to byte array
4) pass the byte array to the MemoryStream constructor
How to display PDF thumbnails in ASP page
There is no built in functionality for ASP to process and manipulate PDF files. You will need to install a custom component on your server, make sure your webhost allows this, or ask them for a list of installed objects as they often have ones that will do what you want.
A good free on is GFlax:
http://download.cnet.com/GFLAx/3000-10248_4-10327603.html
It will allow you to chop a PDF up into seperate JPEG files, and from there you can get the object to resize the JPEGs into different thumbnail sizes for your needs.
The GFlax documentation should get you started.
Have you looked at this? Mapsoft ThumbNails
you can use Ghost script sharp for displaying pdf thumbnail . Here is the code
GhostscriptWrapper.GeneratePageThumb(filepath, thumbnailPath, 1, 20, 20);