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
});
}
Related
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...
I'm using dropzone.js to upload files to the server. I included the js and css files and the "drag zone" is within a modal window that opens on the click of a button (the modal includes more elements that are not relevant here)
The problem I'm facing is that, inside the modal dialogue the "add file" section does not get triggered. Nothing happens when clicking on it, neither am I able to drag and drop files.
I saw a similar problem in another thread, but the solutions provided there didn't work for me (here: Using Dropzone.js inside Bootstrap modal).
I have been looking for an answer for days with no luck. Any ideas will be welcome.
This is my code
CSHTML:
[...]
<div class="W100pc">
<div class="FormUnit W045pc AdjustedWidth">
<div id="DropzoneElement" class="dropzone">
<div class="dz-message">Add file here</div>
</div>
</div>
</div>
[...]
JS:
[...]
$(document).ready(function() {
Dropzone.autoDiscover = false;
//Simple Dropzonejs
$("#DropzoneElement").dropzone({
maxFilesize: 100,
url: window.doSomethingHere,
addRemoveLinks: true,
success: function(file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function(file, response) {
file.previewElement.classList.add("dz-error");
}
});
}
[...]
Thanks for your help.
You should subscribe to the shown.bs.modal event this event is fired when the modal has been made visible to the user. Initialize the Dropzone in this event.
$('#myModal').on('shown.bs.modal', function (e) {
// Initialize Dropzone
});
I have the following situation on a web application.
A dialog is built and opened on the fly when clicking on a link:
var dialogInitiator = $("<div id='dialog-initiator' style='background-color: "+bgcolor+";'>Loading...</div>");
dialogInitiator.appendTo(parentFrame);
dialogInitiator.dialog({
modal:true,
autoOpen: false
}).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE) {
dialogInitiator.dialog('close');
}
evt.stopPropagation();
});
dialogInitiator.dialog('open');
Right after that, I load a new html page into the dialog, with an < object >, like this:
var objectFrame = $('<object style="border: 0;width:'+(dlwidth-30)+'px;min-height:'+(dlheight-46)+'px;" type="text/html" style="overflow:auto;" data="'+url+'"></object>');
dialogInitiator.html(objectFrame);
Now, the "url" variable contains a link to this new html document. When that page is ready, it will focus on an input field. This prevents the ESCAPE key from closing the dialog. So, I am trying to manually trigger the .dialog('close') event on escape keypress.
I do the following, from within the loaded document:
$('#dialog-initiator', window.parent.document).dialog('close');
It get the following error:
"Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
Strange thing is, when i call:
console.log( $('#dialog-initiator', window.parent.document).html() );
it shows me the html from the dialog. So it actually IS initiated.
Well, I have tried to fix this error with the help of Google, but without success. I guess my situation is quite specific.
Note: we are forced to use the technique with loading this whole webpage into the dialog due to older functionality we used in modalDialogs. Since they are depricated in the latest Google Chrome, we've built a temporary solution with jQuery dialog.
I hope someone can help me out. I appreciate it!
You can try a global method created after the modal is created
dialogInitiator.dialog({
modal: true,
autoOpen: false,
create: funtion(e,ui) {
window.closeMyDialog = function() {
$('#dialog-initiator').dialog('close');
};
}
})...
Then call it by doing window.parent.closeMyDialog();.
Why not use JQuery UI? It's easier than making your own.
http://jqueryui.com/dialog/#default
I have an HTML form field that is going to take the url for an image of mine. I have (in a different section of my site) a media library where users can opload and organize their images.
Now I want to be able to open this media library either in a new window (easier for me, but don't know how I would then populate the form field in the mother window with a script from a new window, method not allowed?) or by reading the media library into a div (more troublesome since I'd have to rewrite much of the media library navigation to not refresh the page but only that div).
I have never done this so I was thinking maybe someone seasoned could give me a hint and start me off in the right direction.
I ended up using jQuery modal dialogue with an Iframe inside, and upon click of an image the input field gets populated and the dialogue is closed.
Some sample code if it can be an inspiration to anyone...
Here is my input box with a browse button
<input type='text' name='data_1' id='data_1' size='30' value='' /> <input type='button' value='Bläddra' onclick="openMediaLibrary('data_1');" />
This is somewhere on the form page (hidden by default)
<div id="mediaLibrary" title="Mediabiblioteket">
<iframe width="1050px" height="600px" src="{{ path('Media') }}" /></iframe>
</div>
Here is a sample of an image in the mediaLibrary
<img src="{{ entity.webPath | apply_filter('my_thumb') }}" class="media_archive_image" />
Here are my functions for initializing, opening and closing the mediaLibrary
$(document).ready(function() {
$( "#mediaLibrary" ).dialog({
height: 700,
width:1100,
modal: true,
autoOpen: false,
position: { my: "center", at: "center" },
});
};
function openMediaLibrary(passedField) {
//Set the variable that keeps track of which field to pass back the image url to
window.imageInputField = passedField
//open the mediaLibrary
$( "#mediaLibrary" ).dialog( "open" );
}
function closeMediaLibrary() {
$( "#mediaLibrary" ).dialog( "close" );
}
And finally the functions for assigning the image and closing the mediaLibrary
function selectImage(image) {
if (parent.window.imageInputField) {
//set image to the input field
parent.window.document.getElementById(parent.window.imageInputField).value = image;
//Close the dialogue box
parent.window.closeMediaLibrary();
}
else {
//do nothing for now, perhaps show image in fullsize in lightbox here?
}
}
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;
});