I'm trying to upload multiple files using Dropzone.js, but it acts like it's upload one file per one upload.
For example: I select 3 files, click on the OK button, Dropzone shows OK status (successful uploaded), but server side get 3 separate request with one file per each request.
I need to get all files as an array of files, can anybody help with this case?
Code:
<form id="my-awesome-dropzone" class="dropzone custom_bc" action="'.$_SERVER['PHP_SELF'].'">
<input type="hidden" name="action" value="file">
<div class="fallback"><input type="file" name="file" multiple></div>
<input type="hidden" name="object_id" value="'.$_REQUEST['object_id'].'">
<input type="hidden" name="est_id" value="'.$_REQUEST['est_id'].'">
<div class="dz-preview"></div>
</form>
I have also tryed to put [] in the name of <file>, but it doesn't help
<input type="file" name="file[]" multiple>
You need to set uploadMultiple to true.
var myDropzone = new Dropzone(
"#my-awesome-dropzone",
{
url: document.URL, // Set the url
paramName: "file",
uploadMultiple: true
}
);
When setting uploadMultiple to true, Dropzone automatucally concatenates [] to your file name. So you don't need to do that.
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/
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.
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
So I need a way of validating the sum total of multiple files being uploaded. I know this needs to be done on the client's side but I am not sure how to implement it. Here is the form I amusing:
<form action="upload.php" method="POST" enctype="multipart/form-data" >
<input type="file" name="image[]" multiple="multiple">
<input type="submit" value="upload">
</form>
You can do it in HTML5, something like:
var file = document.getElementById('fileToUpload').files[0];
// now you can get the size via:
var fileSize = file.size;
Below is the form which i loaded via ajax. When i run the form page directly then autofocus on c_name works in firefox but when loaded with ajax it doesn't! It works fine with opera/safari/chrome though!
<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form">
<fieldset id="client_info_1">
<label for="c_name">Name:</label>
<input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" />
<label for="c_phone">Phone Number:</label>
<input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" />
<label for="c_email">Email:</label>
<input type="email" name="c_email" required placeholder="email#example.com" />
<label for="c_address">Address:</label>
<textarea name="c_address" ></textarea>
</fieldset>
<fieldset id="client_info_2">
<label for="c_info">Additional notes:</label>
<textarea name="c_info" ></textarea>
<input type="submit" name="add_client" value="Add Client" />
</fieldset>
</form>
Autofocus is only done before onload has fired; it's meant to be a declarative way of specifying focus on initial page load.
use settimeout after ajax call on the div, or using jquery use .ajaxComplete, or .done
function theAjax(){
//after the ajax actions loaded......
//use settimeout to refocused on the input..
var t=setTimeout("focusMe()",500);
}
function focusMe(){
document.getELementById("theInput").focus(); //the new input
}
//using jquery use .ajaxComplete, or .done
$( document ).ajaxComplete(function() {
$("#focusOnMe").focus();
}
I know this is old, but I just had this problem and maybe it helps someone.
If you use jQuery this works:
$("input[name='c_name']").focus();
Javascript would be something like this (general example):
document.getElementById('element').focus();
But you have to call that function after your form is loaded via ajax!
This worked for me:
$.get("/url.html", function(html) {
var form = $("#form", html);// extract form with id=form from ajax response
if (window.InstallTrigger) {// Detect Firefox and add focus script
// place focus on first element containing autofocus attribute
form.append("<script>$('[autofocus]')[0].focus();<\/script>");
}
$("#element").replaceWith(form);// Replace element with id=element with form
});
This is different from other solutions posted here because the script that places focus on the autofocus element is added to the DOM at the same time as the autofocus element itself thus ensuring that the script runs after the DOM is finished updating.
Note that this solution requires jQuery. If you are not using jQuery you can still do this easily enough with querySelectorAll
document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"