Is there a way to upload file using pure prototype and ajax. I've searched for it on google but did't got any satisfactory result. Can anyone please help me out??
The easiest way to get an "Ajax" file upload to work is to use a keyhole iframe as the target for your form:
<form action="handler/url" enctype="multipart/form-data" target="keyhole" method="post">
<input type="file" multiple name="user_file[]" />
<input type="submit" id="upload" value="Upload">
</form>
<!-- style the following to be tiny/hidden -->
<iframe id="keyhole" src="about:blank"></iframe>
The trick with this is to show a waiting indicator, and hide it after the upload is complete.
<div id="waiting" style="display:none"></div>
<script type="text/javascript">
$('upload').observe('click', function(evt){
$('waiting').show();
});
</script>
In your file upload handler, return a text/javascript header and the following script after a successful upload:
var waiting = top.document.getElementById('waiting');
if(waiting) waiting.style.display = 'none';
Naturally, this will only work if both endpoints are on the same server, owing to Same Origin Policy.
Related
I'm using Filepond with the Laravel framework.
I need to send a file related to an article.
HTML code:
<form action="submit.php" enctype="multipart/form-data" method="POST">
<input type="hidden" name="post_id" value="2" />
<input type="file" class="filepond" name="filepond" data-max-files="1"/>
<input type="submit" value="Upload" name="submit" class="btn btn-info" />
</form>
<script>
// get a reference to the input element
const inputElement = document.querySelector('input[type="file"]');
// create a FilePond instance at the input element location
const pond = FilePond.create( inputElement, {
maxFiles: 1,
allowBrowse: false,
instantUpload: false,
});
</script>
How can I use the submit form button to download my files and get $_POST['post_id']?
Unfortunately that's not possible on most browsers because the value of a file input field cannot be set.
To work around this limitation you can:
Upload the file asynchronously (using the FilePond server.process property)
Encode the file as base64 data (using the FilePond encode plugin)
Use a DataTransfer object to set the file input value (at the moment this only works on Chrome / Firefox)
For more information on the DataTransfer solution see:
https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/
All of the files are available at http://gist.github.com/tonyahowe -- page.html, app.xql, upload.html, and form1.html. The app:upload function in appxql is at line 378.
I am trying to add an upload feature to my application here (http://nic.cerosia.org) and have been able to get the upload to work without integrating it into the whole application. Once I integrate it, I get a 400 error message, included below. I think the problem might be a controller issue, but I'm not sure?
I have added a simple link from the index to upload.html page, as follows:
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
<form enctype="multipart/form-data" method="post" action="form1.html">
<fieldset>
<legend>Upload Document:</legend>
<input type="file" name="file"/>
<button id="f-btn-upload" name="f-btn-upload" value="true" type="submit" class="btn btn-danger">Upload</button>
</fieldset>
</form>
</div>
That sends the upload file to form1.html, which basically figures out what to do with different form actions (it works with the first two options):
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="main">
<div/>
<!-- if a query search -->
<div data-template="templates:if-parameter-set" data-template-param="query">
<div data-template="templates:include" data-template-path="search.html" class="col-md-12"/>
</div>
<!-- if a coursepack search -->
<div data-template="templates:if-parameter-set" data-template-param="f-btn-coursepack">
<div data-template="templates:include" data-template-path="coursepack.html" class="col-md-12"/>
</div>
<!-- if an upload -->
<div data-template="templates:if-parameter-set" data-template-param="f-btn-upload">
<div data-template="templates:include" data-template-path="success.html" class="col-md-12"/>
<div data-template="app:upload"/>
</div>
</div>
The app:upload is here:
declare function app:upload($node as node(), $model as map(*), $type as xs:string?) {
let $collection := '/db/apps/NiC/inReview/'
let $filename := request:get-uploaded-file-name('file')
(: make sure you use the right user permissions that has write access to this collection :)
let $login := xmldb:login($collection, 'public', 'public')
let $store := xmldb:store($collection, $filename, request:get-uploaded-file-data('file'))
return
<results>
<message>File {$filename} has been stored at collection={$collection}.</message>
</results>
};
I keep getting an error that I think has something to do with the controller, but I'm not sure. Can anyone help me figure out where the problem is? It may also be a templating issue?
Here's the error:
HTTP ERROR 400
Problem accessing /exist/apps/NiC/works/form1.html. Reason:
SAX exception while parsing request: Content is not allowed in prolog.
I don't know for sure, but I wonder if it is an issue with the templating framework reading the data from the request body and then it not being available in your app:upload function.
I wonder if we could test this, perhaps instead of checking for f-btn-upload which will be in the body of the HTTP request, you could instead check for a query-string parameter. If you change your form in the upload.html page to be like this:
<form enctype="multipart/form-data" method="post" action="form1.html?do-upload=true">
and the switch in your form1.html to be like this:
<div data-template="templates:if-parameter-set" data-template-param="do-upload">
Does that help you at all?
I am using ckeditor in a web application, when I added the ckeditor.replace code in the html template I get an error " Uncaught TypeError: Cannot call method 'getEditor' of undefined ". On the same page if I endter CKEDITOR.replace('id_taskDetails'); in the console I see all the buttons.
BTW, I get the alert.
I tried the solution from here: Inline CKEditor with toolbar on generated code
This stops the error but still no toolbar.
What am I missing?
<script>
alert('foo');
CKEDITOR.replace('id_taskDetails');
</script>
<div id="content">
<form action="/createTask/Test1/" enctype="multipart/form-data" method="post" class="basic-grey">
<p><label for="id_taskName">Task Name:</label> <input id="id_taskName" maxlength="64" name="taskName" type="text" /></p>
<p><label for="id_taskDetails">Details:</label> <textarea cols="60" id="id_taskDetails" name="taskDetails" rows="40">
</textarea></p>
<input type="submit" class="button" name="save" value="Next">
</form>
Looks like I need to post a question on StackOverflow before I get it right.
I used the jquery load function to make sure the page completely loaded before calling the ckeditor replace call and it works fine now.
<script>
$(window).load(function () {
CKEDITOR.replace('id_taskDetails');
});
</script>
CKEDITOR.replace must be executed when the element which you try to replace exists, so after it.
<p><label for="id_taskDetails">Details:</label> <textarea cols="60" id="id_taskDetails" name="taskDetails" rows="40">
</textarea></p>
<script>
CKEDITOR.replace('id_taskDetails');
</script>
i need to send some data and an image file with ajax .
i know that must use multipart form and formdata but i don't know how - i googled it and i found some way for send file, but i need to send whole form.
this is my html form
<form id="formData" enctype="multipart/form-data">
<input type="file" id="uploader" name="image" accept="image/jpg, image/jpeg, image/png, image/bmp, image/raw"/>
<input type="hidden" name="action" id="action" value="receiver"/>
<input type="hidden" name="route" id="route" value="image"/>
</form>
thanks.
Hope something like this might do it for you mate... :)
html
//Include this script in head
<script src="http://malsup.github.com/jquery.form.js"></script>
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted
<div id='preview'></div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input type="file" name="photoimg" id="photoimg" />
</form>
Script File
$('#photoimg').on('change', function()
{
$("#imageform").ajaxForm({target: '#preview', //Shows the response image in the div named preview
success:function(){
},
error:function(){
}
}).submit();
});
ajaximage.php
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
$tmp = $_FILES['photoimg']['tmp_name'];
$path = "uploads/";
move_uploaded_file($tmp, $path.$name) //Stores the image in the uploads folder
}
You could get the values of fields like action,route etc using $_POST inside the php file.For mare details check the below link mate.. :)
http://malsup.com/jquery/form/#ajaxForm
I am trying to implement something like this.
http://app.maqetta.org/mixloginstatic/LoginWindow.html
I want the login page to load but if you click the signup button then an ajax will replace the login form with the signup form.
I have got this to work using this code
dojo.xhrGet({
// The URL of the request
url: "'.$url.'",
// The success callback with result from server
load: function(newContent) {
dojo.byId("'.$contentNode.'").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});'
the only problem is the new form just loads up as a normal form, not a dojo form. I have tried to return some script with the phaser but it doesnt do anything.
<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
</a> to have an activation email sent to you.</div>
<form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
<dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
<dd>
<input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd>
<input 0="Errors" id="password" name="password" value="" type="password"></dd>
<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
<dd id="captcha-element">
<img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
<input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
<input type="text" name="captcha[input]" id="captcha-input" value="">
<p class="description">Enter the characters shown into the field.</p></dd>
<dt id="submitButton-label"> </dt><dd id="submitButton-element">
<input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
<dt id="cancelButton-label"> </dt><dd id="cancelButton-element">
<button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd>
</div></form>
<script type="text/javascript">
$(document).ready(function() {
var widget = dijit.byId("signup");
if (widget) {
widget.destroyRecursive(true);
}
dojo.parser.instantiate([dojo.byId("loginBox")]);
dojo.parser.parse(dojo.byId("loginBox"));
});
</script></div>
any advice on how i can get this to load as a dojo form. by the way i am using Zend_Dojo_Form, if i run the code directly then everything works find but through ajax it doesnt work. thanks.
update
I have discovered that if I load the form in my action and run the __toString() on it it works when i load the form from ajax. It must do preparation in __toString()
Firstly; You need to run the dojo parser on html, for it to accept the data-dojo-type (fka dojoType) attributes, like so:
dojo.parser.parse( dojo.byId("'.$contentNode.'") )
This will of course only instantiate dijits where the dojo type is set to something, for instance (for html5 1.7+ syntax) <form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>.
So you need to change the ajax contents which is set to innerHTML, so that the parser reckognizes the form of the type dijit.form.Form. That said, I urge people into using a complete set of dijit.form.* Elements as input fields.
In regards to:
$(document).ready(function() {});
This function will never get called. The document, youre adding innerHTML to, was ready perhaps a long time a go.
About Zend in this issue:
Youre most likely rendering the above output form from a Zend_ Dojo type form. If the renderer is set as programmatic, you will see above html a script containing a registry for ID=>dojoType mappings. The behavior when inserting <script> as an innerHTML attribute value, the script is not run under most circumstances (!).
You should try something similar to this pseudo for your form controller:
if request is ajax dojoHelper set layout declarative
else dojoHelper set layout programmatic