Dropzone: combine form doesn t work

[kavin-90]

Docs said form submit button should be in form not outside of </form> so try to put it in before </form> and try it will work.

Source: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

[tycoons]

hi Kavin , i try change place submit Button dosent t work
upload php print r files and post result
array () files array post ok
thank

[kavin-90]

for files you need print_r($_FILES)

check my demo of Normal Form on jsfiddle https://jsfiddle.net/0qoejLo2/1/

[tycoons]

Merry Christmas and thank for you message
page upload is this
<?php print_r($_FILES); print_r($_POST); ?>
I will test your solution in my form I will make you a return after the passage of santa cruz

[tycoons]

Hi Kavin,
I try your code but it does not send my file I receive a http 200 ok upload.php but it does not redirect me on the upload page to see if my post are ok
i have to change as its
https://jsfiddle.net/0qoejLo2/2/

[kavin-90]

@tycoons it will not redirect because dropzone use Ajax call so you need own code to redirect after success in dropzone or js

You need to add your redirect in below code

this.on("complete", function(file, responseText) {

setTimeout(function(){ $('div.dz-success').remove(); }, 5000);
});

[tycoons]

There is one thing I do not understand.
When sending a form with the method post action page we redirect to this page for there no?
Can refresh the page after sending to empty the form?
thank for you big help

[kavin-90]

if js like dropzone used then it will not redirect but simple form will.

[tycoons]

Thanks for your support it works almost as I want some modification on the css and its will have to go a big thank you to you for help
Subject resolved !!!

[tycoons]

hi Kavin-90,

I still have a small problem with the dz success mark and dz error mark I do not find how to display either one or the other that the result I would like to do something like its
if (succes) { show dz-succes-mark }else { show dz-error-mark }
thank for you help and Have a happy, wealthy and successful year 2017

[kavin-90]

@tycoons it use ajax so ajax will send json like

[{ "success": true, "title": "filename is uploaded." }]
so if responseText.success show success else error

[tycoons]

@kavin-90 I'm really not gifted with ajax i try this
this.on("success", function(file) { if(response== 'success'){ // succeeded $('.success-mark').hide(); $('.error-mark').show(); }else{ $('.success-mark').show(); $('.error-mark').hide(); } });
but doesn t work

[kavin-90]

Like Something `

this.on("complete", function(file, responseText) {
if(responseText.success){ 
// succeeded 
$('.success-mark').show(); 
$('.error-mark').hide();
}else{ 
$('.success-mark').hide(); 
$('.error-mark').show(); 
} 
});

[tycoons]

@kavin-90
I try your solution but why answerText and not response?
I get an error responseText is undefined

[kavin-90]

My Response from ajax json

Object { success: true, name: "Jellyfish.jpg", size: 775702 } so my code works 😄

[tycoons]

@kavin-90
I show you how I integrate your code tell me if I put it in the right place after upload i have error TypeError: responseText is undefined
` Config dropzone here
// this.on("success", function(file,xhr, reponse){
//tinymce.activeEditor.execCommand('mceInsertContent', false, 'msg'); try tinymce textarea
// alert(file.xhr.response); show post
// })
this.on("complete", function(file, responseText) {
if(responseText.success){
$('.success-mark').show();
$('.error-mark').hide();
}else{
$('.success-mark').hide();
$('.error-mark').show();
}
$("#add-photos-box")[0].reset();
if(file.size > (1024 * 1024 * 20)) // exposant *10 limite a 200 ici
{
alert ( "Vous dépassez la taille maximal de 200 MO");
this.removeFile(file); // if you want to remove the file or you can add alert or presentation of a message
}
if (file.type != "application/pdf" &&
file.type != "application/msword" &&
file.type != "application/excel" &&
file.type != "application/mspowerpoint" &&
file.type != "text/plain" &&
file.type != "application/gnutar" &&
file.type != "application/zip" &&
file.type != "application/rar") {
alert("Erreur! Nous acceptons pas ce genre de documents:les format valide pdf,exel,word,zip,rar");
}

setTimeout(function(){ $('div.dz-success').remove(); }, 1000);
});
}
});
}
});`

[kavin-90]

try to change it to this.on("complete", function(file, responseText) { to this.on("success", function(file, responseText) { and try it.

[tycoons]

@kavin-90
Great thank you very much for that
Do you have an idea about the integration of tinymce?
I just want to recover the textarea

[kavin-90]

@tycoons Tinymce? you mean dropzone upload files in tinymce?

if you want to use wysiwyg editor then with dropzone no problem because both are different scripts. textarea will get content will be sent normally no problem will occur.

[tycoons]

@kavin-90
Tinymce just serves me to retrieve my text field with html tagging
https://jsfiddle.net/0qoejLo2/10/
I have seen many examples with modal but that is not what I want to do
i try this but doesn't work
I am forced to restart my page so that it is taken into account
this.on("sending", function(file, xhr, formData){ formData.append("msg", tinymce.activeEditor.getContent()); });
The result I want to have

[kavin-90]

@tycoons you don't need to get content of textarea and attach to dropzone because dropzone send whole form so text area , input all send by dropzone .

[tycoons]

@kavin-90

I thought this would pass with dropzon because it sends the whole form but my textarea remains empty when sending
see:
Array ( [file] => Array ( [name] => drop.zip [type] => application/zip [tmp_name] => /tmp/phpLl2BoZ [error] => 0 [size] => 20848 ) ) $_POST: Array ( [email_de] => [email protected] [a] => [email protected] [sujet] => bateau [null] => [msg] => )

[kavin-90]

let me check my dropzone then i will give you solution

@tycoons i got this data from my dropzone.

array(3) {
  ["message"]=>
  string(11) "<p>baka</p>"
  ["_token"]=>
  string(40) "MsixVEQkKYwzWbiPlwZnsHjzh8LCp2NJsGKWYAh1"
  ["message_create"]=>
  string(0) ""
}

It seems it works but no ajax on click on submit button form redirect.

[tycoons]

@kavin-90
You have a link like jsdfile that I see what's wrong with me?
Because I do not see what's wrong with this system.
Thank you for your patience and your explanation it enlightens me very much

[kavin-90]

@tycoons js fiddle is unable to make it because it need php to test.

[tycoons]

@kavin-90
To check my post I made an alert to see the info before seeing the php

[kavin-90]

@tycoons i'm testing it on fiddle.

Here is my php code test it . Its show tinymce content.

http://kopy.io/jvetk

I'm fixing no tinymce content

to fix tinymce content

this.on("sending", function(file, xhr, formData) {
    // Will send the filesize along with the file as POST data.
    var content = tinymce.activeEditor.getContent();
   formData.append('textarea', content)
}); 

You need to give it different name so it will not overwrite. formData.append add it to as first item in $_POST so same name will be overwrite thats why you got NULL because it was overwritten by empty same name..

[tycoons]

i love u thank you very much for big help