How to Program Your Own Upload Img

Two decades agone websites had such a simple usage menstruation. Web servers returned complete HTML pages and each user action required that a new HTML page be reloaded from the server. After on Ajax joined the game allowing dynamic updating of specific spider web page fragments via unproblematic Javascript requests to the server. Google's wide-spread use of Ajax with Gmail was simply listen blowing at the time. Today'south product requirements wouldn't settle even for that.

Modern web and mobile applications demand interactive real-time experience. When a friend sends y'all an email in Gmail or a message with WhatsApp, you lot want these to pop upwards immediately, whether you're watching it on the relevant website or mobile awarding. When you lot browse through your Facebook news-feed, you want to run across new Similar events, new comments and new posts by your friends immediately as they happen, without waiting and without hitting 'refresh'.

If you are spider web developers, you are probably aware of the complexity of trying to implement existent-time push button notifications yourselves. Modernistic web frameworks and platforms let you lot to easily build rich and dynamic web applications, just unremarkably don't include easy to use, scalable solutions for real-time interaction of web visitors and mobile app users. Therefore, if you haven't done and so already, you should try out PubNub.

PubNub is a very powerful yet easy to apply deject service for existent-time applications and push button notifications. With a few lines of code you can extend your web and mobile apps with a fast, highly scalable solution for real-time notifications.

Cloudinary is a deject-based, end-to-end media direction solution that automates and streamlines your entire media nugget workflow, from upload to transformation to commitment via multiple CDNs.

PubNub allows sending real-time messages to a channel that multiple users can subscribe to. Cloudinary's image uploading tin be performed straight from a visitor's browser or mobile awarding. Aforementioned goes for PubNub'due south letters subscription.

Combining both cloud services, you can hands build a loftier-end, real-fourth dimension photo sharing awarding.

The flow is quite straightforward – use Cloudinary to allow your users to upload as many images as they want to the cloud and and so send a message through PubNub to notify all other relevant users about these newly uploaded images.

Recipients tin can ask Cloudinary to generate a scaled-downwardly, cropped version of the original image to match their specific device and get that image delivered efficiently for best viewing experience.

All this can be done without any complex coding, circuitous deployment setup or CPU load on your side. You can focus on your core application while Cloudinary and PubNub take care of all your media handling and communication channels.

The following frame shows a alive demo of a basic photo-sharing spider web app built using Cloudinary and PubNub. Endeavour it out! Upload an paradigm to Cloudinary directly from the browser, select a uncomplicated graphical consequence to apply on it and share the photo using a PubNub message with all other users that currently view this folio. See this in activity by opening two desktop browsers or mobile devices simultaneously. All viewers subscribe to a single PubNub channel directly from the browser and brandish dynamic thumbnails and full size images, as they are beingness uploaded past all the other viewers.

A robust, highly scalable, highly bachelor, feature rich existent-time photo sharing website or awarding, with only a few lines of code. Cool, right?

How does information technology piece of work?

We used a thin Ruby server (Sinatra) for this demonstration. In addition to Ruby, Cloudinary and PubNub also offering integration libraries for PHP, Blood-red on Rails, Python & Django, .Net, Node.js, iOS, Android and others.

1. First we embedded a file input field in the folio. This field includes a signature generated on the server side for authorizing secure uploading to Cloudinary from the browser using Cloudinary's jQuery plugin. The following Ruby code embeds a signed input field. For more details see this postal service.

cl_image_upload_tag(:photo_id, :resource_type => :image,                     :transformation => incoming_transformation)        

The :transformation parameter in this example applies an incoming transformation before storing the image in the cloud. The specific incoming transformation we've used limits the epitome size and adds a watermark.

Here'due south the definition of the incoming transformation in this live demo:

incoming_transformation = [ { width: 1200, top: 1200, crop: 'limit'},                             { overlay: 'logos_watermark', width: 0.seven,                                flags: 'relative', opacity: 40, gravity: 'n', y: 20 } ]        

In addition, custom styles for the input field and drag area also as the uploading progress bar are implemented using CSS and jQuery (meet source code).

2. When the user clicks on the Share button, an Ajax request with an identifier of the photo is sent to the server which securely publishes a message to our shared PubNub channel.

The following server-side Ruby code receives the identifier and additional bulletin details and publishes to a PubNub channel using PubNub'south Scarlet library:

preloaded = Cloudinary::PreloadedFile.new(params[:photo_id])          pubnub = Pubnub.new( :publish_key => PUBNUB_PUBLISH_KEY,                       :subscribe_key => PUBNUB_SUBSCRIBE_KEY )  pubnub.publish({     :channel => PUBNUB_CHANNEL,     :message => {         cloudinary_photo_id: preloaded.identifier,         user: params[:user],         message: params[:message],         kind: params[:kind],         fourth dimension: Time.now.utc.iso8601     },     :callback => lambda { |x| $stderr.puts("Shared #{preloaded.public_id}: #{x}") } })        

iii. The client side code in the browser uses PubNub's Javascript library to subscribe to a PubNub channel for new messages.

var pubnub = PUBNUB.init({ subscribe_key: PUBNUB_SUBSCRIBE_KEY}); pubnub.subscribe({ channel : PUBNUB_CHANNEL,                    callback : show_message });        

When a message is received, it includes the photo identifier which is the public ID of the paradigm uploaded to Cloudinary. The post-obit Javascript code uses Cloudinary'south jQuery plugin to brandish a dynamically transformed, face-detection based thumbnail of the photo through a CDN. Once the image is clicked, the originally uploaded image (with a watermark) is shown.

role show_message(bulletin) {   var link = $('<a></a>').     attr('href', $.cloudinary.url(bulletin.cloudinary_photo_id)).     append($.cloudinary.image(message.cloudinary_photo_id,                 { width: 150, acme: 100, crop: "fill",                  gravity: "face", radius: 20, result: "sepia"});   $('.stream').prepend($('<li></li>').append(link)); }        

In addition, a Javascript code fetches the contempo five messages that were published before the folio was loaded. This is done using PubNub's History support.

pubnub.history({     aqueduct  : PUBNUB_CHANNEL,     limit    : five,     callback : function(history) { $.each(history, part() { show_message(this); })} });        

If you scan through this live demo'south source code, you will notice that the few lawmaking lines listed in this web log mail service are actually near everything you need to build your ain, alive photo sharing website or awarding.

PubNub's service was built past developers that understood that developers should utilise a fully featured and scalable solution for real-time notifications instead of trying to build one past themselves. Same goes for Cloudinary'southward service – developers should use a fully featured and scalable prototype management, transformation and delivery service instead of spending precious time edifice i themselves.

Using both cloud-based services y'all tin can build complex, modernistic applications quickly, focus on the core of your awarding's business logic and end worrying about media management and communication channels anymore.

You tin sign-upwards for a free PubNub account and a free Cloudinary account.

This demo is but one, simple example. It would exist cracking to hear your feedback and learn near your ain ideas in the comments thread below.

• File upload and storage with Cloudinary
• Prototype Upload – Image Management for Developers
• Cloudinary's upload widget
• PHP file upload with Cloudinary
• AJAX file upload – Quick tutorial & time saving Tips
• Android file upload– Clone WhatsApp technology using Cloudinary
• jQuery image upload plugin

yodervelsomens.blogspot.com

Source: https://cloudinary.com/blog/how_to_build_a_real_time_photo_sharing_website_in_a_few_easy_steps

Share this post