1
I am developing a web page where the user has to fill out the form and then at the end send me all the information so that my company can budget his request.
The form is divided into 6 steps:
1º - Some company information;
2º - The menus that will be used;
3º - A Drag and Drop of Images
fourth - A Drag and Drop of text files
etc....
DRAG AND DROP AREA
HTML
<div class="dropzone" id="dropzone">
<span>Arrastar e soltar ou clique aqui</span>
<div id="uploads"></div>
</div>
That is, the user first loads and displays the photos within the Drag and Drop area. Then at the end of the form, on the Submit button, I need a script (PHP I think), that creates a folder for me inside the server with the name of the Company (to have a better organization) and upload it into the same of all images or files uploaded by the user. After the part of guards the information in the database is no longer a problem but I did not do this part because I need to make sure that the "hardest" part works which is the upload. I don’t even have any code done , I tried some things , as Dropzone and some that I found on the internet but I could not implement any... I think my big problem really is getting that when I click on the send butao I can generate the folder and upload all the files to it.
I appreciate any help, thank you.
Hello Gotcha, I believe that the implementation of your need using Dropzone.js is possible. As I checked, I believe this tutorial can help you: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone only need to create directories in the backend, but one of your needs can be addressed.
– Rafael Withoeft
I will then try to configure the Dropzone and test the part that loads and shows the images. Then I have to make a PHP code in order to generate the folder with the name of the company and upload the right files ?
– gotcha
Exactly Gotcha, Dropzone will only take charge of the "Dropzone" and display the selected files and that tutorial teaches you to configure it not to upload automatically so after that you will only have the job of doing the php backend, which will receive the data and the files, which will need to be processed (validated) and stored :)
– Rafael Withoeft
Okay, now I can have my way. I already managed to put the drag and drop area of Dropzone but now to configure it I have to use the Dropzone.options.myAwesomeDropzone right? in which file I have to put that snippet of code?
– gotcha
For it to work (without setting according to that tutorial yet), is to download his JS from the official website (dropzonejs.com) and add it to your page (<script src="./path/to/Dropzone.js"></script>); Then add a form with the class ("Dropzone") and an input file with name ("file"); Load the page and do a test to see if Dropzone works, after that, follow that tutorial so it doesn’t send files automatically. More installation details on the official website....
– Rafael Withoeft
Then, those tutorial settings you add in some javascript file you already load on the page, or, can be added in the same hand, on the page..., you choose the option that suits you best.
– Rafael Withoeft
Because, there is only one problem, I can not use the <form> to upload the images because , the form is bigger , that is the form involves other things , including the two uploads ... do not know if there is a way to use the Dropzone in a div for example ? so I was able to have two areas and upload the files from both areas to the same dps folder generated. Thank you so much for your help.
– gotcha
Yes, you can just choose the div and add the class ("Dropzone") if I’m not mistaken; if it doesn’t work, you can use the example of the official documentation: // Dropzone class: var myDropzone = new Dropzone("div#myId", { url: "/file/post"}); in your case, it will not have url, pq it will be set to not auto upload.
– Rafael Withoeft
I’ll try to follow your instructions, try to do the best I can... I don’t want to bother you anymore because you’re not my "servant" either:) but thank you very much for your help and continue your good work.
– gotcha
No problem, any questions just let me know.
– Rafael Withoeft
What is the best way to contact you in case of any doubts?
– gotcha
You can call right here, or create a chat room and add me; or you can send an email ([email protected]);
– Rafael Withoeft
So I’ll do it, thanks again :)
– gotcha