I have a form where you can continually add more rows.
One row contains name and avatar, etc.
I want to use Dropzone.js to make each avatar a different droppable field.
Whenever I create a new row, I'm creating a new Dropzone area. This is fine, and works.
However, when I submit the form, the files are nowhere to be found. I can understand why, because the file fields aren't in the form, they are appended to the body.
<form>
<div class="person" id="person_1">
<div class="avatar"></div>
<input type="text" name="name_1" />
</div>
<!-- then these are added via js -->
<div class="person" id="person_2">
<div class="avatar"></div>
<input type="text" name="name_2" />
</div>
<div class="person" id="person_3">...</div>
<div class="person" id="person_4">...</div>
<!-- etc -->
</form>
I'm initializing the dropzone on the avatar div.
Is it possible to add them to file fields inside the form?
Here's what's going on in the JS. It's dumbed down a little for brevity.
(function(){
var count = 1;
var $form = $('form');
initDropzone( $('#person_1') );
function addPerson() {
count++;
var $personDiv = $('<div class="person" id="person_'+count+'">...</div>').appendTo($form);
initDropzone( $personDiv, count );
}
function initDropzone( $el, count ) {
$el.find('.avatar').dropzone({
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 100,
maxFiles: 1,
url: '/' // dropzone requires a url param
});
}
$('#add_person').on('click', addPerson);
})();
The problem is not that the fields are appended to the body, but that the whole Dropzone uploading process is different from a normal form submission.
You can not use Dropzone to drop files in the browser, and then use the normal form submit to submit it.
There are two ways to accomplish what you are doing:
Don't let the user submit the form until all your files in the Dropzones have uploaded (or better yet: create event listeners on all your Dropzones that will fire the submit function on the form as soon as all Dropzones have uploaded). You need to store the files on your server and wait for the actual form submission to assemble the data.
This is by far the most elegant solution, because this way the files are already uploading while the user may still be editing form data.
Create one Dropzone on the actual form, that will handle the whole uploading of the form via AJAX. (See the docs for that). If you want different dropzone targets inside that dropzone, you'll have to create them separately, and "delegate" the file drops to the main dropzone (basically, just take the file object, and add it to the main Dropzone).
Related
I am using asp.net core 2.1 and bootstrap 4.1, I have a form with an input as follows:
<div class="form-group">
<label asp-for="FormFile"></label><br />
<div class="custom-file">
<input asp-for="FormFile" type="file" class="custom-file-input">
<span class="custom-file-label text-truncate">Choose file</span>
</div>
<span asp-validation-for="FormFile" class="text-danger"></span>
</div>
I use JavaScript to bind to the change event on the input element that's triggered when a user selects a file and then set the span value.
When the form is submitted, server side validations are performed and the users browser is redirected to a new page which provides insight into how the file must be corrected if necessary. Users keep the file open and iteratively make changes as needed then save. They navigate back to the form and simply click submit.
The problem is the span is no longer populated with the previously set value, however the form is aware of the selected file (a mouse over raises a popup with the value).
How can I detect this scenario and repopulate the span?
The original code was executed at document load through
document.addEventListener("DOMContentLoaded", function () { /**/ });
so inserting another call within the above to reexecute the same code on pageshow as such solved it:
window.addEventListener("pageshow", function () { /**/ });
I'm searching for the best solution to display information which I store in PHP variable (which I get from a MySQL DB).
I was thinking to use jQuery. My questions:
With the input field I receive the number of the Member.
I store a new variable called $imgMember with the img name.
Questions:
I want to display this image each time a user enters a number at <div class="boxImageMember"> (which I already validated through PHP and made a variable ($imgMember) of it.
How should I access it? Do I need to store those variable with AJAX? Internal/external jQuery? Or do I need to think otherwise? Im stuck in my head.
Im totally stuck with the way I how to process this.
HTML:
<div id="header">
<div class="header-content">
<img src="img/logo-dqmih.png" width="60px">
</div>
</div>
<div class="container">
<div class="boxImageMember">HERE I WANT TO DISPLAY A USER IMAGE</div>
<div class="boxInformationMember"></div>
<form action="" method="post">
<input type="text" id="MemberNumberEntry" name="staffNumber">
<button type="submit" name="action">
</form>
</div>
jQuery:
$(document).ready(function() {
$("#MemberNumberEntry").focus();
$(document).on('submit',function(event, test){
event.preventDefault(); // Don't refresh the page
var MemberNumberEntry = $("#MemberNumberEntry").val();
console.log(MemberNumberEntry);
$(".boxImageMember" ).css("background-image", "url(../images/persons/NIT.jpg)"); // Change image (Not dynamic yet)
$(".boxInformationMember" ).text("Hi Test, welcome!");
// Reset value form entry
$('#memberNumberEntry').val('');
});
});
Your jQuery script would do something like this
$(document).ready(function() {
$("#MemberNumberEntry").focus();
$(document).on('submit',function(event, test){
event.preventDefault(); // Don't refresh the page
var MemberNumberEntry = $("#MemberNumberEntry").val();
//console.log(MemberNumberEntry);
$.ajax({
url: '/your-php-script.php',
method: 'POST',
data: {
MemberNumberEntry: MemberNumberEntry
},
success: function(response){
//If call goes well, you use the image here.
}
});
$(".boxImageMember" ).css("background-image", "url(../images/persons/NIT.jpg)"); // Change image (Not dynamic yet)
$(".boxInformationMember" ).text("Hi Test, welcome!");
// Reset value form entry
$('#memberNumberEntry').val('');
});
});
You're basically sending an HTTP POST request to your PHP script that will accept the image ID like a normal post request, using $_REQUEST or $_POST.
There are tonnes of options to configure with jQuery, you can look at the docs here. For more information on working with images in PHP and AJAX, this answer is useful.
I'm trying to use the blueimp/jQuery-File-Upload plugin to programmatically send more than one file input field though the same form.
When user select form files, it just append them in a JS variable to further send them with $('#form').fileupload('send') method on form submission. My goal is to use the exactly same synchronous form I was using before in an asynchronous way. So when user click on form submit button, it prevents default action and them let the plugin to do the task, sending all form data and displaying overall upload progress.
I'm mainly following these guides:
https://github.com/blueimp/jQuery-File-Upload/wiki/API
https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
Actually it's almost working, but it does not send more than one input file to the server end. In fileuploadadd event I'm pushing data.files[0] (my file inputs are single file only, but each of them use different accept attributes) to a "global" uploadable array and then on form submission I use something like $('#form').fileupload('send', {files: uploadable}).
I guess I'm not doing it the right way, since only one file is being sent along with form data. What is the correct way to programmatically send more than one file input file using a single form?
I'm also not too confident about overall upload progress... If I use fileuploadprogressall event to read the upload progress will it be reporting the progress of all uploaded files?
JS (simplified)
$(function () {
var uploadable = [];
$('#form').fileupload({
autoUpload: false,
singleFileUploads: false,
add: function (event, data) {
uploadable.push(data.files[0]);
return false;
},
// other event callbacks
})
.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$('#form').submit(function (event) {
event.preventDefault();
$('#form').fileupload('send', {files: uploadable});
});
});
HTML
<form id="form" action="upload" method="post" enctype="multipart/form-data">
<!-- other text/hidden inputs that will also be sent -->
<input type="file" name="image" id="image" accept="image/*" />
<input type="file" name="video" id="video" accept="video/*" />
</form>
uploadable.push(data.files[0])
You vividly told the compiler to only push the first file.
Have you tried using foreach and push all files?
Thank you,
I have a file upload component which is bound through a template to a view model (UploadViewModel). The file upload dialog is initialized through a custom Knockout binding (uploadFileDialog). The UploadViewModel is created when the user clicks the 'Choose file...' button and when the user has selected a file to upload the fileuploadadd event should trigger which should invoke fileSelected method and then the Start button should be visible as a result. This doesn't seem to happen. The only way to make it work is to re-initialize the file upload dialog every time (the commented code in the uploadSelectFile method).
Why does it need to be re-initialized?
Code: http://jsfiddle.net/FKYwB/
Your event is never fired.
Actually, you are not binding to the right element.
Your uploadFileDialog should be on the form tag in the template like this:
<form id="fileupload" action="" method="POST" enctype="multipart/form-data"
data-bind="uploadFileDialog: { maxFileSize: 500000000, autoUpload: false },
event: { fileuploadadd: fileSelected}">
<!-- -->
</form>
Updated fiddle
I am using the Drag and drop Multi Importer script I found online, below my div containing the drag and drop is an input type="file"..
Currently if you click the Browse files button from the input and add an image then it shows in the Multi Upload div (and of course the input file section as well) However not everyone is going to use the browse files button, they are going to drag and drop so is there a way to reverse this behavior? Where when the client drags a file in the multi upload div it will show in the input file tag as being added?
I hope I wasn't too confusing there.
Here is what I have:
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here or Click to Upload</h1>
</div>
<input type="file" name="thumbnail" id="thumbnail" multiple />
<script type="text/javascript">
var config = {
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", // Valid file formats
form: "primaryPostForm", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
}
jQuery(document).ready(function($){
initMultiUploader(config);
$('.button').click(function () {
$('#primaryPostForm').submit();
});
$('#dragAndDropFiles').bind("click" , function () {
$('input#thumbnail').click();
});
});
</script>
Ultimately it would be great just to hide the input file type section but still have it in my markup because I have other functions that take that file and create products from it.