Track basic HTML form post progress - javascript

I have a basic HTML form that submits normally, no ajax at all. This form submits to the same file using regular post. I don't use AJAX because the form has 12 text fields and a minimum of 1 image but possibility of up to 26 images and ajax can't do both forms and images at once, I have to save to a DB and it's a lot of extra work over AJAX.
The problem is I need to track form upload progress somehow. Most programmers know to look in the lower left or right corner of their browsers to see form submission progress. But most people don't know this.
So I want to display a progress bar. The problem is all progress bars I have found use XHR requests by ajax. Since the form isn't ajax I can't seem to find a way to track the progress.
So is there a way to intercept the browsers internal submission progress to see the percentage of upload completed for the form?
EDIT
I've tried the following code at the start of the page but it doesn't work. I guess because either XHR is for AJAX or the browser has it's own that needs Hijacking, but I have no clue what that would be called or how to get to it if so:
xhr = new XMLHttpRequest();
xhr.upload.addEventListener( "progress", function ( evt )
{
if( evt.lengthComputable )
{
var progressPercent = ( evt.loaded / evt.total ) * 100;
console.log( value );
}
}, false );

This is some type of progressive enhancement i sometimes use. It will still make an ajax request but in the most transparent way as possible both for the user and the developer.
The key is to post the exact same data as posted by a regular form thanks to FormData, and to replace the whole document when we receive the full page reponse form the server. This is an untested simplified version :
function enhanceFormWithUploadProgress(form, progress) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.
//testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
var xhr = new XMLHttpRequest();
if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
return;
}
form.addEventListener('submit', function(e) {
//prevent regular form posting
e.preventDefault();
xhr.upload.addEventListener('loadstart', function(event) {
//initializing the progress indicator (here we're displaying an element that was hidden)
progress.style.display = 'block';
}, false);
xhr.upload.addEventListener('progress', function(event) {
//displaying the progress value as text percentage, may instead update some CSS to show a bar
var percent = (100 * event.loaded / event.total);
progress.innerHTML = 'Progress: ' + percent.toFixed(2) + '%';
}, false);
xhr.upload.addEventListener('load', function(event) {
//this will be displayed while the server is handling the response (all upload data has been transmitted by now)
progress.innerHTML = 'Completed, waiting for response...';
}, false);
xhr.addEventListener('readystatechange', function(event) {
if (event.target.readyState == 4 && event.target.responseText) {
//we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
var newDocument = document.open('text/html', 'replace');
newDocument.write(event.target.responseText);
newDocument.close();
} else {
throw new Error('Error in the response.');
}
}, false);
//posting the form with the same method and action as specified by the HTML markup
xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
xhr.send(new FormData(this));
});
};

HTML:
<form method="post">
<button type="submit">Submit</button>
</form>
JavaScript:
/*
Show a progress element for any form submission via POST.
Prevent the form element from being submitted twice.
*/
(function (win, doc) {
'use strict';
if (!doc.querySelectorAll || !win.addEventListener) {
// doesn't cut the mustard.
return;
}
var forms = doc.querySelectorAll('form[method="post"]'),
formcount = forms.length,
i,
submitting = false,
checkForm = function (ev) {
if (submitting) {
ev.preventDefault();
} else {
submitting = true;
this.appendChild(doc.createElement('progress'));
}
};
for (i = 0; i < formcount; i = i + 1) {
forms[i].addEventListener('submit', checkForm, false);
}
}(this, this.document));
Demo: http://jsfiddle.net/jsbo6yya/
Credit: https://gist.github.com/adactio/9315750

Related

jQuery How to detect if file is being currently uploading (event is runing)

I written this code:
var fi = self.find('.file');
fi.on('change', function() {
if(fi.prop('files').length === 1) {
var file = fi.prop('files')[0],
name = file.name,
ext = name.split('.').pop().toLowerCase(),
size = (file.size / 1048576).toFixed(2),
type = file.type;
if($.inArray(ext, ['jpg', 'png', 'gif']) == -1) {
return false;
}
if($.inArray(type, ['image/jpeg', 'image/png', 'image/gif']) == -1) {
return false;
}
if(size > 1.2) {
return false;
}
ajax(createData(file));
return false;
}
return false;
});
I am allowing to upload only 1 file at the time ( from html side, js side and php side of view ), but with this script if user selects bigger size file, lets say 2+ MB and he is really fast clicker he can select another file and it creates second event and both files are being uploaded to the server which causes chaos and problems. Also i will be implementing drag and drop upload option so as a beginner javascript coder im asking the community if there is a way to:
Prevent from triggering script while file is being already uploaded ( i dont mean methods like hide input or diable it or take off event listener for a while, i mean method that detects if event is running and prevent executing script ). I tried things like default prevent or stop propagation but these dont work obviously.
Adding a button that will cancel on going script ( meaning stop file uploading and "clean it up" so user can safetly try again )
Thank you in advance for all your hints and guidance ;)
I worked on this recently for one of my side projects. Here's a code sample:
var fileReader = new FileReader();
var fileFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
var imageObject = { valid: false };
fileReader.onload = function (fileReaderEvent) {
imageObject.data = fileReaderEvent.target.result;
};
var loadImage = function() {
if (element[0].files.length === 0) {
return;
}
var file = element[0].files[0];
imageObject.filename = file.name;
if (!fileFilter.test(file.type)) {
imageObject.error = 'You must select a valid image!';
imageObject.valid = false;
return;
}else{
imageObject.error = '';
imageObject.valid = true;
}
fileReader.readAsDataURL(file);
};
element.on('change', loadImage);
}
This was from an AngularJS project so I've removed all the angular components but it should be pretty easy to add in the necessary JQuery code.

Non-ajax post using Dropzone.js

I'm wondering if there's any way to make Dropzone.js (http://dropzonejs.com) work with a standard browser POST instead of AJAX.
Some way to inject the inputs type=file in the DOM right before submit maybe?
No. You cannot manually set the value of a <input type='file'> for security reasons. When you use Javascript drag and drop features you're surpassing the file input altogether. Once a file is fetched from the user's computer the only way to submit the file to the server is via AJAX.
Workarounds: You could instead serialize the file or otherwise stringify it and append it to the form as a string, and then unserialize it on the server side.
var base64Image;
var reader = new FileReader();
reader.addEventListener("load", function () {
base64Image = reader.result;
// append the base64 encoded image to a form and submit
}, false);
reader.readAsDataURL(file);
Perhaps you're using dropzone.js because file inputs are ugly and hard to style? If that is the case, this Dropzone.js alternative may work for you. It allows you to create custom styled inputs that can be submitted with a form. It supports drag and drop too, but with drag and drop you cannot submit the form the way you want. Disclaimer: I am author of aforementioned library.
So, if I understood correctly you want to append some data (input=file) before submit your form which has dropzone activated, right?
If so, I had to do almost the same thing and I got it through listening events. If you just upload one file, you should listen to "sending" event, but if you want to enable multiple uploads you should listen to "sendingmultiple". Here is a piece of my code that I used to make this work:
Dropzone.options.myAwesomeForm = {
acceptedFiles: "image/*",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
init: function() {
var myDropzone = this;
[..some code..]
this.on("sendingmultiple", function(files, xhr, formData) {
var attaches = $("input[type=file]").filter(function (){
return this.files.length > 0;
});
var numAttaches = attaches.length;
if( numAttaches > 0 ) {
for(var i = 0; i < numAttaches; i++){
formData.append(attaches[i].name, attaches[i].files[0]);
$(attaches[i]).remove();
}
}
});
[..some more code..]
}
}
And that's it. I hope you find it helpful :)
PS: Sorry if there's any grammar mistakes but English is not my native language
For future visitors
I've added this to dropzone options:
addedfile: function (file) {
var _this = this,
attachmentsInputContainer = $('#attachment_images');
file.previewElement = Dropzone.createElement(this.options.previewTemplate);
file.previewTemplate = file.previewElement;
this.previewsContainer.appendChild(file.previewElement);
file.previewElement.querySelector("[data-dz-name]").textContent = file.name;
file.previewElement.querySelector("[data-dz-size]").innerHTML = this.filesize(file.size);
if (this.options.addRemoveLinks) {
file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\">" + this.options.dictRemoveFile + "</a>");
file._removeLink.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
if (file.status === Dropzone.UPLOADING) {
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function () {
return _this.removeFile(file);
});
} else {
if (_this.options.dictRemoveFileConfirmation) {
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function () {
return _this.removeFile(file);
});
} else {
return _this.removeFile(file);
}
}
});
file.previewElement.appendChild(file._removeLink);
}
attachmentsInputContainer.find('input').remove();
attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find('input').attr('name', 'files');
return this._updateMaxFilesReachedClass();
},
This is default implementation of dropzone's addedfile option with 3 insertions.
Declared variable attachmentsInputContainer. This is invisible block. Something like
<div id="attachment_images" style="display:none;"></div>
Here I store future input with selected images
Then in the end of function remove previously added input(if any) from block and add new
attachmentsInputContainer.find('input').remove();
attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find('input').attr('name', 'files');
And now, when you send form via simple submit button, input[name="files"] with values will be send.
I've made this hack because I append files to post that maybe not created yet
This is what I used for my past projects,
function makeDroppable(element, callback) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', true);
input.style.display = 'none';
input.addEventListener('change', triggerCallback);
element.appendChild(input);
element.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.add('dragover');
});
element.addEventListener('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove('dragover');
});
element.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove('dragover');
triggerCallback(e);
});
element.addEventListener('click', function() {
input.value = null;
input.click();
});
function triggerCallback(e) {
var files;
if(e.dataTransfer) {
files = e.dataTransfer.files;
} else if(e.target) {
files = e.target.files;
}
callback.call(null, files);
}
}

How to abort an XHR connection when there are multiple running simultaneously?

I'm working on a file uploader, where about 10 files upload at the same time via a for loop.
Now I am trying to create a cancel button to cancel ALL the uploads, however with my current code, only the very last upload will cancel.
I've included my boiled down code, but basically its a loop which goes through an array of images (theAttach) and for each image it sets up an xhrAttach to send the images. So about say 10 images start uploading at the same time.
If a cancel button is pressed, I run the command xhrAttach.abort(); but only the very last image aborts.
Any ideas?
for (var i=0;i<theAttach.length;i++)
{
var xhrAttach = Ti.Network.createHTTPClient();
xhrAttach.timeout = 15000;
xhrAttach.onsendstream = function(e){
};
xhrAttach.onreadystatechange = function() {
if (xhrAttach.readyState != 4) return;
if ((i == theAttach.length) && (xhrAttach.readyState == 4))
{
}
};
xhrAttach.onerror = function() {
};
xhrAttach.open('POST', url, true);
xhrAttach.setRequestHeader('User-Agent', theuseragent());
xhrAttach.send(AttachmentTransmitArray);
}
Cocco nailed it! He suggested I cache each xhr into a container array, therefore I could access the individual xhr and abort it that way ie xhrAttach[i].abort()
I did this and it works perfectly! Thanks cocco!

login into the site with my javascript

i'm trying to login into the site with the following javascript. But, i'm loading only the complete page. I'm developing windows 8 app
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
document.getElementById("bt_login").addEventListener("click", login, false);
}
});
})();
function login() {
var xhrDiv = document.getElementById("xhrReport");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = dataLoaded;
xhr.open("POST", "http://www.160by2.com", true, <username>, <password>);
xhr.send();
function dataLoaded() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// OK
xhrDiv.innerHTML = window.toStaticHTML("response:" + xhr.responseText);
} else {
// not OK
xhrDiv.innerText = "failure";
}
}
};}
I want to dsiplay in xhrdiv.innerHTML as "LOGIN SUCCESS" or "LOGIN ERROR"
EDIT:
I tried the following code:
iframe = document.getElementById("ifra_op");
iframe.setAttribute("src", "http://www.160by2.com/index");
document.getElementById("op").appendChild(iframe);
iframe.contentWindow.document.getElementById("MobileNoLogin") = "<mobno>";
iframe.contentWindow.document.getElementById("LoginPassword") = "<pass>;
iframe.contentWindow.document.getElementsByName("LoginForm").click();
But, there is an error. It says "Javascript run time error:math is undefined"
"math" comes from the website. I don't know how to handle this. Also, the permission is denied. Why is that so?
You need to make sure you have a service (something like a web service) in the remote server to process the request.
In here what you can do is.
Create an iframe and set the src to 160by2;
Access the webpage using iframe.contentwindow, inject your code to fill up the forms and trigger the submit button.
Parse the received html to verify your login.
Use jquery , makes life easier.
var iframe = $("#ifra_op");
$(iframe).attr("src", "http://www.160by2.com/index");
$(iframe).attr("onload","submitForm();");
function submitForm(){
$(iframe.contentWindow.document).find("#MobileNoLogin").val("9999");
$(iframe.contentWindow.document).find("#LoginPassword").val("pass");
$('#button').click();
}

Simple client-side framework/pattern to simplify doing async calls?

We're currently not using any serious client side framework besides jQuery (and jQuery.ui + validation + form wizard plugins).
A problem that surfaces a few times in our code is this:
We have a button that initiates an Ajax call to the server.
While the call is taking place, we display a "loading" icon with some text
If the server returns a result too quickly (e.g. < 200 ms), we "sleep" for 200 millis (using setTimeout()), to prevent flickering of the waiting icon & text.
After max(the call returns, a minimal timeout), we clear the loading icon & text.
We then either display an error text, if there was some problem in the ajax call (the server doesn't return 500, but a custom json that has an "error message" property. In fact, sometimes we have such a property in the response per form field ... and we then match errors to form fields ... but I digress).
In case of success, we do ... something (depends on the situation).
I'm trying to minimize code reuse, and either write or reuse a pattern / piece of code / framework that does this. While I probably won't start using an entire new heavy-duty framework just for this use case, I would still like to know what my options are ... perhaps such a client-side framework would be good for other things as well. If there's a lightweight framework that doesn't require me to turn all my code upside down, and I could use just on specific cases, then we might actually use it instead of reinventing the wheel.
I just recently heard about Ember.js - is it a good fit for solving this problem? How would you solve it?
$(function(){
var buttonSelector = "#button";
$('body').on({'click': function(evt){
var $button = $(this);
$button.toggleClass('loading');
var time = new Date();
$.get('some/ajax').then(function(data,text,jqXhr){
// typical guess at load work
$button.empty();
$(data).wrap($button);
}).fail(function(data,text,jqXhr){
alert("failed");
}).done(function(data,text,jqXhr){
var elapsed = new Date();
if((elapsed - time) < 200){
alert("to short, wait");
}
$button.toggleClass('loading');
});
}},buttonSelector,null);
});
Just wrap the $.ajax in your own function. that way you can implement your own queing etc. I would suggest to do a jquery component for this. It can get pretty powerful, for example you can also pass http headers etc.
Regarding frameworks it depends on your requirements.
For example, you may consider Kendo UI, it has good framework for creating data sources:
http://demos.kendoui.com/web/datasource/index.html.
Working Sample Code (well, almost)
I was going for something along the lines of #DefyGravity's answer anyway - his idea is good, but is still pseudo-code/not fully complete. Here is my working code (almost working demo, up to the Ajax URL itself, and UI tweaks)
The code & usage example:
jQuery.fn.disable = function() {
$(this).attr("disabled", "disabled");
$(this).removeClass("enabled");
// Special handling of jquery-ui buttons: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
$(this).filter("button").button({disabled: true});
};
jQuery.fn.enable = function() {
$(this).removeAttr("disabled");
$(this).addClass("enabled");
// Special handling of jquery-ui buttons: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
$(this).filter("button").button({disabled: false});
};
function AjaxCallbackWaiter(ajaxUrl, button, notificationArea, loadingMessage, errorMessage, inSuccessHandler, inFailureHandler) {
// Every request that takes less than this, will be intentionally delayed to prevent a flickering effect
// http://ripper234.com/p/sometimes-a-little-sleep-is-ok/
var minimalRequestTime = 800;
var loadingIconUrl = 'http://loadinfo.net/images/preview/11_cyrcle_one_24.gif?1200916238';
var loadingImageContent = $("<img class='loading-image small' src='" + loadingIconUrl + "'/><span class='loading-text'>" + loadingMessage + "</span>");
var errorContentTemplate = $("<span class='error ajax-errors'></span>");
var requestSentTime = null;
button.click(clickHandler);
function displayLoadingMessage() {
clearNotificationArea();
notificationArea.html(loadingImageContent);
}
function clearNotificationArea() {
notificationArea.html("");
}
function displayError(message) {
var errorContent = errorContentTemplate.clone(errorContentTemplate).html(message);
notificationArea.html(errorContent);
}
function ajaxHandler(result) {
var requestReceivedTime = new Date().getTime();
var timeElapsed = requestReceivedTime - requestSentTime;
// Reset requestSentTime, preparing it for the next request
requestSentTime = null;
var sleepTime = Math.max(0, minimalRequestTime - timeElapsed);
function action() {
clearNotificationArea();
button.enable();
if (result) {
inSuccessHandler();
} else {
displayError(errorMessage);
inFailureHandler();
}
}
if (sleepTime <= 0) {
action();
} else {
setTimeout(action, sleepTime);
}
}
function failureHandler() {
}
function clickHandler(){
if (requestSentTime !== null) {
logError("Bad state, expected null");
}
requestSentTime = new Date().getTime();
displayLoadingMessage();
button.disable();
$.get(ajaxUrl, 'json').then(ajaxHandler, failureHandler);
}
}
// Usage:
var ajaxUrl = 'FILL IN YOUR OWN URL HERE';
var button = $("#clickme");
var notificationArea = $(".ajax-notification-area");
var waitingMessage = "Doing Stuff";
var errorMessage = "Not Good<br/> Please try again";
$(document).ready(function(){
new AjaxCallbackWaiter(
ajaxUrl,
button,
notificationArea,
waitingMessage,
errorMessage,
function(){
alert("All is well with the world");
},
function(){
alert("Not good - winter is coming");
});
});

Categories