Develop Reference

Import file and submit when popup closes AngularJS

I am trying to submit the file I am importing once I click OK on system's window for uploading files, but i don't know how to do it... This is what I've done so far:
<input type="file" id="file-input" style="display:none" />
<button class="btn pull-right" ng-click="submitCashierFile()">Import</button>
JS:
$scope.submitCashierFile = function () {
angular.element('#file-input').trigger('click');
// I should have something like this next i guess?
$scope.cashierfile.upload = Upload.upload({
url: config.baseAddress + 'test/uploadCashierExcel',
data: { file: $scope.cashierfile }
});
$scope.cashierfile.upload.then(function (response) {
$timeout(function () {
$scope.cashierfile.result = response.data;
toastService.success('You have added .xlsx');
});
}, function (response) {
toastService.error(response);
});
};
So I triger the click, open the modal to choose file, the problem for me is how to submit it on clicking OK in that modal. Any suggestions?

Your question is not clear to me, but I will give it a shot base on what I did understand.
You should map the control's onchange event. This will fire right after selecting the file to upload.
Then you should do the actual upload of the file.
When I need to do this task, I drop use of Angular and go for HTML5 file upload mechanism. That one is working as you describe...

Get image name (and other file properties) onclick in dropzone.js

In dropzone.js after upload all images, how i can get file name when clicking one of them?
http://runnable.com/me/VN-nEtJXQqlk07H4

You can access the HTML of the file preview in any of the events with file.previewElement and bind "onclick" event listener.
This works for me, in a similar situation:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("thumbnail", function(file) {
console.log(file); // will send to console all available props
file.previewElement.addEventListener("click", function() {
alert(file.name);
});
});
}
};
I was displaying files from the server, recommended from documentation addedfile event didn't fire, that's why I used thumbnail instead (fires when thumbnail has been generated).
Result (after clicking on filename):
Tips from documentation:
To access the preview html of a file, you can access
file.previewElement. For example:
myDropzone.on("addedfile", function(file) {
file.previewElement.addEventListener("click", function() {
myDropzone.removeFile(file);
});
});
Other available file properties:

Form Has No Javascript Functionality When Displayed In Colorbox

I have a form with drop-down hierarchical fields with functionality derived from a JavaScript plugin called mcDropdown jQuery Plug-in.
The actual form is on a secondary page (Test.php) and set up to display on the main page through a Colorbox popup with the results also displayed in the Colorbox upon form submission.
The form submits and displays correctly in the Colorbox in its native HTML format when the JavaScript is removed (i.e. just using plain drop-down boxes).
However, when the Javascript is implemented in the form allowing the hierarchial drop-down structure of the fields there is no JS functionality when rendered through Colorbox.
Since the actual page that the form is on (Test.php) works fine by itself with the Javascript, there appears to be some issue rendering the JS through the Colorbox.
My research has indicated that this may be due to trying to access an element before it has been loaded into the document.
The Colorbox website states that this can be resolved by moving the JavaScript into ColorBox's onComplete callback; however, even with the example given, I cannot figure out how to do this correctly as I am a complete novice when it comes to JS.
Here is the drop-down script on the secondary page that has the form and ties into the external plugin (note that there are three fields in this form that use this JS hierarchical configuration):
<script type="text/javascript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",
{
targetColumnSize: 3,
}
);
$("#category1").mcDropdown("#categorymenu1",
{
targetColumnSize: 3,
}
);
$("#category2").mcDropdown("#categorymenu2",
{
targetColumnSize: 3,
}
);
});
</script>
Here is the Colorbox script on the main page that opens the secondary page in the Colorbox window:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit();
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The three external files are: jquery.mcdropdown.js, jquery-1.2.6.min.js and jquery.bgiframe.js.
How can this Colorbox script on the main page be modified so the JS functionality of the form is preserved when displayed through Colorbox?
Thank you in advance for any detailed answers for this beginner.

Here is the answer:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The respective JavaScript functions for each drop-down box in the JS form are integrated into the Colorbox onComplete: function() so each of these form elements is loaded before it is accessed through Colorbox.

Opening Shadowbox from javascript function

I'm trying to open Shadowbox from within a radio button onclick event on a asp.net web form without success. I was initially opening it using a button click which worked fine, but now need to make sure it happens when the radio button option is selected. I then tried to click the button in javascript (button.click()), but that only worked in IE and Newer versions of firefox. So I have opted to use Shadowbox.open, but it is causing some issues. Here is my code:
if (yes.checked == true)
{
var url = 'http://localhost:52963/items.aspx';
Shadowbox.open( { content: url,
type: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});
}
This just seems to bring up the overlay but doesn't open the web page inside it. Anyone know where I'm going wrong?

Apparently I needed to add a player as well as a type. So the amended code is this:
Shadowbox.open( { content: url,
type: "iframe",
player: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});

I had a lot of trouble with this, I tried firing click using .trigger('click') from jquery , but that didnt work in chrome (worked in firefox)
Turns out the answer is pretty simple, similar to e-on answer, but dialed down.
Your images are in a normal shadowbox gallery
<div class="gallery">
<a href="/img1.jpg" rel="shadowbox[gallery1]" >
<img id="Image0" src="/img1.jpg" />
</a>
<a href="/img2.jpg" rel="shadowbox[gallery1]" >
<img id="Image1" src="/img2.jpg" />
</a>
</div>
Then your clickable link
Click to view all images
I wired up the clickable link via jquery in a document.ready call
$('.galleryLauncher').click(function () {
//gallery to launch
var id = $(this).attr('gallery');
//get the first item out of the cache
var content = Shadowbox.cache[1].content;
//default options object
var options = {};
//now we can open it
Shadowbox.open({
content: content,
player: "img",
gallery: id,
options: options
});
return false;
});

upgrade window.open popup to jQuery UI Dialog

I've created a form with a button. If users click the button, browser will generate a popup for user to upload and crop a photo.
onclick="window.open('upload.php');"
if uploaded
window.opener.document.getElementById
the popup will return the cropped pic to the opener window (form)
document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";
Finally, the popup will generate a "Use this pic" button.
Now, I want to upgrade this popup to jQuery Dialog to make it polish. How can I do that?
http://jqueryui.com/demos/dialog/#default

Try Using a Modal Form in which you can call the dialog for user to upload & crop the image and on clicking Use this pic on the dialog; return to your page and continue your application.
Better performances, you can use Jquery Modal Form with lighbox for a better UI.
Cheers!!!

What is the problem?
Take upload.php's code (the stuff within the BODY element) and put it inside the caller page, within a DIV.
Then apply a dialog with jQuery on that DIV. Then just activate that dialog when needed.
Now, as for the code itself - I'm sure you need to re-wire a few things but the idea is very simple and I really don't understand why this question has a bounty of +100 reputation, really. Not that I mind having it haha!

I hope I got what exactly you're trying to achieve.
Here is jsfiddle example: http://jsfiddle.net/nNw33/3/
Here is the code:
$(document).ready(function () {
$('#initUpload').click(function (event) {
$('#Dialog').dialog();
setTimeout(function () {
// upload completes
$('#errMsg')
.html("<input type=\'button\' value=\'Use this pic\'>")
.click(function () {
$('#Dialog').dialog('close');
});
}, 1500);
});
});
HTML:
<input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
Upload content here
<div id="errMsg"></div>
</div>

You should read this cute plugin, which allows you to upload files asynchroniously.
http://malsup.com/jquery/form/#options-object
Add following in body whereever on page it fits:
<button onclick="openPopup()">Show dialog</button>
<div id="modalFormDia"><!-- blank --></div>
Add following to head to load plugin. Nice example usage here
<script src="http://malsup.github.com/jquery.form.js"></script>
It works with a hidden iframe, submitting the results to your backend without opening any windows.
This way everything can be done in one 'window' or, lets make that the dialog popup youre probably looking for
Grab sample code from a fiddle here. Following code can be put anywhere as well, globally accessible
function onComplete(xhr) {
// Lets expect that the server sends back
// the URL pointing to uploaded image, an error if failed
if (xhr.responseText.match("error")) {
// failed
$("#feedback").html("Upload failed: " + xhr.responseText);
} else {
// uploaded
$("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
// image accepted, close dialog and set the image on main page
diaDom.dialog('close')
$('#targetOnPage') // ....
});
$('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');
}
}
function openPopup() {
// get the dialog DOM node (if first time, create)
var diaDom = $('#modalFormDia')
diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
buttons: {
"Cancel": function() {
$(diaDom).dialog('close');
}
},
closeOnEscape: false,
autoOpen: true,
modal: true,
title: 'Image Uploader'
});
// setup form with hooks
$('#myForm').ajaxForm({
beforeSend: function() {
$('#feedback').html('Upload starting')
},
complete: onComplete
});
}​