Is image or file being always downloaded from Google Cloud Storage on click? - node.js

Please help me to understand the following, I have a node.js app which I want to run on Google Cloud App Engine, this app will contain some images which are planned to be stored on Google Cloud Storage. On my sample app once I upload an image and get a url (mediaLink or selfLink) image is being downloaded.
Why is that? Each download each click costs money I understand google, but is there any way to make url just show images NOT to be downloaded?

Saving a file from Google Cloud Storage is the same as displaying it. Both action require transferring the content of the image to the device for display or saving.
The action of displaying an image or popping up a save as dialog is controlled by HTTP headers. For example if you have the HTTP header content-type set incorrectly (not as an image) then some browsers will save the file. If you want your image files to be displayed as images set the headers correctly for the type of picture. For PNG files set the header contenty-type: image/png.
You can also force a download with the content-disposition: attachment header.
In summary, it does not matter if you are displaying an image or saving it to local storage, it will cost you money. Both actions requiring downloading (transferring) the contents of the file across the Internet.

Related

How can I download an image from a webpage that creates a new image on each load

I sent a request for a website and on that website is a captcha image (the text ones) and I wanted to be able to download the image directly from the webpage. However, when I attempt to save the image (manually), a completely different one is downloaded instead. All the images share the same URL.
Url: https://www.unovarpg.com/library/captcha/captcha.php?.png
There are a few things that will give me the correct image, however:
Dragging and dropping the image directly to my file manager
going in the Sources tab in inspect element and saving from there (it downloads it as .php but changing the extension to .png works)
copying the image as data URI in Sources tab
copying the image request response in the Network tab

Insert protected image in Jodit

I'm using Jodit 3.18.9 with
ace 1.4.12
js-beautify 1.13.0
with uploader configs allowing to upload images separately from text into DB.
Once the image is uploaded, we use .insertImage(xxx) to add images into jodit editor. In this case, if we want to protect uploaded files, we may need to generate and attach a temp token to the url.
My question is, without doing some custom implementations (such as doing http requests for each image to get contents, and replace links with their base64 contents), is there some 'official' supports to do a get (image) query with jwt token or not ?
thanks a lot

How to force browser to download public asset from GCP Storage Bucket url?

I have assets from Wordpress being uploaded to GCP Storage bucket. But when I then list all these links to these assets within the website im working on, I would like the user to automatically download the file instead of viewing it in the browser when the user clicks on the link.
Is there an "easy" way to implement this behaviour?
The project is running with Wordpress as headless API, and Next.js frontend.
Thanks
You can change object metadata for your objects in Cloud Storage to force browsers to download files directly, instead of previewing them. You can do this through the available content-disposition property. Setting this property to attachment will allow you to directly download the content.
I quickly tested downloading public objects with and without this property and can confirm the behavior, downloads do happen directly. The documentation explains how to quickly change the metadata for existing objects in your bucket. While it is not directly mentioned, you can use wildcards to apply metadata changes to multiple objects at the same time. For example this command will apply the content-disposition property in all objects of the bucket:
gsutil setmeta -h "content-disposition:attachment" gs://BUCKET_NAME/**

S3 image link getting downloaded for some image links and viewed for some image links

I'm trying to select files from my system and uploading it in the AWS S3 Bucket. When trying to do so, the URL that is generated gets downloaded when clicked but when I upload it from the camera and not selecting it from the system, I'm getting the URL which can be viewed from the browser.
I got to know that the links are stored in virtual host style when uploaded from the camera and stored in path style when selected from the file system. How can I make the S3 URL's downloadable either way ?

What is the best flow to store an image in CDN

I have a website created using Node Express, this website serves functionality where user can upload an image and it will be stored locally in server folder and the path will be saved in database.
The problem is the images size is taking too much space on the server disk, so i need to use cdn as a storage for those images and to show the image to the user. The problem is i don't know what is the proper end-to-end flow to store this image to cdn.
The end-to-end flow means the customer upload the picture , the server save it, and can be used again when the user need to see it.
My thought is, when the user uploaded the image, then the server save it first locally, the image path, there will be cron running to store the image to CDN, at the end the image stored in the server will be deleted after success store the image to CDN.
Is that the correct way? or there are any other way to do this?
you can do something like this
store images on a cheap storage for long term like s3. this serve as source of truth.
configure cdn to use the s3 url or your server as source => you don't neeed to upload to cdn.
bonus: create an image resizer service to sit in front of the source and configure cdn to use the image resizer service as source. this way, it will reduce the load to your resizer service
In addition to the Tran answer, you can perform some optimizations.
For example, converting to WebP image format which can reduce the size.
Also, you can look at Image CDNs available which are optimized for images. Following article can be helpful for you
https://imagekit.io/blog/what-is-image-cdn-guide/

Resources