I am building a web app. I have to let a user upload a picture or drag-and-drop one into the browser. To help with this, I'm using dropzone.js. My challenge is, I need to customize the appearance a bit.
My customization requires features that seem pretty forward in dropzone.js. Basically, I need: only one file can be uploaded at once. While the file is being uploaded, I need to show a progress bar. Once uploaded, I need to let the user either a) remove the existing picture or b) replace the picture with another one. In an attempt to this, I currently have the following HTML:
<div id="myDropZone" style="cursor:pointer;">
<div class="files" id="previews">
<div id="template" class="file-row">
<ul class="list-inline">
<li>
<span class="preview" style="width:300px;"><img data-dz-thumbnail /></span>
<p class="size" data-dz-size></p>
</li>
<li style="vertical-align:top;">
<ul id="pictureActions" class="list-unstyled">
<li>
<button class="btn btn-default dz-clickable file-input-button">
<i class="glyphicon glyphicon-picture"></i>
<span>Pick...</span>
</button>
</li>
<li>
<button data-dz-remove class="btn btn-danger btn-block" style="margin-top:8px;">
<i class="glyphicon glyphicon-trash pull-left"></i>
<span>Delete</span>
</button>
</li>
</ul>
</li>
</ul>
<div id="uploadProgress" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-warning" style="width:0%;" data-dz-uploadprogress>
<span>Please wait...</span>
</div>
</div>
</div>
</div>
<div id="uploadPrompt">Drag-and-drop a picture here</div>
</div>
I am initializing this code as a dropzone using the following JavaScript:
$(function () {
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var pictureDropZone = new Dropzone("div#myDropZone", {
url: "/pictures/upload",
clickable: true,
uploadMultiple: false,
autoProcessQueue: true,
previewTemplate: previewTemplate,
previewsContainer: "#previews",
init: function () {
this.on("complete", function (data) {
$('#pictureActions').show();
$('#uploadProgress').hide();
$('#uploadPrompt').hide();
});
},
uploadprogress: function (e, progress) {
$('#uploadProgress').css('width', progress);
},
removedfile: function () {
$('#previews').hide();
$('#uploadPrompt').show();
}
});
});
There are several problems though. If I click the text Drag-and-drop a picture here, the file picker does not open. If I click outside of the text, the file picker opens. Also, this code works for the initial process of choosing a file. However, if I click the "Pick..." button, the page does a post back. In reality, I was expecting the file picker to appear again. If I click the "Delete" button, and then choose a file again from the file picker, the picture, upload progress and action buttons never appear.
I feel like I'm screwing up the initialization of the dropzone somehow. What am I doing wrong? Why can't I choose another picture or delete a picture and choose another one or open the file picker if I click the prompt text?
I have changed your code
this.on("complete", function (data) {
$("#previews").show(); //This line added ... and it's worked...
$('#pictureActions').show();
$('#uploadProgress').hide();
$('#uploadPrompt').hide();
});
i think then line: $('#previews').hide(); you have hidden preview element, and this not change status when you append new image. :).
And this word but, You can see old picture you added, I think it's a new bug... I trying solute it... Have you idea for it.
http://jsfiddle.net/qek0xw1x/15/
Related
currently iam facing one issue if i upload a image the image getting upload. second time when i am trying to upload the image. The image is upload but the previous image is not showing up there only the current image is showing but in the preview i can see the previous image for example.
now I am uploading some more images in the left hand side the previous uploaded images not showing
Here is my html
<div class="panel-body text-center">
<img id="testImage" (dragover)="false"(dragend)="false"
(drop)="handleDrop($event)" class="images-item-upload" *ngFor='let item of urls' [src]="item.url" (click)="onClik(item);"/>
<label class="btn btn-default btn-block file-container">
<i class="fa fa-fw fa-upload"></i> Choose a file
<input type='file' [disabled]="urls.length >= 16" multiple (change)="readUrl($event);">
</label>
</div>
Here is my stackblitz link for the reference
In the upload history the previous upload images not showing only the current upload only showing
What I am doing wrong here why the image is not displaying
Ts code
addImage(canvasInst, imageUrls) {
if(imageUrls){
fabric.Image.fromURL(imageUrls, img => {
var oImg = img;
oImg.scaleToWidth(250);
oImg.scaleToHeight(250);
canvasInst.centerObject(oImg);
canvasInst.add(oImg).renderAll();
canvasInst.setActiveObject(oImg);
// canvasInst.toDataURL({ format: "png", quality: 0.8 });
});
this.updateLayers();
}
}
I got the anwser in my readUrl i have to remove my
this.urls= []
I am using the following snippet which allows a person to upload up to 3 files with a single upload button. While the file is being uploaded an animation runs in place of the upload button.
My requirement is that I need to prevent the user from clicking on any of the input field buttons while the file is getting uploaded. I do not wan't to use the hide() function for this. Is there a way in jQuery to stop the input field buttons from getting clicked on while the file is getting uploaded/the loading animation is running.
Recently started to use jQuery so still a beginner and hence would love to use a simple solution for this. Thanks!
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function(event) {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").hide();
}
})
});
});
</script>
My HTML code is below. The "p" class is used for {{ form.photo1 }}, {{ form.photo2 }} & {{ form.photo3 }} ;
<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
When the upload button, which the red button is pointing at, is
clicked an animation starts to run in its place while the file is
getting uploaded. During this I want to prevent anyone from clicking
on the choose file (), the blue arrow is pointing at it.
Try using prop to disable upload buttons
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function(event) {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").prop("disabled", "true");
}
})
});
});
In jQuery 1.6+ you can dynamically add the atrribute attr='disabled' or attr='readonly' to your input field until you confirm that your files are loaded:
// put this within the code that checks if the files are still loading
$(".UploadBtn").prop('disabled', true);
// within the code that checks if the files have successfully loaded, make sure to use the following
$(".UploadBtn").prop('disabled', false);
Also take a quick look at what prop does in this detailed answer.
I read about it but still I'm not able to make it work.
I have an image (empty heart) that I would like to change to a different image (full heart) in order to indicate it was added to the wish list.
here is my code:
<tbody class="mainImgs">
<div ng-repeat="party in showtop5" ng-class=party.name>
<img ng-src="{{party.image}}">
<h2 id="title">{{party.title}}</h2>
<h3 id="description">{{party.description}}</h2>
<button href="#" class="imageClick" ng-click="click(party.title, party.description, party.image)">
<img ng-src="../images/emptyHeart.png" id="heart" click="myFunction(party.name, imageClick)">
</button>
<img ng-src="{{party.img}}" id="pace">
</div>
</tbody>
and my script:
function myFunction(myclass1, myclass2){
document.getElementByClass(myclass1).getElementByClass(myclass2).getElementById("heart").src = "../images/fullHeart.png";
}
what did I do wrong?
without sending the class - and trying to find image only by id - t works only for the first object heart that is printed
I think if its just about changing image then it can be handled pretty straight forward:
In html
<button href="#" class="imageClick" ng-click="click(party.title, party.description, party.image)">
<img ng-src="{{imgPath}}" id="heart" ng-click="myFunction(party.name, imageClick)">
</button>
In Controller:
$scope.imgPath = "../images/emptyHeart.png";
$scope.myFunction= function (name,imageClick){
// use promise to monitor the server response of adding product to Wishlist
("YOUR_PROMISE_CALL").then(
function(success){
$scope.imgPath = "../images/fullHeart.png"; // Bingo !!
},
function(error){
// take appropriate action
},
)
}
I'm developing a small notifications-like module, where the user can see his 5 latest activities that are logged in the DB (MSSQL). The values that I need are all there, but for some reason knockout binding is not working. Here are code snippets:
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>
For now, I only want to display random text for every item that is in the observableArray.
ViewModel is the following:
var layoutLogsModel = {
notification: ko.observableArray()
};
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data);
});
}
And every time I call this function, the list is empty (IMAGE)
(the function is called on click, and absolutely no errors are shown in the console).
What is it that I am doing wrong?
EDIT:
The thing was, I forgot to execute ko.applyBindings for that viewModel. Then, I changed the HTML to look like this:
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-user" style="color: green;"></i>
<span data-bind="text: $data"></span>
</a>
</div>
</ul>
Aslo, I modified the get function slightly, like this:
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data.Notification);
});
}
(changed data to data.Notification based on the MVC model property that contains the array)
After all that, the data was available immediately.
try removing the layoutLogsModel from the foreach, you are already using it with the binding "with", so eveything in that div will be part of layoutLogsModel.
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>
I have a listing of articles here, and I can't figure out how to execute the ng-click function calls on every new article inside the ng-repeat. Right now it works for existing articles, but when new articles are added dynamically (via AJAX), I need those to have the same functionality too.
For example: the ng-click function calls on the "+" sign to reveal social buttons seem to not work once new articles are inserted via AJAX (ie: delete articles, and let list be populated again with new elements)
Does AngularJS provide any tools to do that?
<div>
<div>
<input type="text" ng-model="search">
<span>{{filtered.length}} article(s)</span>
</div>
<div article-listing ng-repeat="article in filtered = (wikiArticles | filter:search)">
<!--Individual article begin-->
<span>
{{article.title}}
</span>
<div>
<a ng-click="articles.removeArticle($index)" title="Delete">
<span>✖</span>
</a>
<a ng-click="articles.toggleShare(article)">
<span class="plus-sign" title="Share">✖</span>
<div social-share ng-show="article.socialShare">
<div ng-click="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:title="{{article.title}}" addthis:description="{{article.extract}}" addthis:url="{{article.url}}">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_reddit"></a>
<a class="addthis_button_hackernews"></a>
</div>
</div>
</a>
</div>
<div>{{article.extract}}</div>
<!--Individual article end-->
</div>
</div>
Code for ng-click calls that don't seem to work for new article insertions
$scope.articles = (function() {
return {
shuffleArticles : function() {
$scope.wikiArticles.reverse();
},
removeArticle : function(index) {
$scope.wikiArticles.splice(index, 1);
$scope.fireAPICalls();
},
toggleShare : function(currArticle) {
var previousState = currArticle.socialShare;
angular.forEach($scope.wikiArticles, function(article) {
article.socialShare = false;
});
currArticle.socialShare = previousState ? false : true;
}
}
})();
Your ng-click calls are actually working- you can watch the ng-show toggle in the debugger.
The problem is that there is nothing to display on the new items you add.
The articles you initially add all have their icons populated with the .addthis classes, for instance here's your Facebook icon element:
<a class="addthis_button_facebook at300b" title="Facebook" href="#">
<span class=" at300bs at15nc at15t_facebook">
<span class="at_a11y">Share on facebook</span>
</span>
</a>
at300bs includes the following css which displays the image:
background: url(widget058_32x32.gif) no-repeat left!important;
However as you add new items, you aren't including the needed .addthis classes to them. Their elements look like this:
<a class="addthis_button_facebook"></a>
So ng-show has nothing to display (it shows a 0x0 div).
Add the .addthis classes to your new elements as you add them and you'll be all set.