I'm working on a Lambda function which fetches images from a Google drive and uploads it to S3 bucket.
The format of the data I'm working with is a Buffer and when I upload it to S3 bucket the size is 2.8mb. However I need to compress it to be under 2mb. I can't seem to find a suitable library which can handle this server side.
Any advice?
For compressing images and storing it, you may use Jimp which is an image processing library and provides all the facilities you're looking for.
For reference, you may go to this documentation
I have photos in a folder on google drive....The folder is shared to be used by anyone on the web .
I have a table in a static html page on my computer and i set the background of the cell using javascript as below
document.getElementById("ImageCell").style.backgroundImage=url("https://drive.google.com/uc?id=xxxx");
This works fine.
I have 20 photos per page and when i use window.print() it takes a while to load and the main issue is sometimes it does not render and i see memory usage up to 100%.
So looks like this is memory intensive.
My question is- is there any better method of implementation which will not be so slow.
I don't think Google Drive was ever meant to function as a CDN. Are there too many photos for you to just bundle them up with your site?
If so, look into dumping them into an S3 bucket on Amazon, and caching them with cloudfront.
I'm using fineupload S3 in an angular mobile web application to handle the capture and upload of images from the device camera.
I have a requirement to make sure that the captured images are not displayed in the device gallery and not stored on the device. (image and video)
The deleteFile function of fineupload doesn't appear to handle this task and it instead looks like its designed to delete the uploaded file from the server.
So i'm looking for a solution to either prevent the device from storing the captured images in the first place or to delete the files once they've been uploaded.
As far as I know the browser (either mobile or desktop) does not have the privileges to manipulate the file system. If your using cordova/phonegap you should try removing the photo with the file system API provided by them.
I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.
I'm building a site with lots of user uploaded images ( like an airbnb suppose)
Until now , the site would upload whatever image you submit to amazon s3 and then display accordingly. Sometimes these images are too heavy and increase page load time.
I want to resize this image to the resolution needed and compress when possible ( transform to jpeg) to enhance load time and reduce traffic.
I've found this can be done either by:
Creating an HTML canvas, make pertinent transformations in-browser and then upload.
Uploading the image to the server, then run some back-end tasks to reduce size and compress.
What are the benefits of each approach? which is the most common? what considerations should I have in each case?
My stack is currently node.js / angular. I don't intend to use a CDN for now as the project is in a dev phase
thanks in advance!
you need to install and add imagemin to your grunt task here is a link for you to get it going https://github.com/gruntjs/grunt-contrib-imagemin
Good luck.
for the record, the solution I've found the easiest was to load whatever image the user selected in a html5 canvas and convert it to jpeg, then upload the jpeg and in the backend I would resize it using a node imagemagick package.
By converting to jpeg in the frontend you minimize upload time while not losing performance and also normalize input format to the backend service.