Essence of the question:

There is an announcement submission form. You need to upload photos through drag and drop. But you need to do this when sending all form fields, i.e. at a time. Photos should be uploaded without Ajax, because There are no announcements on the server at the time of loading the images. Is it possible to implement such functionality? The browser does not allow javascript to change the sent files.

  • Maybe all the same ajax'om? By submitting the form, you can make a single ajax request with all the data, and after receiving the answer, it can be transferred to a new page. - Sergiks
  • if it could have been an Ajax, I would not have written here) browser file api can help how you think? - andrew
  • that is, you need to do it without js at all? - Blacknife
  • drop can only listen to JavaScript, respectively. further only JS'om handle it. Here someone made a dirty hack : above the drop zone, the usual file input is being pushed under the arm:) It is ingenious, but I wouldn’t do that to production. - Sergiks 2:42 pm
  • I will repeat the sentence with ajax: the user fills out a form, and selects files. Clicks a single "Send" button. But it is caught by JS, who sends form data and files to Ajax. And having received a beating with the id of the saved ad, it rolls the user onto the next track. page. From the outside, it looks like a normal save via a button and POST. - Sergiks

1 answer 1

Solution of your problem:

Article

https://css-tricks.com/drag-and-drop-file-uploading/

Demo

https://css-tricks.com/examples/DragAndDropFileUploading/

The mode Submit On Demand is suitable for you.

All the necessary and step-by-step instructions are present in the article, you can optionally send custom data and submit the form with a regular post multipart/form-data request.