https://www.bizmakebiz.co.il/Scripts/ImageUploader.js?v=1026

1
2// ********************************************************************************************************
3// BMBImageUploader plugin 
4// ********************************************************************************************************
5; (function ($) {
6  function BMBImageUploader(element) {
7    this.element = element;
8    this.elementId;
9    this.uploader;
10    this.options;
11    this.btnContainerId;
12    this.hiddenFieldImageId;
13    this.uploadDivId;
14    this.multiple;
15    this.chooseFromGallery;
16    this.formNameToSubmit;
17    this.active = false;
18    this.disableUploader = false;
19    this.removeEnabled = false;
20    this.limitImageSize = true;
21    this.imageAspectRatio = 1;
22    this.imageCropWidth = 400;
23    this.imageCropHeight = 400;
24    this.isValid = true;
25    this.enableCropper = false;
26    this.displayOriginalImage = false;
27    this.afterImageLoadFunction = null;
28    this.maxImageWidth = 0;
29    this.imageDefaultWidthPercent = "33.28%";
30    this.enableEditingForMultipleUpload = false;
31    this.multipleUploadImageContainerClass = false;
32    this.multipleUploadImageClass = false;
33    this.buttonText = "";
34  }
35
36  $.extend(BMBImageUploader.prototype,
37    {
38      EnableUploader: function () {
39        var me = this;
40        var div = $(me.uploader._element).find(".disabledFileUploader");
41        if (div !== undefined) {
42          div.removeClass("disabledFileUploader");
43        }
44        var file = $(me.uploader._element).find('input[type="file"]');
45        if (file !== undefined) {
46          file.removeAttr("disabled");
47        }
48      },
49      EnableRemoveButton: function () {
50        var me = this;
51        var link = $("#remove_" + me.elementId);
52        if (link !== undefined && link.hasClass("disabledFileRemoval")) {
53          link.removeClass("disabledFileRemoval");
54          link.attr('removed', false);
55        }
56      },
57      DisableRemoveButton: function () {
58        var me = this;
59        var link = $("#remove_" + me.elementId);
60        if (link !== undefined && link.hasClass("disabledFileRemoval") === false) {
61          link.addClass("disabledFileRemoval");
62          link.attr('removed', true);
63        }
64      },
65      BindEvents: function () {
66
67        var me = this;
68
69        var file = $(me.uploader._element).find('input[type="file"]');
70
71        if (file !== undefined) {
72
73          $(file).on('change', function () {
74            me.isValid = true;
75            var fr = new FileReader;
76
77            fr.onload = function () {
78
79              var img = new Image;
80              img.onload = function () {
81                if (me.enableCropper === true && me.imageCropWidth > img.width) {
82                  me.isValid = false;
83                  alert("עליך להעלות תמונה ברוחב של לפחות " + me.imageCropWidth + " פיקסלים");
84                }
85
86                if (me.enableCropper === true && me.imageCropHeight > img.height) {
87                  me.isValid = false;
88                  alert("עליך להעלות תמונה בגובה של לפחות " + me.imageCropHeight + " פיקסלים");
89                }
90              };
91
92              img.src = fr.result;
93            };
94
95            fr.readAsDataURL(this.files[0]);
96          });
97        }
98      },
99      // *******************************************************************************
100      // Init : init the image uploader
101      // *******************************************************************************
102      Init: function (options) {
103        var me = this;
104
105        me.options = options || {};
106        me.btnContainerId = me.options.btnContainerId !== undefined ? "#" + me.options.btnContainerId : "#btnUploadImage";
107        me.formNameToSubmit = me.options.formNameToSubmit !== undefined ? "#" + me.options.formNameToSubmit : "";
108        me.multiple = me.options.multiple !== undefined ? me.options.multiple : false;
109        me.chooseFromGalleryEnabled = me.options.chooseFromGalleryEnabled !== undefined ? me.options.chooseFromGalleryEnabled : false;
110        me.removeEnabled = me.options.removeEnabled !== undefined ? me.options.removeEnabled : false;
111        me.limitImageSize = me.options.limitImageSize !== undefined ? me.options.limitImageSize : true;
112        me.imageAspectRatio = me.options.imageAspectRatio !== undefined ? me.options.imageAspectRatio : 1;
113        me.imageCropWidth = me.options.imageCropWidth !== undefined ? me.options.imageCropWidth : 400;
114        me.imageCropHeight = me.options.imageCropHeight !== undefined ? me.options.imageCropHeight : 400;
115        me.enableCropper = me.options.enableCropper !== undefined ? me.options.enableCropper : false;
116        me.displayOriginalImage = me.options.displayOriginalImage !== undefined ? me.options.displayOriginalImage : false;
117        me.afterImageLoadFunction = me.options.afterImageLoadFunction !== undefined ? me.options.afterImageLoadFunction : null;
118        me.maxImageWidth = me.options.maxImageWidth !== undefined ? me.options.maxImageWidth : 0;
119        me.imageDefaultWidthPercent = me.options.imageDefaultWidthPercent !== undefined ? me.options.imageDefaultWidthPercent : "33.28%";
120        me.enableEditingForMultipleUpload = me.options.enableEditingForMultipleUpload !== undefined ? me.options.enableEditingForMultipleUpload : false;
121        me.multipleUploadImageContainerClass = me.options.multipleUploadImageContainerClass !== undefined ? me.options.multipleUploadImageContainerClass : "";
122        me.multipleUploadImageClass = me.options.multipleUploadImageClass !== undefined ? me.options.multipleUploadImageClass : "";

123        me.elementId = me.element.id;
124        if (me.options.buttonText !== undefined) {
125          me.buttonText = me.options.buttonText;
126        }
127        else {
128          if (me.multiple === true) {
129            me.buttonText = "<span>" + UploadPhotos + "</span>";
130          }
131          else {
132            me.buttonText = UploadPhoto;
133          }
134        }
135
136        me.hiddenFieldImageId = $(me.element).attr('hiddenFieldId');
137        me.disableUploader = $(me.element).attr('disableUploader');
138
139        if (me.multiple === false) {
140          //hide image if its src is empty
141          var imageSource = $(me.element).attr('src');
142          if (imageSource === undefined || imageSource === '') {
143            $(me.element).css('display', 'none');
144          }
145        }
146
147        me.uploadDivId = me.elementId + '-file-uploader';
148
149        var uploadDivClass = "file-uploader-container";
150        var clearDiv = "";
151        if (me.chooseFromGalleryEnabled === true) {
152          uploadDivClass += " imageUploadLink normalFloat";
153          clearDiv = "<div class='clear'></div>";
154        }
155
156        var div = clearDiv + "<div id='" + me.uploadDivId + "' class='" + uploadDivClass + "'></div>";
157        $(me.element).after(div);
158
159
160        var ImageMaxWidthForCropper = 0;
161        if (me.enableCropper === true) {
162          ImageMaxWidthForCropper = me.imageAspectRatio !== 1 ? me.imageCropWidth : 0;
163        }
164
165        me.uploader = new qq.FileUploader({
166          multiple: me.multiple,
167          element: document.getElementById(me.uploadDivId),
168          buttonText: me.buttonText,
169          disableUploader: me.disableUploader,
170          action: '/Handlers/UploadHandler.ashx?LimitImageSize=' + me.limitImageSize + '&ImageMaxWidthForCropper=' + ImageMaxWidthForCropper,
171          allowedExtensions: ['jpeg', 'jpg', 'png'],
172          onComplete: function (id, fileName, responseJSON) {
173            if (me.multiple === true) {
174
175              var imagePath = me.displayOriginalImage === false ? responseJSON.filepath : responseJSON.original_filepath;
176
177              //add the new file namr to the hidden field                            
178              var imagesNamesList = $("#" + me.hiddenFieldImageId).val();
179              if (imagesNamesList !== "" && imagesNamesList[imagesNamesList.length - 1] !== ";") {
180                imagesNamesList = imagesNamesList + ";";
181              }
182              imagesNamesList = imagesNamesList + responseJSON.filename;
183              $("#" + me.hiddenFieldImageId).val(imagesNamesList);
184
185
186              if (me.enableEditingForMultipleUpload === true) {
187
188                var imageContainer = '<li class="col-sm-3">' +
189                  '<div class="' + me.multipleUploadImageContainerClass + '">' +
190                  '<img class="' + me.multipleUploadImageClass + '" src="' + imagePath + '" imagename="' + responseJSON.filename + '">' +
191                  '<img src="/images/sort_arrow.png" class="padding_10 sortableImg" style="margin-right:2px;"/>' +
192                  '<a class="removeUploadedMultipleImage">הסר</a>' +
193                  '</div>' +
194                  '</li>';
195
196                $(me.element).append(imageContainer);
197              }
198              else {
199                //show the new image thumb
200                var container = $("#" + me.uploadDivId);
201                if (me.displayOriginalImage === true) {//used for minisite
202
203                  var list_item = $(container).find(".qq-upload-list li:eq(" + id + ")");
204                  if (list_item.length > 0) {
205                    var first_list_item = $(container).find(".qq-upload-list li").first();
206                    if (first_list_item.length > 0) {
207                      var first_list_item_width = first_list_item[0].style.width;
208                      $(list_item).css("width", first_list_item_width);
209                    }
210                    else {
211                      $(list_item).css("width", me.options.imageDefaultWidthPercent);
212                    }
213                    var previewDiv = $(list_item).find(".uploaderMultiplePreview");
214                    imageContainer = "<div class='imageContainer'><img src='" + imagePath + "' imagename='" + responseJSON.filename + "' class='img-responsive img-thumbnail'/></div>";
215                    $(previewDiv).append(imageContainer);
216                    $(previewDiv).append("<a class='removeUploadedMultipleImage' hiddenFieldId='" + me.hiddenFieldImageId + "' removed='false'>" + RemoveImageText + "</a>");
217
218                    $(container).find('.qq-upload-list').livequery(function () {
219                      var upload_list = this;
220                      $(upload_list).sortable({
221                        items: 'li',
222                        containment: $(this).parent(".qq-uploader"),
223                        update: function (event, ui) {
224                          $(upload_list).find("li").each(function () {
225                            $(this)[0].qqFileId = $(this).index();
226                          });
227                        }
228                      });
229                    });
230                  }
231                }
232                else {//used for forum
233                  list_item = $(container).find(".qq-upload-list li:eq(" + id + ")");
234                  previewDiv = $(list_item).find(".uploaderMultiplePreview");
235                  $(previewDiv).append("<img src='" + imagePath + "'  imagename='" + responseJSON.filename + "'/>");
236
237                  var list = $(container).find(".qq-upload-list");
238                  if ($(list).css('display') === "none") {
239                    $(list).css('display', 'inline-block');
240                  }
241
242                  $(previewDiv).append("<br/><a class='removeUploadedMultipleImage' hiddenFieldId='" + me.hiddenFieldImageId + "' removed='false'>" + RemoveImageText + "</a>");
243                }
244
245                $('.removeUploadedMultipleImage').bind('click', function (e) {
246                  e.preventDefault();
247                  var removed = $(this).attr('removed');
248                  //prevent double click on remove
249                  if (removed === 'false') {
250                    $(this).attr('removed', true);
251
252                    var list_item = $(this).closest(".qq-upload-success");
253                    var imageIndex = parseInt($(list_item).index());
254                    var hiddenFieldId = $(this).attr('hiddenFieldId');
255                    var list = $(list_item).closest(".multiple-upload-list");
256                    $(list_item).remove();
257                    me.uploader._handler.removeInput(imageIndex);
258
259                    var newImagesNamesList = "";
260                    $(list).find("li").each(function () {
261                        var image_name = $(this).find("img").attr("imagename");
262                      if (image_name !== "" && image_name !== undefined) {
263                        newImagesNamesList += image_name + ";";
264                      }
265                      $(this)[0].qqFileId = $(this).index();
266                    });
267                    $("#" + hiddenFieldId).val(newImagesNamesList);
268
269                  }
270                });
271              }
272              $(me.element).css('display', '');
273              $('#' + me.elementId + '_pleaseWait').css('display', 'none');
274              /*-----------------------------------------end of multiple----------------------------------------------*/
275            }
276            else {
277              if (me.enableCropper === true) {
278                if (me.isValid) {
279                  $(me.element).attr('src', responseJSON.filepath);
280
281                  $(me.element).css('display', 'inline');
282                  $('#' + me.elementId + '_pleaseWait').css('display', 'none');
283                  $("#" + me.hiddenFieldImageId).val(responseJSON.filename);
284
285                  //initialize the croper
286                  var cropOriginalImagePath = responseJSON.filepath.replace("_p", "");
287                  var popupWidth = me.imageCropWidth + 15;
288

289                  var cropOriginalImage = "<div style='width:" + popupWidth + "px;max-width:1024px;'><img  id='jcrop_target' src='" + cropOriginalImagePath + "' style='max-width:" + (me.imageCropWidth - 1) + "px;'/><div class='clear spacer'></div><a href='' id='closeCropPopup' class='gray_button backFloat'>בטל</a><a href='' id='cropImage' class='blue_button backFloat'>שמור</a></div>";
290
291                  OpenPopup(cropOriginalImage);
292
293                  var realImageRatio = 1;
294                  $("#jcrop_target").load(function () {
295
296                    var domWidth = $(this).width();
297                    var domHeight = $(this).height();
298
299                    realImageRatio = responseJSON.original_image_width / domWidth;
300                    InitJcrop(domWidth, domHeight, me.imageCropWidth / realImageRatio, me.imageCropHeight / realImageRatio, me.imageAspectRatio !== 1, function (c) {
301                      $('#' + me.hiddenFieldImageId + '_x1').val(c.x);
302                      $('#' + me.hiddenFieldImageId + '_y1').val(c.y);
303                      $('#' + me.hiddenFieldImageId + '_x2').val(c.x2);
304                      $('#' + me.hiddenFieldImageId + '_y2').val(c.y2);
305                      $('#' + me.hiddenFieldImageId + '_w').val(c.w);
306                      $('#' + me.hiddenFieldImageId + '_h').val(c.h);
307                      $('#' + me.hiddenFieldImageId + '_sw').val(responseJSON.original_image_width);
308                      $('#' + me.hiddenFieldImageId + '_sh').val(responseJSON.original_image_height);
309                    });
310
311
312                  });
313
314
315                  $('#cropImage').on('click', function (e) {
316                    e.preventDefault();
317
318                    $('#' + me.hiddenFieldImageId + '_crop').val('true');
319                    var x1 = Math.floor($('#' + me.hiddenFieldImageId + '_x1').val()) * realImageRatio;
320                    var y1 = Math.floor($('#' + me.hiddenFieldImageId + '_y1').val()) * realImageRatio;
321                    var x2 = Math.floor($('#' + me.hiddenFieldImageId + '_x2').val()) * realImageRatio;
322                    var y2 = Math.floor($('#' + me.hiddenFieldImageId + '_y2').val()) * realImageRatio;
323                    var w = Math.floor($('#' + me.hiddenFieldImageId + '_w').val()) * realImageRatio;
324                    var h = Math.floor($('#' + me.hiddenFieldImageId + '_h').val()) * realImageRatio;
325                    $.ajax({

326                      type: "POST",
327                      dataType: "json",
328                      url: "/Handlers/UploadHandler.ashx?action=CropPreviewImage&ImageName=" + responseJSON.filename + "&PreviewImageName=" + responseJSON.preview_filename + "&x=" + x1 + "&y=" + y1 + "&w=" + w + "&h=" + h,
329                      contentType: "application/json; charset=utf-8",
330                      success: function (data) {
331                        $(me.element).attr('src', responseJSON.filepath);
332                        var imageName = responseJSON.filename.replace(".jpg", "");
333                        $("#" + me.hiddenFieldImageId).val(imageName + "_c.jpg");
334                        $("#popupContainerClose").click();
335                        if (me.formNameToSubmit !== "") {
336                          var container = $("#" + me.uploadDivId);
337                          $(container).append("<img src='" + responseJSON.filepath + "'/>");
338                          $(me.formNameToSubmit).submit();
339                        }
340                      }
341                    });
342
343                  });
344
345                  $('#closeCropPopup').on('click', function (e) {
346                    e.preventDefault();
347                    $('#' + me.hiddenFieldImageId + '_crop').val('false');
348                    $('#' + me.hiddenFieldImageId + '_x1').val('');
349                    $('#' + me.hiddenFieldImageId + '_y1').val('');
350                    $('#' + me.hiddenFieldImageId + '_x2').val('');
351                    $('#' + me.hiddenFieldImageId + '_y2').val('');
352                    $('#' + me.hiddenFieldImageId + '_w').val('');
353                    $('#' + me.hiddenFieldImageId + '_h').val('');
354                    $("#popupContainerClose").click();
355                  });
356                }
357                else {
358                  $(me.element).css('display', 'inline');
359                  $('#' + me.elementId + '_pleaseWait').css('display', 'none');
360                }
361              }
362              else {
363                imagePath = me.displayOriginalImage === false ? responseJSON.filepath : responseJSON.original_filepath;
364                $(me.element).attr('src', imagePath);
365                $(me.element).css('display', 'inline');
366                $('#' + me.elementId + '_pleaseWait').css('display', 'none');
367                $("#" + me.hiddenFieldImageId).val(responseJSON.filename);
368
369                if ($.isFunction(me.afterImageLoadFunction)) {
370                  me.afterImageLoadFunction($(me.element), responseJSON.original_image_width, responseJSON.original_image_height, me.maxImageWidth);
371                }
372
373                if (me.formNameToSubmit !== "") {
374
375                  container = $("#" + me.uploadDivId);
376                  $(container).append("<img src='" + responseJSON.filepath + "' class='img-responsive'/>");
377                  $(me.formNameToSubmit).submit();
378                }
379              }
380            }
381          },
382          onSubmit: function (id, fileName) {
383            if (me.multiple === false) {
384              $(me.element).css('display', 'none');
385              $('#' + me.elementId + '_pleaseWait').css('display', '');
386            } else {
387              $(me.element).css('display', 'none');
388              $('#' + me.elementId + '_pleaseWait').css('display', '');
389            }
390          }
391        });
392
393        if (me.multiple === false && me.removeEnabled === true) {
394          var disabledFileRemovalClass = "";
395          var src = $('#' + me.elementId).attr("src");
396          if (src === "") {
397            disabledFileRemovalClass = "disabledFileRemoval";
398          }
399          $("#" + me.elementId + "-file-uploader").after("<br/><a id='remove_" + me.elementId + "' class='removeUploadedImage " + disabledFileRemovalClass + "'" + " hiddenFieldId='" + me.hiddenFieldImageId + "' removed='false'>" + RemoveImageText + "</a>");
400
401          $('.removeUploadedImage').bind('click', function (e) {
402            e.preventDefault();
403            var disabledFileRemoval = $(this).hasClass('disabledFileRemoval');
404            if (disabledFileRemoval === false) {
405              var removed = $(this).attr('removed');
406              //prevent double click on remove
407              if (removed === 'false') {
408                $(this).attr('removed', true);
409                var hiddenFieldId = $(this).attr('hiddenFieldId');
410                $("#" + hiddenFieldId).val("");
411                if (me.formNameToSubmit !== "") {
412                  $(me.formNameToSubmit).submit();
413                }
414              }
415            }
416          });
417        }
418
419        if (me.enableEditingForMultipleUpload === true) {
420          $('.removeUploadedMultipleImage').live('click', function (e) {
421            e.preventDefault();
422            var imagesList = $("#" + me.hiddenFieldImageId).val();
423            var imagename = $(this).siblings(".uploadedImage").attr("imagename");
424
425              if (imagesList.indexOf(";") > -1) {
426                  imagesList = imagesList.replace(imagename + ";", "");
427                  
428              } else {
429                  imagesList = imagesList.replace(imagename, "");
430              }
431              
432            $("#" + me.hiddenFieldImageId).val(imagesList);
433            $(this).parents("li").remove();
434          });
435
436          $(me.element).sortable({
437            items: 'li',
438            containment: ".productMultipleUploadContainer",
439            update: function (event, ui) {
440              var imagesNamesList = "";
441
442              $(me.element).find("li").each(function () {
443                imagesNamesList += $(this).find(".uploadedImage").attr("imagename") + ";";
444              });
445
446              $("#" + me.hiddenFieldImageId).val(imagesNamesList);
447            }
448          });
449        }
450
451        //                
452        //              $(me.btnContainerId).click(function ()
453        //              {       
454        //                    $(me.uploader._button).change();
455        //                    $('input[type="file"]').click();              
456        //              });
457
458        me.active = true;
459      }
460    });

461
462
463  $.extend($.fn, {
464
465    // *******************************************************************************
466    // BMBImageUpload : creates an image uplpoder object and save a reference to that 
467    //                       object on the creating element 
468    // *******************************************************************************
469    BMBImageUpload: function (options) {
470      return this.each(function () {
471        var me = $(this)[0].uploader;
472        if (me === undefined) {
473          this.uploader = new BMBImageUploader(this);
474          me = this.uploader;
475        }
476 
477        if (me.active === false) {
478          me.Init(options);
479          me.BindEvents();
480        }
481      });
482    },
483    EnableUploader: function () {
484      var me = $(this)[0].uploader;
485      if (me !== undefined && me.active === true) {
486        me.EnableUploader();
487      }
488    },
489    EnableRemoveButton: function () {
490      var me = $(this)[0].uploader;
491      if (me !== undefined && me.active === true) {
492        me.EnableRemoveButton();
493      }
494    },
495    DisableRemoveButton: function () {
496      var me = $(this)[0].uploader;
497      if (me !== undefined && me.active === true) {
498        me.DisableRemoveButton();
499      }
500    }
501  });
502
503})(jQuery);