Guest User

Untitled

a guest
Oct 19th, 2018
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.84 KB | None | 0 0
  1. IMAGE UPLOADER with drag and drop
  2.  
  3.  
  4.  
  5. Abstract :
  6.  
  7.  
  8.  
  9. This is a simple image uploader with the following features
  10.  
  11.  
  12.  
  13. a. Image upload using drag and drop
  14.  
  15. b. Upload images from remote url
  16.  
  17. c. Upload images from the computer
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25. How it works:
  26.  
  27.  
  28.  
  29. It is a single page app (which means there is no page transition seen by the user). The front end is powered by the backbone framework and the backend framework is powered by rails.
  30.  
  31.  
  32.  
  33. Backend -RAILS
  34.  
  35.  
  36.  
  37. Rails 3.2.5 with Mysql database is used. Additional gems that were used to handle file uploads are carrierwave, fog, Rmagic.
  38.  
  39.  
  40.  
  41. Backbone App:
  42.  
  43.  
  44.  
  45. why Backbone.js ?? - This application could have been written without using backbone or any other framework. But there is a reason of why I chose Backbone.js . Writing this small application in javascript would have been difficult as I would have to write code to manage and keep my data in sync with HTML, my javascript functons and also with the database in the server. In most of the cases including this application, the code gets entangled between callback functions,selectors and we are left in a confused state. so the piece thats missing is having a STRUCTURAL approach.
  46.  
  47.  
  48.  
  49. BACKBONE.js provides this structural approach. It clearly splits the data and the view. It provides Models,collections (the actual data) and Views, which handles all events and renders the result . so Maintaing and organizing the code of the javascript appliations becomes very easy.
  50.  
  51.  
  52.  
  53. File Uploader:
  54.  
  55.  
  56.  
  57. Following is the html page of the application
  58.  
  59.  
  60.  
  61. <div class = "main-container">
  62.  
  63. <div class = "header"> Insert Image </div>
  64.  
  65. <div class = "hrstyle"></div>
  66.  
  67. <div class = "sidebar">
  68.  
  69. <div class = "upload"> Upload! </div>
  70.  
  71. <div class = "URL"> By URL </div>
  72.  
  73. <div class = "mybox"> My Box </div>
  74.  
  75. </div>
  76.  
  77. <div class = "image-window" id="image-window"></div>
  78.  
  79. <div class ="drwin">Drag and drop here <form id = "drform" enctype="multipart/form-data" name="drform"></form></div>
  80.  
  81. <div id="footr" class = "footer">
  82.  
  83. <form action="<%= images_path %>" method="post" enctype="multipart/form-data" id="postForm" name="fileform">
  84.  
  85. <input type="file" id="file" name="file"/>
  86.  
  87. <button type="submit" class="uploadb">Upload</button>
  88.  
  89. </form>
  90.  
  91. <form action="#" method="post" enctype="multipart/form-data" id="posturlForm" name="urlform">
  92.  
  93. <label> or Enter URL </label>
  94.  
  95. <input type="text" id="url" name="remote_image_url" />
  96.  
  97. </form>
  98.  
  99. </div>
  100.  
  101. </div>
  102.  
  103.  
  104.  
  105. Backbone Modal :
  106.  
  107.  
  108.  
  109. Data is represented as modals. In this file uploader example, I have defined a modal called Image which has image id and image url as its attributes . every image that is being created has these attributes.
  110.  
  111.  
  112.  
  113. var Image_model = Backbone.Model.extend({
  114.  
  115. defaults: {
  116.  
  117. "id": "-1",
  118.  
  119. "img_url" : "/temp"
  120.  
  121. }
  122.  
  123. }) // model ends
  124.  
  125.  
  126.  
  127. Collection :
  128.  
  129.  
  130.  
  131. A set of modals is collection. I have defined a collection called Images_Collection, which contain a set of images with attributes id and url. the main advantage of collection is that we can bind events to the collection so that whenever the event is triggered on any modal that is part of this collection, this event will also be triggered on the collection.
  132.  
  133.  
  134.  
  135. var Images_collection = Backbone.Collection.extend({
  136.  
  137. model : Image_model,
  138.  
  139. url : '/images'
  140.  
  141. })
  142.  
  143.  
  144.  
  145. The url property here defines the reference of the collection located on the server. For eg, a get request on /images will fetch you the collection stored in the server.
  146.  
  147.  
  148.  
  149. Views
  150.  
  151.  
  152.  
  153. A view in backbone is little different . They listen to events and execute rexpective functions . i have defined four views in my file uploader, namely
  154.  
  155.  
  156.  
  157. footer - this contains the upload button and the url box through which images can be uploaded
  158.  
  159. mybox- to display all the images that are uploaded
  160.  
  161. dragdrop - to drag and drop images
  162.  
  163. imageitem- when any particular image that is selected, this view is triggered
  164.  
  165.  
  166.  
  167.  
  168.  
  169. var Myboxview = Backbone.View.extend({
  170.  
  171.  
  172.  
  173. el: $('.image-window'),
  174.  
  175.  
  176.  
  177. initialize : function() {
  178.  
  179. var self = this
  180.  
  181. console.log(photos)
  182.  
  183. console.log(self.$el);
  184.  
  185. console.log("inside mybox")
  186.  
  187. _.bindAll(self,'render', 'renderOne', 'checklen')
  188.  
  189. self.collection.on('add', self.renderOne)
  190.  
  191. self.collection.on('reset', self.render)
  192.  
  193. self.collection.on('remove', self.checklen)
  194.  
  195. self.collection.fetch()
  196.  
  197. }
  198.  
  199.  
  200.  
  201. renderOne: function ( image ) {
  202.  
  203. var self = this
  204.  
  205. var imageView = new ImageItemView({ model: image })
  206.  
  207. self.$el.append(imageView.render().el)
  208.  
  209. },
  210.  
  211.  
  212.  
  213. render: function() {
  214.  
  215. var self = this,
  216.  
  217. template = ""
  218.  
  219. console.log('render')
  220.  
  221.  
  222.  
  223. self.collection.each( function ( image ) {
  224.  
  225. var imageView = new ImageItemView({ model: image })
  226.  
  227. self.$el.append(imageView.render().el)
  228.  
  229. })
  230.  
  231. },
  232.  
  233.  
  234.  
  235. checklen : function(coll) {
  236.  
  237. var self = this
  238.  
  239. console.log("len",self.collection)
  240.  
  241. }
  242.  
  243. });//myboxview
  244.  
  245.  
  246.  
  247. one of the very important feature about the backbone view is binding the collction to the view.
  248.  
  249.  
  250.  
  251. lets look at the following lines from the above view:
  252.  
  253.  
  254.  
  255. self.collection.on('add', self.renderOne)
  256.  
  257. self.collection.on('remove', self.checkLen)
  258.  
  259.  
  260.  
  261. whenever there is new model coming to the collection or if a model is removed from the collection, the callback functions renderOne and checkLen is called. this happens in the entire application i.e consider there is more view where a function removes a model from the collection. when that event happens, immediately checkLen function is called as the collection is binded with an event and a callback function here. This is one of the very important concept that helps to keep the data in sync with the javascript logic.
  262.  
  263.  
  264.  
  265.  
  266.  
  267. The next important thing in view is bindAll
  268.  
  269.  
  270.  
  271. ._bindAll(object,list of methods)
  272.  
  273.  
  274.  
  275. This binds the list of methods and executes those methods in the context of the object specified. In the example above, the methods render,renderone and checklen are executed in the context of the myboxview object.
Add Comment
Please, Sign In to add comment