Ionic-cli: Ionic Resources not uploading

[kierandesmond]

Hi All,

Having trouble with ionic resources on the CLI:

the main error is:

× Uploading source images to prepare for transformations - failed!
Error: connect ETIMEDOUT 104.20.7.16:443
at Object.exports._errnoException (util.js:1018:11)
at exports._exceptionWithHostPort (util.js:1041:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

I've tried the following:

1) Downgrade npm from 5.5 to 4.4.3 and rerunning
2) Deleting files and running resources individually e.g. ionic cordova resources android --icon etc
3) Running splash-generator from NPM (there were imagemagick related backwards compatability issues)

This is my current config from running ionic info:

`
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v6.10.1
npm  : 4.4.3
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro`

Any help would be greatly appreciated. Its holding up a build release :/

[skotturi]

I've been seeing a similar issue for a week or so. in slack, Mike suggested to wait and see if it cleared up but im still unable to successfully run ionic cordova resources

$ ionic cordova resources
✔ Collecting resource configuration and source images - done!
✔ Filtering out image resources that do not need regeneration - done!
✖ Uploading source images to prepare for transformations - failed!
HTTP Error 400: POST https://res.ionic.io/api/v1/upload

{"Error":"unable to read uploaded image","Width":0,"Height":0,"Type":"png","Vector":false}

with:

$ ionic info

cli packages: (/Users/santekotturi/Developer/nhrc/rambo/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : ios 4.5.2
    Ionic Framework    : ionic-angular 3.4.2

System:

    ios-deploy : 1.9.2
    ios-sim    : 6.1.2
    Node       : v8.1.2
    npm        : 5.4.2
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : /usr/local/Cellar/android-sdk/25.2.3

Misc:

    backend : legacy

[mhartington]

This could be from an invalid image file. What ever tool you're using to export a PNG is not exporting a valid file for some reason.

[patrickhofer]

I still have this issue... i created a 1024x1024 PNG in Photoshop. I also tried to use the PNG from a blank app, but still get this issue. Any ideas? @mhartington

HTTP Error 400: POST https://res.ionic.io/api/v1/upload

{"Error":"unable to read uploaded image","Width":0,"Height":0,"Type":"png","Vector":false}

[tinomen]

+1
Seems like there are a number of posts regarding this through out the year with out any resolution. It appears to occur mostly when someone alters the png. I've used preview, sketch and affinity photo to alter the original file but they all result in getting the 400 error for an empty file.

[atake831]

Hey guys. My solution is tinypng.
https://tinypng.com/

icon: 700kb -> 80kb
splash 5.2mb -> 700kb

I guess that uploading image size is important.

[victorsosa]

@atake831 thanks it works

[cybernude]

@atake831 It work for me , Very Thank !!!

[alnahas86]

the problem is you to have make sure that the extension of image has PNG. Some time is not convert it to PNG for this reason will not works. use this web site to convert urs image http://www.simpleimageresizer.com/

[ravimallya]

@atake831 I also had the same issue. TinyPng helped me.

[williamse497]

Great it Works good with tinypng.com. I had the same problem on my Splash and Icon Image which was an image size problem but when i resized my splash and icon images with www.tinypng.com, i was able to solve the problem

[slyfalcon]

Thanks guys, 2 main points:

1. the size of image should be small than 1M
2. the suffix should be real png

[prasanna-hititsoft]

https://tinypng.com/
Solved my Problem
Icon from 140 Kb to 31 Kb
Splash from 2 Mb to 526 Kb

Thanks,
Prasanna

[zetsu01]

http://www.simpleimageresizer.com/ helped me

[Raziel422]

I had the same issue while using ionic cordova resources to generate custom resources (icon and splashscreen in my case).

The problem was that I was exporting in Photoshop the splashscreen at a 24bit depth (aka PNG-24 in Photoshop) so I had to change it to PNG-8.

Want to mention that I was using File -> Export -> Save for Web (legacy) and also the fact that the default icon has 32bit depth, but I used a 24bit depth icon and worked well.
So the last 8 bits for alpha are not causing any problem for icon.png rather if use 24 or 32.

[rodrigograca31]

For those still facing this issue use the above solution

This error occurs because when icon.png or splash.png are exported they are too big.

Even though the mentioned solution works, my personal solution is to open those images in GIMP (free!) and go to File --> Export as and when its about to export it asks for a compression level, choose the max. Or use Trimage image compressor if you are on Linux...

Also: this issue can probably be closed..... 2017.......

[jlautner]

None of these worked for me (tinypng, GIMP, windows Paint, Inkscape, changing to .psd or .ai filetypes, etc) , everything resulted in images that were still too large or too large to upload to be converted; I fixed it by first trying each one separately:
ionic cordova resource --icon
ionic cordova resource --splash
The ones that got the HTTP 400 error, I resized with the only service that I found that could handle the upload size and reduced them to a size the resource converter would accept: https://compress-or-die.com/png-process

[rodrigograca31]

@rengelking only shit, how big was your image?

[imhoffd]

Ionic CLI 5 ships with support for generating Cordova resources locally using the cordova-res utility, which completely replaces the existing code for generating resources remotely in ionic cordova resources.

Give it a try! Leave feedback/bug reports in either repo. Thanks!