How do I handle users uploading webp images? - node.js

So, I have a simple uploader that lets users upload images and then view them somewhere. Now the issue is that many users have started uploading webp images (they just download images from certain sites visited via a supported browser like Chrome and are served webp images) and then when they try to view those in browsers like Safari, they don't show up.
What I'd like to do is have some sort of processing step that would let me convert the webp to jpeg or png before uploading it to S3.
Or would it be better to discourage webp uploads?
This link amply describes what I'm facing: http://www.cnet.com/news/facebook-tries-googles-webp-image-format-users-squawk/
Note: My server runs node with express.

Related

How to stream images as video with NodeJs

I'm generating images in a nodejs app (I have them in memory as Buffer objects).
I create them (a couple of images per second) and when the image is created I send it to the client via WebSockets. In the browser I render the image with the IMG tag
This works, although not very fast. So to improve the performance I was wondering if there is a way using Nodejs to convert these images into a video stream (I guess this is more efficient) so I can simply use the VIDEO element in the browser? Any suggestions would be appreciated?

Is image or file being always downloaded from Google Cloud Storage on click?

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.

Episerver Thumbnails for jpegs are getting a 404

In Episerver 11, the thumbnails for jpegs are broken. In the media library, they display as broken images:
And I see this in the browser tools:
Failed to load resource: the server responded with a status of 404 ()
On the actual url
https://mysite.mydomain.com/episerver/CMS/Content/siteassets/heros/myimage.jpg,,26/Thumbnail?epieditmode=False?1527614597161
On an actual web page and in the Image editor, they display fine. Not entirely sure how the thumbnail system works.
Make sure your thumbnails are saved as png's.
I had the same problem, due to a third-party library for image resizing.
It turns out Episerver (CMS version 9.12), always wants to save the thumbnail for an image in a png format.
Run the scheduled job "Clear Thumbnail Properties" in admin
From the documentation
You can clear generated thumbnail images in the Products list and
Media list views and add them again with the Clear Thumbnail
Properties job. Run this job manually if you experience problems with
refreshing thumbnails, such as on the website and BLOB-supported
content.

Bug with uploading using youtube API?

I'm uploading videos using youtube API v3.
All was Ok until I copied and renamed my video file via node js:
fs.createReadStream(old_path).pipe(fs.createWriteStream(new_path));
After it, after uploading, in my video manager page (https://www.youtube.com/my_video) I have error: "Upload failed: can't process file". But in my app i recieved video ID in response. I've uploaded that file several times with the same result. But luckily I have original (not renamed) file in my backup, and I uploaded it successfully.
By the way, when I tried to upload the renamed file manually (through the browser), it was successful.
p.s. When I use
fs.writeFileSync(new_path, fs.readFileSync(old_path));
for copying and rename files, uploading also was successful.
I tried to do it with a bunch of files, with same results.
Here is the reference post 1 and reference post 2 from YouTube help forum where the user has encountered the same issue.
The same issue was cited in the SO post as well.
Where the recommendation are the same as what I have given.
It's possible there's issues with the video file on the conversion
side of things.
Another reason maybe is the file format.
Currently the supported formats are listed below:
.MOV
.MPEG4
MP4
.AVI
.WMV
.MPEGPS
.FLV
3GPP
WebM
Try to check Recommended upload encoding settings for your videos on youtube as well.

Uploading user images to s3 and generating thumbnails from node

I'm currently considering developing a Meteor node.js app, but am struggling with how best to handle uploading of user images. In particular, I want to create a photography website that will allow the photographer to upload images in an 'admin' section, and these images will then be displayed on the website. I need to create a thumbnail of these images, and save the respective URLs to the database. I'm struggling with how to best accomplish this in meteor.
Is my best bet to use something like s3 combined with an AWS process for generating thumbnails?
Or should I save and host the images directly in the Meteor/node session?
Or should I scrap Meteor and use something like Express.js for this project?
Why don't you just use something like Filepicker.io to handle uploading and hosting images and simply store the image unique url (given to you by filepicker in the callback)?
Thumbnails can also be dynamically generated by Filepicker (using simple url modifications).
Cloudinary is a nicer alternative to filepicker when it comes to images, but integration process will be messier.
I would store the images on the filesystem, not in a database. If you have a unique id, you can use that as part of the url, for example an id of the item the image belongs to. Might look like this:
./uploads/img-<id>-<size>.jpg
You can write to disk and resize if necessary with node-imagemagick and your cdn should just poll these images from time to time. Not exactly sure how that part would work in terms of including the url to the image in the html.

Resources