0

My application basically converts images. When uploading an image, it is processed at the server and the server sends the result back as an attachment, which results in an immediate download.

It already works with a plain HTML form, such as

<form action="/icon" method="post" enctype="multipart/form-data">
    <input type="file" name="image"/>
    <input type="submit" value="Create"/>
</form>

The server responds with header Content-Disposition=attachment; filename=\"processed.zip\" etc.

Of course, the stock <input type="file"...> has a very ugly look and I'd like to give it a different styling. Additionally, in order to improve user experience, I'd like to support drag & drop for file upload.

However, all file upload frameworks or just plain JavaScript based drag & drop only supports "AJAX"-like uploads (using XMLHTTPRequest). Then, however, the immediate download doesn't work.

Is there any way, a trick, a solution for this?

Moritz Petersen
  • 12,902
  • 3
  • 38
  • 45

1 Answers1

0

Until now I found only the following solution. It involves a JavaScript framework, Dropzone.js, but would work with any other JavaScript implementation.

  • Handle drag & drop and upload with JavaScript
  • Server returns the zip file in Base64 encoding
  • Create a data: URI
  • Create with JavaScript create a temporary <a> element and perform a click event (as described in this StackOverflow answer)

This solution only works, because the result is smaller than 32 KB. In Google Chrome and Firefox, the download even has an adequate filename. In Safari unfortunately it doesn't work.

Community
  • 1
  • 1
Moritz Petersen
  • 12,902
  • 3
  • 38
  • 45