Adding image id to each image in preview template in dropzone .js - javascript

I just want to add image id to each image that are uploaded using dropzone.js
currently preview template is like this
<div class="dz-preview dz-image-preview" id="1">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name="">car-menu03.jpg</span></div>
<div class="dz-size" data-dz-size=""><strong>85.9</strong> KiB</div>
<img data-dz-thumbnail="" alt="car-menu03.jpg" src="http://server1/akhil/workspace/XENSALE/assets/uploads/images/cars/2/car-menu03.jpg">
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage=""></span></div>
<a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove</a>
</div>

This code get all images from the server and initialize the dropzone container.
I hope this help you
// Initialize dropzone
init: function() {
thisDropzone = this;
// Call server to get all images in JSON format {id, filename, imagesize}
$.get("get-all-images", function(data) {
$.each(data.data, function(key,value){
var mockFile = { name: value.filename, size: value.imagesize };
thisDropzone.options.addedfile.call(thisDropzone, mockFile);
thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.file);
// On the created element added the id property
$(mockFile.previewElement).prop('id', value.id);
});
});
}

Related

Dropzone.js how to add hidden input with value to uploaded image

I am having problems with adding hidden input field to uploaded images using dropzone.js.
What i am trying to do is to use dropzonejs to upload images to the website and then having possibility with jquery sortable to drag and change order of the images.
I've managed to make it working everything so far except when i use separated input array the order of the images is not changed on drag and drop.
For this to work i need to find a way to add hidden input to the image template when image is uploaded.
Here is the code i use in .php file
<div class="form-group">
<div id="media-uploader" class="dropzone"></div>
<div id="uploaded-media" class="hidden">
</div>
</div>
Right now when image is uploaded a hidden input field is added to #uploaded-media but i need to change that and add hidden input in uploaded image template holder.
Here is what it looks like now when image is uploaded
<div id="media-uploader" class="dropzone dz-clickable ui-sortable dz-started">
<div class="dz-default dz-message">
<span>Drop files here to upload</span>
</div>
<div class="dz-preview dz-processing dz-image-preview dz-success dz-complete">
<div class="dz-image"><img data-dz-thumbnail="" alt="DSC_3771-Edit.jpg" src=""></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size=""><strong>0.9</strong> MB</span></div>
<div class="dz-filename"><span data-dz-name="">DSC_3771-Edit.jpg</span></div>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
</div>
<div class="dz-error-message"><span data-dz-errormessage=""></span></div>
<div class="dz-success-mark"> </div>
<div class="dz-error-mark"> </div>
<a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove file</a>
</div>
</div>
The only small change i need is it to look like this
<div id="media-uploader" class="dropzone dz-clickable ui-sortable dz-started">
<div class="dz-default dz-message">
<span>Drop files here to upload</span>
</div>
<div class="dz-preview dz-processing dz-image-preview dz-success dz-complete">
<div class="dz-image"><img data-dz-thumbnail="" alt="DSC_3771-Edit.jpg" src=""></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size=""><strong>0.9</strong> MB</span></div>
<div class="dz-filename"><span data-dz-name="">DSC_3771-Edit.jpg</span></div>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
</div>
<div class="dz-error-message"><span data-dz-errormessage=""></span></div>
<div class="dz-success-mark"> </div>
<div class="dz-error-mark"> </div>
<a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove file</a>
**<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids" value="812">**
</div>
</div>
Here is the dropzone configuration
// Dropzone file uploader
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone ("#media-uploader", {
url: dropParam.upload,
autoProcessQueue: true,
parallelUploads: 1,
uploadMultiple: false,
maxFilesize: 3,
acceptedFiles: 'image/*',
addRemoveLinks: true,
maxFiles: 10,
success: function (file, response) {
file.previewElement.classList.add("dz-success");
file['attachment_id'] = response; // push the id for future reference
$('#uploaded-media').append( $('<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids" value="' + response +'">') );
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
},
// update the following section is for removing image from library
removedfile: function(file) {
var attachment_id = file.attachment_id;
jQuery.ajax({
type: 'POST',
url: dropParam.delete,
data: {
media_id : attachment_id
}
});
$('input.media-ids[type=hidden]').each(function() {
if ($(this).val() == attachment_id) {
$(this).remove();
}
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
});
I found the solution, the code below will add an input field to each uploaded image upon successful upload
myDropzone.on("success", function(file, response) {
$(file.previewElement).append( $('<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids dz-media-id" value="' + response +'">') );
});
$("div#js-dropzone").dropzone({
url: "/api/mmm/orders/fileupload",
method: 'POST',
maxFilesize: 5, // MB
previewTemplate: previewTemplate,
success: function (response) {
$(response.previewElement).append('<input type="hidden" name="fileupload" value="' + JSON.parse(response.xhr.response).fileName + '" />');
}
});

How to fetch data dynamically from JSON file on click?

I have created an artist(artists.html) page, which includes around 15 artists. Now I am trying to create the profile of each artist through one single HTML file dynamically. So I have created another HTML file(single-artist.html) which will show the profile of an artist clicked by the visitor.
artists.html (Out of 15 artists, below are the two examples)
<div class="all-artist" id="artists">
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="0">
<div>
<a href="artist-single.html">
<img src="img/1.jpg" alt="">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="1">
<div>
<a href="artist-single.html">
<img src="img/2.jpg" alt="">
</a>
</div>
</div>
</div>
artist-single.html
<div id="name"></div>
<div id="logo"></div>
<div id="bio"></div>
data.json
[{
"name": "Arsh",
"logo": "img/logo.jpg",
"bio": "Arsh is a singer/songwriter"
},
{
"name": "Benz",
"logo": "img/logo.jpg",
"bio": "Benz is a singer"
}]
main.js
$('#all_artists artist-single').on('click',function(){
window.location.href="artist-single.html";
var num = $(this).data('number');
$.getJSON('data.json',function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
});
Now, when I click on an artist image, it redirects to artist-single.html but it's not fetching values. Maybe because I am redirecting and fetching the values on the same event. Help would be really appreciated.
$(document).ready(function() {
var num = $.cookie('num');
$.getJSON('data.json', function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
$('#artists .artist-single').on('click', function() {
var num = $(this).data('number');
$.cookie('num', num);
window.location.href = "artist-single.html";
});
});

Displaying correct image in modal when clicking on it using AngularJs

I'm making slider with Angularjs using modal. I'm trying to accomplish when clicking on picture modal pops up displaying image that I have clicked.
.html
<div class="float" ng-repeat="a in $ctrl.f">
<div class="column is-narrow topIcons">
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture()">
<figure class="image is-128x128">
<img ng-src="{{a.imageSrc}}">
</figure>
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-background" ng-repeat="a in $ctrl.f"></div>
<div class="modal-content">
<p class="image is-4by3">
<img ng-src="{{togglePicture(a.id)}}">
</p>
</div>
<button class="modal-close" ng-click="$ctrl.closeModal()"></button>
</div>
component.js
function PhotoController($scope){
var vm = this;
vm.f = [{
albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 1
},
{ albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 2
}];
vm.togglePicture = function(id) {
$('#myModal').addClass('is-active');
};
I'm trying to get imageSrc by passing id of an image as a function parameter but is not working. What should I do in my function to select correct imageSrc using id and then to display it and how my imageSrc should look like?
Was thinking something like this <img ng-src="{{togglePicture(a.id)}}">?
Pass Selected image in funnction.
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture(a)">
Then set selcted image in controller
vm.selectedImgsrc='';
vm.togglePicture = function(a) {
$('#myModal').addClass('is-active');
vm.selectedImgsrc=a.imageSrc;
};
Then modify modal to view selected image
<p class="image is-4by3">
<img ng-src="{{$ctrl.selectedImgsrc}}">
</p>

jQuery lightGallery dynamic - open gallery to correct image

Using the jQuery lightGallery plugin: http://sachinchoolur.github.io/lightGallery/
So I have the following code:
JSON (array):
var gallery_json = '[{"src":"/assets/Images/Gallery-Images/img-1.jpg","thumb":"/assets/Images/Gallery-Images/img-2.jpg"},{"src":"/assets/Images/Gallery-Images/img-3.jpg","thumb":"/assets/Images/Gallery-Images/img-4.jpg"},{"src":"/assets/Images/Gallery-Images/img-5.jpg","thumb":"/assets/Images/Gallery-Images/img-wool-2015-hero-crop-sheep-river.jpg"},{"src":"/assets/Images/Gallery-Images/img-6.jpg","thumb":"/assets/Images/Gallery-Images/img-7.jpg"},{"src":"/assets/Images/Gallery-Images/img-8.jpg","thumb":"/assets/Images/Gallery-Images/img-9.jpg"}]';
JS:
$(document).ready(function () {
var $gallery = $('[data-hook="gallery"]');
if ($gallery && typeof gallery_json !== 'undefined') {
$gallery.on('click', 'img', function () {
$gallery.lightGallery({
dynamic: true,
dynamicEl: JSON.parse(gallery_json)
});
$gallery.data('lightGallery').slide($(this).parent().index());
});
}
});
MarkUp:
<div class="row" data-hook="gallery">
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-1.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-2.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-3.jpg" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="/assets/Images/Gallery-Images/img-4.jpg" class="img-responsive">
</div>
</div>
So basically what I am after is whichever image in the [data-hook="gallery"] is selected the dynamic light gallery will load up showing this image as the index, bear in mind my JS skills are really limited so please walk my through any solutions.

Getting attribute of jQuery Dropzone DIV

I have dropzone (v3.7.1) divs in each of my bootstrap tabs.
How can I upload all files in all dropzones only after clicking on submit button (not using form for each dropzone)? When I set autoProcessQueue to false and try to attach listener, an error saying unable to attach an event to undefined shows up...
How do I get attributes of a dropzone object e.g. rel="6" of the first dropzone? Attempts to use this.attr('rel') / $(this).attr('rel') results in 'undefined'...
HTML
<form class="my-form" method="post">
<input type="text" name="form-input-1" id="form-input-1" />
<input type="text" name="form-input-2" id="form-input-2" />
<div class="tab-content">
<div class="tab-pane active" id="ic_6">
<h3>Overview</h3>
<div rel="6" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_1">
<h3>Living Room</h3>
<div rel="1" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_2">
<h3>Kitchen</h3>
<div rel="2" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_3">
<h3>Bathroom</h3>
<div rel="3" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_4">
<h3>Bedroom</h3>
<div rel="4" class="dropzone" id="my-dropzone"></div>
</div>
<div class="tab-pane" id="ic_5">
<h3>Outdoors</h3>
<div rel="5" class="dropzone" id="my-dropzone"></div>
</div>
</div>
<button type="submit">Submit</button>
</form>
JS
Dropzone.options.myDropzone = {
url: "upload.php",
maxFilesize: 2, // MB
addRemoveLinks: true,
acceptedFiles: "image/*",
accept: function(file, done) {
console.log("uploaded");
done();
},
init: function() {
this.on("addedfile", function(file) {
//== divider ==//
var dividerElement = Dropzone.createElement("<div> </div>");
file.previewElement.appendChild(dividerElement);
//== caption input : still trying to figure capturing this ==//
var captionInput = Dropzone.createElement("<input type='text' name='caption' maxlength='50' placeholder='Enter a caption' />");
file.previewElement.appendChild(captionInput);
});
this.on("removedfile", function(file) {
$.ajax({
url: "delete_temp_files.php",
type: "POST",
data: { filename: file.name }
});
});
}
}
I know this is an old post, but the solution to accessing attributes on the original element is
console.log($($(this)[0].element).attr("rel"));
If your html code is:
<div class="dropzone" data-name="mypics"></div>
pure javascript:
new Dropzone("div.dropzone", {
url: "<backend-url>",
success: function (file, response) {
// Get "data-name" attribute here
var name = this.element.getAttribute("data-name");
}
});

Categories