I want to upload image from popup but not getting proper solution.
what i wanted to do
1. On button click open popup
2. In that popup open form for browse image
3. After uploading image i want to show image in same popup and user can crop it
4. After completed cropping save image to database and folder and want to show profile pic
What i did
1.I have completed all code in core php but without using popup
for popup
2. I can open popup on button click, browse file and action goes to controller.
Code
View page
// open popup
<div class="profile-pic fl">
<div class="txtc">
<?php echo $this->tag->image(array("img/profile_pic_default.jpg","class"=>"profile_img")) ; ?>
</div>
<div class="txtc mrgt2">
<button id="openPopup" onclick="upload_action();">Upload Image</button>
</div>
</div>
//iamge upload form
<div id="up-image" style="display: none">
<div style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div id="crop-image" style="width:600px">
<?php echo $this->tag->form(array("personaldetails/uploadImage","id"=>"cropimage",'enctype'=>"multipart/form-data"))?>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
</div>
</div>
Script to open popup and send data
<script type="text/javascript">
$(document).ready(function() {
$edit_dialog = $("#up-image").dialog({
autoOpen:false,
title:"Upload image",
modal:true,
height: 300,
width: 600,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }}
],
create: function(event, ui)
{
$(this).parents(".ui-dialog").css("margin-left", 350);
$(this).parents(".ui-dialog").css("margin-top", 50);
}
});
//Submit action for dialog form
$("#up-image form").submit(function() {
var formData = new FormData($('form')[0]);
$.post($(this).attr('action'), $(this).serialize(),function(formData)
{
alert('done'+data);
$("#up-image").dialog('close');
},'json');
//stop default form submit action
return false;
});
//attach action to edit links
});
function upload_action()
{
$edit_dialog.dialog('open');
}
Controller action
public function uploadImageAction()
{
echo "<pre>";print_r($_FILES);echo "<pre>";exit; // not able to get request
}
You can use jcrop plugin for that:
http://deepliquid.com/projects/Jcrop/demos/crop.php
http://deepliquid.com/content/Jcrop.html
For fullfill your requirement you have to use:
AjaxUpload and JCrop together.
Ajaxupload will upload image to server and jcrop helps you to crop image.
After croppping you have to need old image and save cropped image in DB and folder.
add form in a hidden div and set position absolute or fixed
animate or fade in hidden div on-clik function
set z-index for div ordering
Related
In my html file, I have a file input that is hidden behind an image, so that when an image is clicked, the window where you search for images shows. The problem is with the submit part, I need a submit button, but I don't want it to show unless the image is clicked.
Then when the button is clicked, I want to reload the page, now with the button not showing (unless the image is clicked again, of course).
Here's my html code:
<form>
<input id="file-input" type="file" file-model="formData.img" style="display: none;"/>
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
You can use the CSS display property to hide the form until the image is clicked, then hide the image until the form is submitted, like so:
var hiderImg = document.getElementById('hiderImg');
hiderImg.addEventListener('click', function() {
// hide image, show form
document.forms[0].style.display = "inline";
hiderImg.style.display = "none";
});
document.getElementById('uploadButton').addEventListener('click', function() {
// show image, hide form
hiderImg.style.display = "inline-block";
document.forms[0].style.display = "none";
});
#hiderImg {
height: 200px;
width: 200px;
}
#hiddenForm {
display: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/7/74/White_domesticated_duck%2C_stretching.jpg" id="hiderImg" />
<form id="hiddenForm" onsubmit="javascript: return false;">
<input id="file-input" type="file" file-model="formData.img" />
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
Note: I added onsubmit="javascript: return false;" to the form just so that it won't try to submit in this example; you can remove that.
Another note: If you want the upload button to display under the Browse bar, remove the display:block; setting from the button.
First of All put this directive to the your image:
ng-show="fileExist"
After that put this in the your controller:
var uplader = angular.element(document.getElementById("file-input"));
uplader.bind("change", function(){
if(uplader.val()){
$scope.fileExist =true;
}else{
$scope.fileExist =false;
}
});
it's kind of watch in the your input file that handle visibilty of your image.
When I fill in my form and send it the fancybox is not coming up.
Here is the code i am using for the fancybox:
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
<style>
.hidden { display: none; }
</style>
This is the confirmtation text i filled in at the plugin Gravity forms
<script type='text/javascript'>
$('#gform_submit_button_2').click(function () {
$#gform_submit_button_2([
{ href : '#fancybox-popup-form' }
]);
});
</script>
And this is the HTML for the button where i need to click on the fire the function
<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Verzenden" tabindex="6" onclick="if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ">
Thanks for your time!
When I fill in my form and send it the fancybox is not coming up.
When you send it the page will be refreshed by the submit so your fancybox will not shown, so try to prevent the default action (submit) using preventDefault() :
$('#gform_submit_button_2').click(function (e) {
e.preventDefault();
//Your code
})
Hope his helps.
I'm using Dropzone.js for uploading files, but it behaves strangely. When I open the page, the dropzone form doesn't show up, only the fallback field. When I drag & drop a file into the browser, the browser opens that file, then I use the Back button on the browser and Dropzone form shows up. I tried adding an alert inside the init function and it fires only when I press Back (the second scenario). There are no errors in the console. Here's the code:
<!-- Dropzone -->
<div id="dropzone">
<form action="<?php echo site_url('/settings/upload'); ?>" class="dropzone" id="upload">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
</div>
<!-- Dropzone -->
<script src="<?php echo base_url(); ?>assets/common/theme/scripts/plugins/forms/dropzone/dropzone.min.js"></script>
<script type="text/javascript">
Dropzone.options.upload = {
paramName: "info",
maxFilesize: 0.1,
init: function() {
alert("test");
this.on("error", function(file, msg) {
alert(msg);
});
this.on("success", function(file, msg) {
var data = jQuery.parseJSON( msg );
if (data.success) {
alert("success");
} else {
alert(data.message);
}
});
}
};
</script>
Turned out it was issue with cloudflare rocket loader. Exluded the two <script> statements from it using data-cfasync="false" and it worked.
What I'm trying to do is to display a process bar when a user clicks on submit. the gifs works if I just open it in my web browser but when I add a reference to it in my HTML code it doesn't work. My dialog appears with the GIF but the gif doesn't move. Here is my code:
<div id="progressDialog" title="Importing Welcome Kit Rules" style="display: none;">
<img src="#Url.Content("~/Content/Images/AjaxProgress.gif")" alt="Processing" />
<p>Please wait while your request is processed.</p>
</div>
$(document).ready(function () {
// Hide the "busy" Gif at load:
if ($('#progressDialog').dialog('isOpen')) {
$('#progressDialog').dialog('close');
}
// Handle the form submit event, and make the Ajax request:
$("#myform").on("submit", function (event) {
// Show the "busy" Gif:
$("#progressDialog").dialog({
autoOpen: false,
modal: true,
bgiframe: true
});
$('#progressDialog').dialog('open');
});
});
On my webpage I have this link:
<\a onclick="#" class="compose"></a>
By clicking the link, this script gets activated:
$(function(){
$('.compose').click(function() { // Button which will activate our modal
$('#popup_bestanden_edit_name').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
The script above will make this DIV visible, wich is a popup:
<div id="popup_bestanden_edit_name">
<div id="popupheading">
Naam wijzigen
</div>
<div id="popupcontent">
<p><form action="" method="post" name="naamwijzigen"><input name="naam" type="text"></form></p>
<img src="<?php echo $domein.'/images/confirm_popup/tick.png'; ?>">Ja, wijzigen
<img src="<?php echo $domein.'/images/confirm_popup/cross.png'; ?>">Nee, annuleren
</div>
The popup that opens gives people the opportunity to edit a name of a document on the website.
So when the link <\a onclick="#" class="compose"></a> is clicked, it has to send an id ($fetch_row['id']) to the popup, so I can use this in the further scripting.
Does anyone know how to do this?
Add the id to your a tag like this
<a onclick="#" class="compose" data-id="<?php echo $fetch_row['id']?>"></a>
Then fetch the id and send it to your popup with Jquery:
id = $(this).attr("data-id");
Now use this id wherever you want.
jQuery reveal plugin has many callback functions in which opened callback function that triggers 'after' the modal is opened. See docs at foundation.zurb.com
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
Your id will set in myid element in popup get this from here.
add id to the anchor tag only i.e
<a id = '2' class='compose' ></a>
then you can get it like jQuery('.compose').attr('id');
now everything is working i have one more question.
This is the code i use now:
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
But when the link is clicked while people are on the bottom of the page, the popup will open on the top of the page.
But people need to scroll back to the top to see this.
How can i automatically send the user back to the top where the popup is being showed?