Качване на HTTP файлове с Drag & Drop и незабавно изтегляне на файлове

Моето приложение основно конвертира изображения. Когато качвате изображение, то се обработва на сървъра и сървърът изпраща резултата обратно като прикачен файл, което води до незабавно изтегляне.

Вече работи с обикновена HTML форма, като напр

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

Сървърът отговаря с хедър Content-Disposition=attachment; filename=\"processed.zip\" и т.н.

Разбира се, запасът <input type="file"...> изглежда много грозен и бих искал да му придам различен стил. Освен това, за да подобря потребителското изживяване, бих искал да поддържам плъзгане и пускане за качване на файлове.

Въпреки това, всички рамки за качване на файлове или просто базирано на JavaScript плъзгане и пускане поддържат само "AJAX"-подобни качвания (чрез XMLHTTPRequest). След това обаче незабавното изтегляне не работи.

Има ли някакъв начин, трик, решение за това?


person Moritz Petersen    schedule 23.12.2014    source източник
comment
разгледайте uploadcare.com за подобряване на UX при качване   -  person Dmitry Mukhin    schedule 26.12.2014


Отговори (1)


Досега намерих само следното решение. Той включва JavaScript рамка, Dropzone.js, но ще работи с всяка друга реализация на JavaScript.

  • Работете с плъзгане и пускане и качване с JavaScript
  • Сървърът връща zip файла в кодиране Base64
  • Създайте data: URI
  • Създайте с JavaScript създайте временен <a> елемент и изпълнете събитие click (както е описано в този отговор на StackOverflow)

Това решение работи само защото резултатът е по-малък от 32 KB. В Google Chrome и Firefox изтеглянето дори има подходящо име на файл. В Safari за съжаление не работи.

person Moritz Petersen    schedule 23.12.2014