Trouble With Dropzone.js File Upload July 02, 2024 Post a Comment I'm using for the first time dropzone.js inside another form...so as two forms can't be nested, I removed dropzone's form: html snippet: Solution 1: The 'error' => int 4 means that no file has been uploaded, i think this is because you are submitting the form like if it was a regular form, if you want to include dropzone inside a regular form i don't think you can submit the form the regular way and attach to it the files dropped in the dropzone element, or at least there is no simple way to do it, one solution could be to encode the file in base64 and then add the encoded string to an input to send.But an easy one I think is to send the form using dropzone and append the input values to the request using javascript, here generic example.html: <formid="addproduct"><label>Input 1: </label><inputtype="text"name="input1"><label>Input 2: </label><inputtype="text"name="input2"><divid="myAwesomeDropzone"class="dropzone"></div></form><buttontype="button"id="submit_form">Submit</button>Copyjs: Dropzone.options.myAwesomeDropzone = { url: 'receiveAddForm', autoProcessQueue: false, uploadMultiple: true, parallelUploads: 3, maxFiles: 3, init: function () { var myDropzone = this; $('#submit_form').on("click", function() { myDropzone.processQueue(); }); this.on("sending", function(file, xhr, formData){ $('#addproduct').find('input').each(function() { formData.append( $(this).attr('name'), $(this).val() ); }); }); this.on("success", function(file, response) { console.log(response); }); this.on("completemultiple", function(files) { // Here goes what you want to do when the upload is done// Redirect, reload , load content ...... }); }, }; CopyreceiveAddForm (php):if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { echo"RECEIVED ON SERVER: \n"; print_r($_FILES); print_r($_POST); } CopyThe server file just prints the data received on the server, so you can see it in browsers console. I omitted bootstrap classes and elements only to show the relevant part, but you cand add them no problem.Baca JugaCheck All/uncheck All In Foreach LoopWhen Should I Return True/false To Ajax And When Should I Echo "true"/"false"Upload Multiple Files One By One Using Dropzone.jsSolution 2: to have a dropzone inside another form you can put a div in the form with class="dropzone" and convert it to dropzone element like this:Dropzone.autoDiscover = false; var myDropzone = new Dropzone("#my-awesome-dropzone", { autoProcessQueue: false, url: "receiveAddForm", // other options }); Copythen you can call the events like this: myDropzone.on("addedfile", function(file) { console.log("File added:", file.name); }); Copyjsfiddle with your form : fiddle Share You may like these postsHow To Get The Return Value Of A Javascript Promise?Convert Json To Array Via JavascriptReact Native Fetch Promise .then() Not Executing ImmediatelyHow To Retrieve Data From Database Based On The Value Of Two Drop Down List Using Ajax? Post a Comment for "Trouble With Dropzone.js File Upload"
Post a Comment for "Trouble With Dropzone.js File Upload"