I am trying to use dropzone.js (with Coldfusion 9) to upload potentially multiple files on one page. I first did this using the form tag:
<cfform name='UploadFiles' action="uploadfiles.cfm" class="dropzone">
and this worked as expected.
The problem is that I need the user to upload the files and then hit a submit button that processes the files. So I would need the information from each of the files uploaded. With this method, since each one is a separate form, I could not get all the file names on submit. Because of this, I changed the tag to a div tag inside of the form:
<cfform name='uploadfiles' action="uploadfiles.cfm">
.
.
.
<div id="my-dropzone" action="uploadfiles.cfm" class="dropzone">
</cfform>
<script>
new Dropzone(
url: "/uploadfiles.cfm" // Set the url
});
</script>
This works, as it shows the different dropzones and I can drag and drop a file or select one, but nothing ever gets uploaded to the location.
I am using the same code I used when the dropzone was a from to upload when the dropzone is a div:
<cffile action="upload" destination="#uploads#\Uploaded\#filen#" nameconflict="makeunique">
What am I missing in order for it to actually upload the file?
Related
I'm trying to upload files on a website which using dropzone.js for file uploads.
I've found the file upload field in form, but the script stops without throwing any error.
I've also used find_elements_by_id("upload-input") to make sure there are not multiple fields with same id.
elem = driver.find_element_by_id("upload-input")
driver.implicitly_wait(2)
elem.send_keys("C:\KVR.pdf")
This is how html looks like:
<div id="fallback" style="display: none;">
<input id="upload-input" type="file" name="file" multiple="multiple">
<div id="upload-progress" class="upload-progress"></div>
</div>
As per the HTML you have shared the <input> tag is having style set to display: none;. You can use the following code block to upload the file :
element = driver.find_element_by_xpath("//div[#id='fallback']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
driver.find_element_by_xpath("//input[#id='upload-input']").send_keys("C:\\KVR.pdf")
DropzoneJS hides the <input type="file">
You can find those with the instruction below:
dz_inputs = driver.find_elements(By.XPATH, "//input[#type='file' and #class='dz-hidden-input']")
Then for example, to add a file to the first dropzone on the page, you should proceed as below:
dz_inputs[0].send_keys("/File/path/file_name.extension")
I am making a form with over 35 input fields and files that need to be uploaded with the form that can be relevant to that form's reviewing later.
In order to upload multiple files I wrote this script inside the form:
<script type="text/javascript">
function cancelFile(v){
$(v).closest('.input_file').remove();
}
function addFile(){
$('#files').append('<div class="input_file"><input name="attachment\[\]" type="file" ><img class="cancel_img" src="images/delete.png" onclick="cancelFile(this)"></div> ');
}
</script>
<input type="button" onclick="addFile()" value="Add file"><br><br>
<div id="files">
</div>
It basically appends an input of type file with the name attachment[] when an add file button is clicked, and a span that allows to cancel (remove) that input when clicked.
When I add only one file, all the POST data uploads fine: text, dates, files and all. But when I add multiple files, the POST request is empty: var_dump($_POST) shows me an empty array.
The form has enctype="multipart/form-data" declared.I also tried the uploading of multiple files in a separate test and it worked fine.
Anyone knows why my post ends up empty?
Here's a challenge:
I don't care about which language to use, Javascript, PHP, .. whatever.
I need the most simple way to let my user upload an image.
I will later offer the user a way to place it on a canvas (displayed inside a div, with jquery draggable)
I can not have the page refreshed since there are useful variables in other fields etc..
(I don't have any security preferences as this will be a local website for intranet)
I tried:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
</br>
<input type="file" name="file" id="file" size="70%"><br>
</br>
<input type="submit" name="submit" value="Submit">
</form>
But then came to realise there are soo many options out there, such as uploadify, and i easily got lost online..
You have two choices to make a file upload w/o refreshing the page:
Use HTML5 form upload
Post the form to an hidden iframe
The latter one gives best browser compatibility, and is what I'd suggest you to use. To post to an hidden iframe, simply set the target of the form to the iframe:
<script>
// Global callback function from the file
function uploadCallback(){
console.log("File is uploaded!");
}
</script>
<iframe name="hiddentarget" style="display:none;"></iframe>
<form action="upload_file.php" method="post" enctype="multipart/form-data" target="hiddentarget">
...
To respond back to the site from the iframe, you will have to go through the window.top frame as such:
upload_file.php:
<?php
// Uploading stuff
// ...
// "Talk" back to the site
// Of course you can (should) pass some parameter to this JS-function, like the filename of the recently uploaded image.
echo "<script>window.top.uploadCallback();</script>";
?>
EDIT:
As suggested by other users; the optimal solution would be to use the File API where supported, and fall back to the hidden iframe on browser that doesn't support it. This gives you nice features such as file uploda progress for example.
The way that I would suggest is using AJAX and and make your upload box a div which can be replaced when the upload is successful. Instead of traditional post you then create a Javascript function for onSubmit. Your action can then be changed to #.
If you lookup AJAX there are some great tutorials about and you will be able to do many more amazing things.
Alternatively look into jQuery which will definitely have something to help you
I'm gonna show you an example on how to use the jQuery Form Plugin to upload files to your server really easy without needing to refresh the page.
First off, download and install the jQuery Form Plugin. After you do that, include it in your files where you want to make use of it. Add an ID attribute to your form tag like this:
id="unique_id"
After you have identified the upload form, put this code in your jQuery:
$(function() {
$('#unique_id').ajaxForm({
target: '.myTarget' // Display here whatever the server side script returns
success: function(response) {
// An usual success callback
}
})
})
Assuming that your server side language is PHP, this is how a simple upload script would look like (upload_file.php):
<?php
$uploaddir = 'your_upload_dir/something';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']); // Filename
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo $uploadfile;
} else {
echo "Error";
}
?>
Where userfile is the name attribute of your file input (<input type="file" />).
The above code combined returns the relative path to your image which you can use to display the image inside an img tag. You must use Javascript (or jQuery) for that.
I try to replace classic input file with JqueryFileUpload widget.
Here is my context :
I can have one or more file input in the same form.
The form is meant to create server side objects (each input is a field of this object and each file is a "resource" object linked to the main created object). Those object are stored in a database.
When the final user submit the form, I'd like to :
do many validation (for other inputs)
if all is ok, then trigger the ajax upload of file(s). A server-side handler create the
needed ressource object(s).
when all the uploads are completed (I can know that by using the widget callbacks), then I submit the main form (the action form is not the widget handler but a page that do the job and display a message) to create the main object : I don't want to send the file(s) here but only the ressource objects id that the handler send me back to link them to the main object).
My problem is, when I trigger the fileUpload the form is submitted and the action form page is loaded. The handler isn't called.
I made test with a simple page : if the widget is not within a form it works fine :
<body>
<div>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]"/>
</div>
</body>
but if I put it in a form the form is always submitted and I can't prevent this.
<body>
<form action="myPage.aspx">
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]"/>
</form>
</body>
My questions are :
Doesn't the url option override the form action ?
Can I not use different target for the widget and the form that contains it ?
Can I put multiple widgets in a single form ?
Okay just for information it was a pretty stupid mistake from my side, I used a which default behavior is 'submit' so my form was always submitted.
Say I have a form that allows users to upload multiple images, which are appended with an option to remove them if they don't want to upload that particular photo.
Is it possible to remove the value from the files object of the one that they removed (e.g. didn't want to upload)?
FileList has no API to remove entries:
https://developer.mozilla.org/en/DOM/FileList
However you can reconstruct File uploader using XHR2 and AJAX and filter in content there.
This implies doing XHR2 and AJAX upload and is not suitable for traditional <form> uploads.
https://developer.mozilla.org/en/Using_files_from_web_applications
If you are using a standard form with a set of standard file inputs then you can do it like this http://jsfiddle.net/thXre/
$(document).ready(function(){
$('.remove').click(function(){
$(this).closest('div').slideUp('slow', function(){$(this).remove();});
});
});
and html code:
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
<input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
Libraries are your best bet before we get some standard API...
FineUploader. Demo. Has file delete, image preview, file rename.
bluimp's jQuery File Upload Plugin. Demo. Has file delete, image preview, individual file upload, upload undo.
They are also available at https://cdnjs.com/