{"id":8129,"date":"2016-04-09T09:48:43","date_gmt":"2016-04-09T08:48:43","guid":{"rendered":"http:\/\/www.wjst.de\/blog\/?p=8129"},"modified":"2016-04-24T17:21:06","modified_gmt":"2016-04-24T16:21:06","slug":"up-and-download-with-single-page-application","status":"publish","type":"post","link":"https:\/\/www.wjst.de\/blog\/sciencesurf\/2016\/04\/up-and-download-with-single-page-application\/","title":{"rendered":"Up- and download in a single page application"},"content":{"rendered":"<p>This still not a trivial task given the patchwork of code\u00a0pieces floating around. When <a href=\"https:\/\/wjst.de\/cycleplanner\">writing a route finder app<\/a> I came up with the following solution<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n# html\r\n&lt;form id=&quot;myform&quot; enctype=&quot;multipart\/form-data&quot; action=&quot;upload.php&quot; method=&quot;POST&quot; target=&quot;_parent&quot;&gt;\r\n  &lt;input type=&quot;hidden&quot; name=&quot;uuid&quot; value=&quot;1&quot;\/&gt;\r\n  &lt;input id=&quot;myfile&quot; type=&quot;file&quot; name=&quot;file&quot;  style=&quot;display: none;&quot;\/&gt;\r\n  &lt;input type=&quot;submit&quot; value=&quot;send&quot; style=&quot;display: none;&quot;\/&gt;\r\n&lt;\/form&gt;\r\n\r\n# query javascript that starts the upload\r\n$(&quot;input&#x5B;id='myfile']&quot;).click();\r\n\r\n# upload.php\r\n# note the redirect with javascript not with php allows to pass state parameters\r\n$uuid=htmlspecialchars($_POST&#x5B;&quot;uuid&quot;]);\r\n$uf = basename($_FILES&#x5B;'file']&#x5B;'name']);\r\n$fn='data\/'.$uuid.'.gpx';\r\nif (move_uploaded_file($_FILES&#x5B;'file']&#x5B;'tmp_name'], $uf)) {\r\n  rename($_FILES&#x5B;'file']&#x5B;'name'],$fn );\r\n  file_put_contents ($fn , $txt, FILE_APPEND );\r\n  echo '&lt;script type=&quot;text\/javascript&quot;&gt;window.parent.location = &quot;index.php&quot;;&lt;\/script&gt;';\r\n}\r\n<\/pre>\n<p>The upload needs a quick refresh of the webpage (which could be avoided by posting to an hidden iframe and controlling response by\u00a0an ajax call).\u00a0The download doesn&#8217;t need a refresh:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n# note the combined get and post commands\r\n# don't know why this is necessary\r\n$.ajax({\r\n  data: &quot;uuid=&quot;+fn,\r\n  type: &quot;post&quot;,\r\n  url: &quot;download.php&quot;,\r\n  success: function() {\r\n    window.location = 'download.php?uuid='+fn;\r\n  }\r\n});\r\n<\/pre>\n\n<p>&nbsp;<\/p>\n<div class=\"bottom-note\">\n  <span class=\"mod1\">CC-BY-NC Science Surf , accessed 16.04.2026<\/span>\n <\/div>","protected":false},"excerpt":{"rendered":"<p>This still not a trivial task given the patchwork of code\u00a0pieces floating around. When writing a route finder app I came up with the following solution # html &lt;form id=&quot;myform&quot; enctype=&quot;multipart\/form-data&quot; action=&quot;upload.php&quot; method=&quot;POST&quot; target=&quot;_parent&quot;&gt; &lt;input type=&quot;hidden&quot; name=&quot;uuid&quot; value=&quot;1&quot;\/&gt; &lt;input id=&quot;myfile&quot; type=&quot;file&quot; name=&quot;file&quot; style=&quot;display: none;&quot;\/&gt; &lt;input type=&quot;submit&quot; value=&quot;send&quot; style=&quot;display: none;&quot;\/&gt; &lt;\/form&gt; # query javascript that starts &hellip; <a href=\"https:\/\/www.wjst.de\/blog\/sciencesurf\/2016\/04\/up-and-download-with-single-page-application\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Up- and download in a single page application<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-8129","post","type-post","status-publish","format-standard","hentry","category-computer-software"],"_links":{"self":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/8129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/comments?post=8129"}],"version-history":[{"count":7,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/8129\/revisions"}],"predecessor-version":[{"id":8229,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/8129\/revisions\/8229"}],"wp:attachment":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/media?parent=8129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/categories?post=8129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/tags?post=8129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}