Develop Reference

How to wait a thread in ajax/js until user selects a file during file upload?

Here is the code and it'll help you understand the problem better.
HTML Code:-
{{#each uploadsData as |row|}}
<div {{action 'upload' row uploadsData}} class="mdl-cell mdl-cell--12-col mdl-grid kyc-uploads__form_uploads_documents-grid">
<div class="mdl-cell--2-col mdl-cell--hide-phone kyc-uploads__form_uploads_documents-grid_icon">
{{inline-svg row.svg}}
</div>
<div class="mdl-cell--10-col mdl-cell--12-col-phone kyc-uploads__form_uploads_documents-grid__text">
<span class="mdl-cell--hide-desktop" style="padding: 5%;">{{inline-svg row.svg}}</span>
<span class="kyc-uploads__form_uploads_documents-grid__text_title">{{row.heading}}</span>
<span class="kyc-uploads__form_uploads_documents-grid__text_subText">
{{if (eq row.optional true) "(Optional)" ""}}
</span>
<span class="kyc-uploads__form_uploads_documents-grid__text_select {{if (eq row.isSubmitted true) "kyc-uploads__form_uploads_documents-grid__text_select_completed" ""}}">
<i class="material-icons">done</i>
</span>
</div>
</div>
<input type="file" style="visibility: hidden; display: none;" id="{{row.key}}" name="{{row.key}}" value="{{inputFile}}" />
{{/each}}
JS code:-
upload(row, uploadsData) {
var el =$('#'+row.key);
el.click();
var file = el[0].files[0];
console.log(file);
if(file != null){
//do something...
});
this.controller.set('isCompleted', completionStatus);
}
When user click on el.click() for file upload it opens a dialog box to select files.
Now here is the trick one thread automatically come out of the loop because file is not selected yet and the other one is asking user to select a file. So do you have any idea how can i wait to check if a file is null until user selects a file??

Loading animation is not working

So I am using the following jQuery snippet to make a loading animation run (created in CSS) when a file is selected in an input field and then an upload button is clicked.
The form has 3 input fields with 3 upload buttons and is quite flexible. For e.g if a user selects a file in the first input field but clicks on the second upload button the loading animation should run around the first input field only. Another example is that if a user selects a file in the first input field and the second input field but clicks on the third upload button then the loading animation should run in the first and second input fields only.
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(this).next(".loader").show();
$(this).next(".loader").find(".spinner").show();
$(this).next(".loader").find(".UploadBtn").hide();
}
});
});
});
The code fails to run in the IF statement function. If i change the code (mentioned below) it will make the animation run but it ends up making the loading animation run in all 3 selection fields even if only one file was selected. This is not what is required but does tell me that the part of the code which has the IF statement breaks down in the code above;
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").hide();
}
})
});
});
I am a beginner level coder and I have spent hours trying to fix this issue but nothing worked. Your help is greatly appreciated!
HTML snippet added as per recommendation
(It also has some Python code which was done by my friend) form.photo1, 2 and 3 have class = "p" ;
<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">

Prevent click on form button while file is loading

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.

Change img src value on page load

I have a piece of jQuery that changes the value of a hidden field when the user form is saved, as below:
$('button').click(function () {
$("#avatar-val").val($(".avatar-view>img").prop('src'));
});
I also need it to work in reverse (kind of). So that when the user goes back to there user page, it will take the value of whats in the hidden field and put it into the img src of the default avatar image (in the div avatar-view, picture.jpg)
I tried add the below but I can't get it to work
$(document).ready(function() {
$(".avatar-view>img").src($("#avatar-val").prop('src'));
});
<div class="avatar-view" title="Change the avatar">
<button class="btn btn-primary btn-block avatar-save">
Change Avatar
</button>
<img src="/scripts/cropper/img/picture.jpg" alt="Avatar" >
</div>
<input name="avatar" value="../cropper/img/20150729105134.png" id="avatar-val" type="hidden">

.src() doesn't exists in jQuery, You should use .prop(propertyName, value) function
Set one or more properties for the set of matched elements.
And to read input value use .val() method.
Use
$(".avatar-view > img").prop('src', $("#avatar-val").val());
$(document).ready(function() {
$(".avatar-view > img").prop('src', $("#avatar-val").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="avatar-view" title="Change the avatar">
<button class="btn btn-primary btn-block avatar-save">
Change Avatar
</button>
<img src="https://www.gravatar.com/avatar/7839089cd91dc5cc5eb1e0cdbf3312ed" alt="Avatar">
</div>
<input name="avatar" value="https://www.gravatar.com/avatar/1a7926d223f025242d8ec5b120cc3e68" id="avatar-val" type="hidden">

You can use .attr(attributename, value) instead of src()
$(".avatar-view > img").attr('src' ,$("#avatar-val").val());
--Working DEMO--

<img src='images/sample.jpg' />
if you want to change from page load then make html image tag to runat server
<img id='myImage' runat='server' src='images/sample.jpg' />
and write bellow code on page load
myImage.src = 'image path here';

Uploading a file from a web app with dropzone.js

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/