Best approach to resize and upload images to server / cloud image processing services

Hi all,

I think this is a very common question and it would be good if there is a post on blog that cover image processing and upload!!! Thumbs up for my proposal :smile:

Iā€™m trying to figure out how to upload images to remote server.

  • I would like to optimize the upload time ( i can adjust the image
    quality via cordova camera settings, there is other options?)
  • I need various thumbnails, wich is the best method to do that? (can i use canvas?, other js lib?)
  • CDN, i can use the Amazon js sdk for upload images on S3, i have to try (Anyone test it?)
  • Cloud processing services, i found that there is a lot of cloud services like http://cloudimage.io or https://uploadcare.com/ or https://6px.io/ that provide either CND with data storage and image resize serives on the flyā€¦ anyone test one of those??

Thank you for your suggestions!

Tommaso

2 Likes

No one experienced with this??? :frowning:

Hi Tommaso,

The easiest way is to use Uploadcare widget directly. We have just implemented camera option (even did not announce it yet) and would be great if you try it out with Cordova:

https://uploadcare.com/widget/configure/

However, it interacts with camera directly, not via Cordova. Therefore, adjusting image quality would not work out of the box.

Otherwise image uploading and cropping, as well as generation of thumbnails of any sizes, works out of the box!

Let me know how it goes!

Best,

David
Co-founder of Uploadcare

Hi @david_uploadcare
i try all day to upload an image file to uploadcare but with no success i had altready request support via uploadcare website.
I try also your widget, with this conf

<input
  type="hidden"
  role="uploadcare-uploader"
  data-public-key="MY_PK"
  data-locale="en"
  data-tabs="all"
  data-images-only="true"
  data-path-value="false"
  data-preview-step="false"
  data-clearable="false"
  data-multiple="false"
  data-system-dialog="false"
  data-autostore="true"
  data-crop="disabled"
  /> 

On the iphone the source list doesnā€™t scroll and there isnā€™t a camera button for take a shot and upload directly

You might also want to consider Cloudinary. http://cloudinary.com/ Using it for an app. Really cool face detection, cropping, etc.

@kurtommy I know :slight_smile:

Weā€™ve understood your issue, and Alex is currently working to make a better explanation for you. So, give us some time, you will get a response from support email.

Thanks for helping us testing this new feature on ionic! We really appreciate it.

Warm regards,

David

Thank you @david_uploadcare , i really like your services and pricing before trying another one illā€™wait for your suggestions!

Thank you!

Thank you @Calendee if uploadcare doesnā€™t work for me iā€™ll try cloudinary.com ( i havenā€™t found javascript libary for direct browser upload )

Hi Calendee,

I know this is quite an old post, but I am trying to implement Cloudinary upload with an Ionic app, without any luck. If you can give me any pointers?

Actually, Iā€™ve got a solution for that. Not sure if itā€™s the ā€œbestā€ approach.

Kind of swamped. If I havenā€™t blogged about it in the next few days, buzz me.

Interesting thread. I had looked into this when designing my current Ionic app. Wish I had come across this thread last week! :slight_smile: There are some interesting cloud services mentioned here that I have never heard of before.

In the end, with my app, I went with just storing my photos on Amazon S3. It was by far the most cost effective option for us. I wrote a small Ruby (Sinatra) uplaoder handler (about 15 mines of code) and hosted that on a virtual server, and that little app takes care of the images my Ionic app POSTs to it and uploads to an S3 bucket and returns a handle. I think it costs me < $1 per month to store 100,000 images. Virtual server running cost is ~$5 per month.

Finally got to it:

http://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/

1 Like

Absolutely a good way to go. Hosting an S3 is certainly cheap and easy. However, thatā€™s one more server and process to manage. For me, I decided I was willingl to pay a little each month not to deal with the hassle.

Hey @Calendee, thanks for the tutorial (I added your blog on my Feedly last week BTW :smiley: ). But there is one huge, absolutely huge issue : how the hell are you dealing with security ?! As you describe it, unsigned uploads can be made pretty much from anywhere I want as long as I have the configs (which I have directly in your app). So anyone can store all their porn on your cloudinary or what ?

Also, it really bother me to be forced to add jquery, I avoided it all this time just to finally being forced to add it ? :frowning:

@JerryBels Yes, security is indeed an issue. Right now, anyone can indeed push their images up to my Cloudinary. At this time, Iā€™m not too concerned about it. However, I have plans to change this. I will have an audit in place that will delete any images that were not produced by my app. Yet another thing to deal withā€¦

Read my post again. I donā€™t include jQuery at all. I was also opposed to using it with the standard Cloudinary JS file; thatā€™s why I went with unsigned uploads.

Iā€™ll also point out that I may very well move away from Cloudinary in the long term. Iā€™m amazed at how many pictures my users are sending. So, costs are getting a bit more than I had anticipated. I believe I will likely use Cloudinary as intermediary and then migrate older images to Amazon S3. That way, I get the benefits of Cloudinary (resizing, CDN, etc) for images that are new and archiving for older images that arenā€™t likely to be viewed again.

I see. No jquery but no securityā€¦ Not sure if it worth it :smile:

Also anything you could do to check images will be a lot of work, that match I think the necessary work to resize themā€¦

@Calendee I successfully implemented signed uploads to Cloudinary without using jQuery ! Itā€™s not that hard, really. I will make a tutorial about it whenever I have a little free time (absolutely canā€™t now).

2 Likes

ā€¦and it looks like I will never have the time to do it properly so basically :

  • Take the code here : https://github.com/cloudinary/cloudinary_php/tree/master/src (I used PHP but any other supported language would work exactly the same) and upload it to your server in a cloudinary/lib folder for example

  • make a cloudinary_call.php file in cloudinary folder that contains at least (you can change anything you need but itā€™s a base ) :

    require ā€œlib/Cloudinary.phpā€;
    require ā€˜lib/Uploader.phpā€™;

    // Sets up Cloudinaryā€™s parameters and RBā€™s DB
    require ā€˜settings.phpā€™;

    // Do every needed server side checks to be sure this user has the permission to send this file. If itā€™s OK proceed to sign

    $options = array(ā€œtagsā€ => ($_POST[ā€˜tagā€™] ? $_POST[ā€˜tagā€™] : ā€œā€), ā€œhtmlā€ => array(ā€œmultipleā€ => true));
    $params = Cloudinary\Uploader::build_upload_params($options);
    $params = Cloudinary::sign_request($params, $options);

    echo json_encode($params);

-Create the settings,php file in cloudinary folder containing :

<?php
\Cloudinary::config(array(
    "cloud_name" => "yourname",
    "api_key" => "yourapikey",
    "api_secret" => "yourapisecret"
));

-After that you just have to call the URL of cloudinary_call.php like you would do for any restful resource :

$http({
    url: 'http://example.com/cloudinary/cloudinary_call.php',
    method: "POST",
    data: "tag=whatever"
}).
success(function(Data, status, headers, config) {
    //console.log("success", signData, status, headers, config);
}).
error(function(data, status, headers, config) {
    console.log("error", data, status, headers, config);
});

And youā€™re done. Their service is absolutely stunning, BTW, if you donā€™t know it give it a try !

Hey JerryBels,

Thanks a lot, this looks like it could be the way to go. If you get a chance could you elaborate on how to choose a local file on the device when calling $http.POST in Angular/Ionic?

Sorry a little new to all of thisā€¦ working through a college project :confused:

Thanks!

Iā€™m using a plugin. Take a look at camera plugin and capture plugin ! And use the fileTransfer plugin if you need it too. Good luck !