├── .gitignore ├── LICENSE ├── README.md ├── env ├── dev │ ├── clj │ │ └── file_upload │ │ │ ├── dev.clj │ │ │ └── repl.clj │ └── cljs │ │ └── file_upload │ │ └── dev.cljs └── prod │ └── cljs │ └── file_upload │ └── prod.cljs ├── project.clj ├── resources └── public │ ├── css │ └── site.css │ └── index.html └── src ├── clj └── file_upload │ ├── handler.clj │ └── server.clj └── cljs └── file_upload └── core.cljs /.gitignore: -------------------------------------------------------------------------------- 1 | /target 2 | /classes 3 | /checkouts 4 | pom.xml 5 | pom.xml.asc 6 | *.jar 7 | *.class 8 | /.lein-* 9 | /.nrepl-port 10 | /resources/public/js 11 | /out 12 | /.repl 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC 2 | LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM 3 | CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT. 4 | 5 | 1. DEFINITIONS 6 | 7 | "Contribution" means: 8 | 9 | a) in the case of the initial Contributor, the initial code and 10 | documentation distributed under this Agreement, and 11 | 12 | b) in the case of each subsequent Contributor: 13 | 14 | i) changes to the Program, and 15 | 16 | ii) additions to the Program; 17 | 18 | where such changes and/or additions to the Program originate from and are 19 | distributed by that particular Contributor. A Contribution 'originates' from 20 | a Contributor if it was added to the Program by such Contributor itself or 21 | anyone acting on such Contributor's behalf. Contributions do not include 22 | additions to the Program which: (i) are separate modules of software 23 | distributed in conjunction with the Program under their own license 24 | agreement, and (ii) are not derivative works of the Program. 25 | 26 | "Contributor" means any person or entity that distributes the Program. 27 | 28 | "Licensed Patents" mean patent claims licensable by a Contributor which are 29 | necessarily infringed by the use or sale of its Contribution alone or when 30 | combined with the Program. 31 | 32 | "Program" means the Contributions distributed in accordance with this 33 | Agreement. 34 | 35 | "Recipient" means anyone who receives the Program under this Agreement, 36 | including all Contributors. 37 | 38 | 2. GRANT OF RIGHTS 39 | 40 | a) Subject to the terms of this Agreement, each Contributor hereby grants 41 | Recipient a non-exclusive, worldwide, royalty-free copyright license to 42 | reproduce, prepare derivative works of, publicly display, publicly perform, 43 | distribute and sublicense the Contribution of such Contributor, if any, and 44 | such derivative works, in source code and object code form. 45 | 46 | b) Subject to the terms of this Agreement, each Contributor hereby grants 47 | Recipient a non-exclusive, worldwide, royalty-free patent license under 48 | Licensed Patents to make, use, sell, offer to sell, import and otherwise 49 | transfer the Contribution of such Contributor, if any, in source code and 50 | object code form. This patent license shall apply to the combination of the 51 | Contribution and the Program if, at the time the Contribution is added by the 52 | Contributor, such addition of the Contribution causes such combination to be 53 | covered by the Licensed Patents. The patent license shall not apply to any 54 | other combinations which include the Contribution. No hardware per se is 55 | licensed hereunder. 56 | 57 | c) Recipient understands that although each Contributor grants the licenses 58 | to its Contributions set forth herein, no assurances are provided by any 59 | Contributor that the Program does not infringe the patent or other 60 | intellectual property rights of any other entity. Each Contributor disclaims 61 | any liability to Recipient for claims brought by any other entity based on 62 | infringement of intellectual property rights or otherwise. As a condition to 63 | exercising the rights and licenses granted hereunder, each Recipient hereby 64 | assumes sole responsibility to secure any other intellectual property rights 65 | needed, if any. For example, if a third party patent license is required to 66 | allow Recipient to distribute the Program, it is Recipient's responsibility 67 | to acquire that license before distributing the Program. 68 | 69 | d) Each Contributor represents that to its knowledge it has sufficient 70 | copyright rights in its Contribution, if any, to grant the copyright license 71 | set forth in this Agreement. 72 | 73 | 3. REQUIREMENTS 74 | 75 | A Contributor may choose to distribute the Program in object code form under 76 | its own license agreement, provided that: 77 | 78 | a) it complies with the terms and conditions of this Agreement; and 79 | 80 | b) its license agreement: 81 | 82 | i) effectively disclaims on behalf of all Contributors all warranties and 83 | conditions, express and implied, including warranties or conditions of title 84 | and non-infringement, and implied warranties or conditions of merchantability 85 | and fitness for a particular purpose; 86 | 87 | ii) effectively excludes on behalf of all Contributors all liability for 88 | damages, including direct, indirect, special, incidental and consequential 89 | damages, such as lost profits; 90 | 91 | iii) states that any provisions which differ from this Agreement are offered 92 | by that Contributor alone and not by any other party; and 93 | 94 | iv) states that source code for the Program is available from such 95 | Contributor, and informs licensees how to obtain it in a reasonable manner on 96 | or through a medium customarily used for software exchange. 97 | 98 | When the Program is made available in source code form: 99 | 100 | a) it must be made available under this Agreement; and 101 | 102 | b) a copy of this Agreement must be included with each copy of the Program. 103 | 104 | Contributors may not remove or alter any copyright notices contained within 105 | the Program. 106 | 107 | Each Contributor must identify itself as the originator of its Contribution, 108 | if any, in a manner that reasonably allows subsequent Recipients to identify 109 | the originator of the Contribution. 110 | 111 | 4. COMMERCIAL DISTRIBUTION 112 | 113 | Commercial distributors of software may accept certain responsibilities with 114 | respect to end users, business partners and the like. While this license is 115 | intended to facilitate the commercial use of the Program, the Contributor who 116 | includes the Program in a commercial product offering should do so in a 117 | manner which does not create potential liability for other Contributors. 118 | Therefore, if a Contributor includes the Program in a commercial product 119 | offering, such Contributor ("Commercial Contributor") hereby agrees to defend 120 | and indemnify every other Contributor ("Indemnified Contributor") against any 121 | losses, damages and costs (collectively "Losses") arising from claims, 122 | lawsuits and other legal actions brought by a third party against the 123 | Indemnified Contributor to the extent caused by the acts or omissions of such 124 | Commercial Contributor in connection with its distribution of the Program in 125 | a commercial product offering. The obligations in this section do not apply 126 | to any claims or Losses relating to any actual or alleged intellectual 127 | property infringement. In order to qualify, an Indemnified Contributor must: 128 | a) promptly notify the Commercial Contributor in writing of such claim, and 129 | b) allow the Commercial Contributor tocontrol, and cooperate with the 130 | Commercial Contributor in, the defense and any related settlement 131 | negotiations. The Indemnified Contributor may participate in any such claim 132 | at its own expense. 133 | 134 | For example, a Contributor might include the Program in a commercial product 135 | offering, Product X. That Contributor is then a Commercial Contributor. If 136 | that Commercial Contributor then makes performance claims, or offers 137 | warranties related to Product X, those performance claims and warranties are 138 | such Commercial Contributor's responsibility alone. Under this section, the 139 | Commercial Contributor would have to defend claims against the other 140 | Contributors related to those performance claims and warranties, and if a 141 | court requires any other Contributor to pay any damages as a result, the 142 | Commercial Contributor must pay those damages. 143 | 144 | 5. NO WARRANTY 145 | 146 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON 147 | AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER 148 | EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR 149 | CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A 150 | PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the 151 | appropriateness of using and distributing the Program and assumes all risks 152 | associated with its exercise of rights under this Agreement , including but 153 | not limited to the risks and costs of program errors, compliance with 154 | applicable laws, damage to or loss of data, programs or equipment, and 155 | unavailability or interruption of operations. 156 | 157 | 6. DISCLAIMER OF LIABILITY 158 | 159 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY 160 | CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, 161 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION 162 | LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 163 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 164 | ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE 165 | EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY 166 | OF SUCH DAMAGES. 167 | 168 | 7. GENERAL 169 | 170 | If any provision of this Agreement is invalid or unenforceable under 171 | applicable law, it shall not affect the validity or enforceability of the 172 | remainder of the terms of this Agreement, and without further action by the 173 | parties hereto, such provision shall be reformed to the minimum extent 174 | necessary to make such provision valid and enforceable. 175 | 176 | If Recipient institutes patent litigation against any entity (including a 177 | cross-claim or counterclaim in a lawsuit) alleging that the Program itself 178 | (excluding combinations of the Program with other software or hardware) 179 | infringes such Recipient's patent(s), then such Recipient's rights granted 180 | under Section 2(b) shall terminate as of the date such litigation is filed. 181 | 182 | All Recipient's rights under this Agreement shall terminate if it fails to 183 | comply with any of the material terms or conditions of this Agreement and 184 | does not cure such failure in a reasonable period of time after becoming 185 | aware of such noncompliance. If all Recipient's rights under this Agreement 186 | terminate, Recipient agrees to cease use and distribution of the Program as 187 | soon as reasonably practicable. However, Recipient's obligations under this 188 | Agreement and any licenses granted by Recipient relating to the Program shall 189 | continue and survive. 190 | 191 | Everyone is permitted to copy and distribute copies of this Agreement, but in 192 | order to avoid inconsistency the Agreement is copyrighted and may only be 193 | modified in the following manner. The Agreement Steward reserves the right to 194 | publish new versions (including revisions) of this Agreement from time to 195 | time. No one other than the Agreement Steward has the right to modify this 196 | Agreement. The Eclipse Foundation is the initial Agreement Steward. The 197 | Eclipse Foundation may assign the responsibility to serve as the Agreement 198 | Steward to a suitable separate entity. Each new version of the Agreement will 199 | be given a distinguishing version number. The Program (including 200 | Contributions) may always be distributed subject to the version of the 201 | Agreement under which it was received. In addition, after a new version of 202 | the Agreement is published, Contributor may elect to distribute the Program 203 | (including its Contributions) under the new version. Except as expressly 204 | stated in Sections 2(a) and 2(b) above, Recipient receives no rights or 205 | licenses to the intellectual property of any Contributor under this 206 | Agreement, whether expressly, by implication, estoppel or otherwise. All 207 | rights in the Program not expressly granted under this Agreement are 208 | reserved. 209 | 210 | This Agreement is governed by the laws of the State of New York and the 211 | intellectual property laws of the United States of America. No party to this 212 | Agreement will bring a legal action under this Agreement more than one year 213 | after the cause of action arose. Each party waives its rights to a jury trial 214 | in any resulting litigation. 215 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | File Upload Examples/Experiments 2 | ================================ 3 | 4 | This repo just contains some experiments I've been doing with adding a file upload 5 | facility to a Reagent based SPA. I'm currently working on a Reagent based SPA which 6 | requires the ability for the user to upload files. Once uploaded, the files are 7 | processed by the server and inserted into a database. 8 | 9 | Of course the easy way to do this would be to just have a standard form embedded in 10 | my page and let the browser pretty much handle the whole process. However, the files 11 | I am working with can be quite large and can take a while to process. Therefore, I 12 | wanted a little bit more control and want to make as much of this happen in the 13 | *background* as possible. I also want to work out how to best provide feedback to the 14 | user so that they know what stage of processing things are up to and so that they can 15 | continue doing other *stuff* which does not depend on the data currently being 16 | processed. For all these reasons, I figured it was better to upload the files using an 17 | *Ajax* style approach. 18 | 19 | So far, I have identified 3 different solutions which look promising. As usual, they 20 | all have their own pros and cons. I'm not sure which approach I'll settle on 21 | yet. However, I thought it might be worthwhile making what I've done available just 22 | in case someone else might find it useful, might have some improvement suggestions or 23 | might be able to identify yet another solution I've not tried. 24 | 25 | So far, the three techniques I've looked at and will attempt are 26 | 27 | - cljs-ajax and js/FormData. I already use the cljs-ajax library to amke calls to 28 | the server, so this method seems like a good starting point. The limitation of 29 | using js/FormData is that not all browsers support it. In particular, Internet 30 | Exploader does not. 31 | 32 | - goog.net.IframIo. This looks like a good cross-browser solution which should 33 | work regardless of the browser. The only drawback is you have to drag in 34 | additional Google Closure stuff. 35 | 36 | - goog.net.XhrIo. This seems like the +recommended+ solution found in all the 37 | documentation I was able to locate for Google's Closure library. Not sure what 38 | the advantages/disadvantages are over IframIo. 39 | 40 | Running The Example 41 | ------------------- 42 | 43 | To run the example, 44 | 45 | 1. Cone the repo to your local system 46 | 47 | 2. cd into the root and run 48 | 49 | `lein ring server` 50 | 51 | 3. In another terminal run 52 | 53 | `lein figwheel` 54 | 55 | 4. In your browser, visit http://localhost:3000 56 | 57 | 58 | **WARNING** This repo is my playground and a rough experiment and PoC. It will almost 59 | certainly have errors, will constantly be in need of re-factoring and will lack any 60 | clear design. I will try to re-factor and clean things up once I feel a certain level 61 | of stability has been reached. This is not a repo with clear canned recipes you can 62 | just plug into your own project. However, it may just have enough information to get 63 | you started or give you the inspiration for a better solution. 64 | 65 | I probably should mention, I'm not much of a web programmer. The last time I did any 66 | serous web programming was in the late 90's using Java and Perl. Ajax had not yet 67 | been proposed, Java was at version 1.0 and Perl was King/Queen. Mobile devices 68 | consisted of dumb phones which were so large you had to hand them on your belt, 69 | tablets were things prescribed by doctors and laptops were more luggable than 70 | portable. At that time, Javascript was more a curiosity than a central tool for web 71 | development. 72 | 73 | Recently, I've been inspired to get back up to speed. This has mainly been due to the 74 | re-invigorating properties of programming in Clojure. For me, Clojure and more 75 | recently ClojureScript have brought back an enjoyment of programming I'd nearly 76 | forgotten. While my progress has been OK (after some years of working with various 77 | Lisp dialects back in the 80's, I'm pretty comfortable with the basic concepts of 78 | Clojure), perhaps my weakest area is still JavaScript. This can mean that some of my 79 | code, especially where I need to interact at a lower level in my ClojureScript, is a 80 | bit clunky, even less elegant than normal and probably has lots of mistakes. I am 81 | trying to work on my Javascript skills, but to be honest, whenever I start looking at 82 | Javascript code, my eyes begin to hurt, I get an ache in my stomach and spend more 83 | time wondering how such an ugly child managed to become so popular. I guess beauty 84 | really is in the eye of the beholder. Regardless of my irrelevant assessment of 85 | Javascript, there is no denying that it has significantly enhanced web applications 86 | and inspired solutions which simply were not possible without it. 87 | 88 | -------------------------------------------------------------------------------- /env/dev/clj/file_upload/dev.clj: -------------------------------------------------------------------------------- 1 | (ns file-upload.dev 2 | (:require [cemerick.piggieback :as piggieback] 3 | [weasel.repl.websocket :as weasel] 4 | [leiningen.core.main :as lein])) 5 | 6 | (defn browser-repl [] 7 | (piggieback/cljs-repl (weasel/repl-env :ip "127.0.0.1" :port 9001))) 8 | 9 | (defn start-figwheel [] 10 | (future 11 | (print "Starting figwheel.\n") 12 | (lein/-main ["figwheel"]))) 13 | -------------------------------------------------------------------------------- /env/dev/clj/file_upload/repl.clj: -------------------------------------------------------------------------------- 1 | (ns file-upload.repl 2 | (:use file-upload.handler 3 | file-upload.dev 4 | ring.server.standalone 5 | [ring.middleware file-info file])) 6 | 7 | (defonce server (atom nil)) 8 | 9 | (defn get-handler [] 10 | ;; #'app expands to (var app) so that when we reload our code, 11 | ;; the server is forced to re-resolve the symbol in the var 12 | ;; rather than having its own copy. When the root binding 13 | ;; changes, the server picks it up without having to restart. 14 | (-> #'app 15 | ; Makes static assets in $PROJECT_DIR/resources/public/ available. 16 | (wrap-file "resources") 17 | ; Content-Type, Content-Length, and Last Modified headers for files in body 18 | (wrap-file-info))) 19 | 20 | (defn start-server 21 | "used for starting the server in development mode from REPL" 22 | [& [port]] 23 | (let [port (if port (Integer/parseInt port) 3000)] 24 | (reset! server 25 | (serve (get-handler) 26 | {:port port 27 | :auto-reload? true 28 | :join? false})) 29 | (println (str "You can view the site at http://localhost:" port)))) 30 | 31 | (defn stop-server [] 32 | (.stop @server) 33 | (reset! server nil)) 34 | -------------------------------------------------------------------------------- /env/dev/cljs/file_upload/dev.cljs: -------------------------------------------------------------------------------- 1 | (ns ^:figwheel-no-load file-upload.dev 2 | (:require [file-upload.core :as core] 3 | [figwheel.client :as figwheel :include-macros true] 4 | [weasel.repl :as weasel] 5 | [reagent.core :as r])) 6 | 7 | (enable-console-print!) 8 | 9 | (figwheel/watch-and-reload 10 | :websocket-url "ws://localhost:3449/figwheel-ws" 11 | :jsload-callback core/mount-root) 12 | 13 | (weasel/connect "ws://localhost:9001" :verbose true) 14 | 15 | (core/init!) 16 | -------------------------------------------------------------------------------- /env/prod/cljs/file_upload/prod.cljs: -------------------------------------------------------------------------------- 1 | (ns file-upload.prod 2 | (:require [file-upload.core :as core])) 3 | 4 | ;;ignore println statements in prod 5 | (set! *print-fn* (fn [& _])) 6 | 7 | (core/init!) 8 | -------------------------------------------------------------------------------- /project.clj: -------------------------------------------------------------------------------- 1 | (defproject file-upload "0.1.0-SNAPSHOT" 2 | :description "An experiment in doing file uploads from within a Reagent SPA" 3 | :license {:name "Eclipse Public License" 4 | :url "http://www.eclipse.org/legal/epl-v10.html"} 5 | 6 | :source-paths ["src/clj" "src/cljs"] 7 | 8 | :dependencies [[org.clojure/clojure "1.7.0-beta3"] 9 | [org.clojure/tools.reader "0.9.2"] 10 | [ring-server "0.4.0"] 11 | [cljsjs/react "0.13.3-0"] 12 | [reagent "0.5.0"] 13 | [reagent-forms "0.5.1"] 14 | [reagent-utils "0.1.4"] 15 | [ring "1.3.2"] 16 | [ring/ring-defaults "0.1.5"] 17 | [ring-middleware-format "0.5.0"] 18 | [cheshire "5.5.0"] 19 | [prone "0.8.2"] 20 | [compojure "1.3.4"] 21 | [environ "1.0.0"] 22 | [org.clojure/clojurescript "0.0-3308" :scope "provided"] 23 | [cljs-ajax "0.3.13"] 24 | [secretary "1.2.3"]] 25 | 26 | :plugins [[lein-ring "0.9.4"] 27 | [lein-environ "1.0.0"] 28 | [lein-asset-minifier "0.2.2"]] 29 | 30 | :ring {:handler file-upload.handler/app 31 | :uberwar-name "file-upload.war"} 32 | 33 | :min-lein-version "2.5.0" 34 | 35 | :uberjar-name "file-upload.jar" 36 | 37 | :main file-upload.server 38 | 39 | :clean-targets ^{:protect false} ["resources/public/js"] 40 | 41 | :minify-assets 42 | {:assets 43 | {"resources/public/css/site.min.css" "resources/public/css/site.css"}} 44 | 45 | :cljsbuild {:builds {:app {:source-paths ["src/cljs"] 46 | :compiler {:output-to "resources/public/js/app.js" 47 | :output-dir "resources/public/js/out" 48 | :asset-path "js/out" 49 | :optimizations :none 50 | :pretty-print true}}}} 51 | 52 | :profiles {:dev {:repl-options {:init-ns file-upload.repl 53 | :nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]} 54 | 55 | :dependencies [[ring-mock "0.1.5"] 56 | [ring/ring-devel "1.3.2"] 57 | [weasel "0.7.0"] 58 | [leiningen-core "2.5.1"] 59 | [com.cemerick/piggieback "0.2.1"] 60 | [org.clojure/tools.nrepl "0.2.10"] 61 | [pjstadig/humane-test-output "0.7.0"]] 62 | 63 | :source-paths ["env/dev/clj"] 64 | :plugins [[lein-figwheel "0.3.3"] 65 | [lein-cljsbuild "1.0.6"]] 66 | 67 | :injections [(require 'pjstadig.humane-test-output) 68 | (pjstadig.humane-test-output/activate!)] 69 | 70 | :figwheel {:http-server-root "public" 71 | :server-port 3449 72 | :css-dirs ["resources/public/css"] 73 | :ring-handler file-upload.handler/app} 74 | 75 | :env {:dev true} 76 | 77 | :cljsbuild {:builds {:app {:source-paths ["env/dev/cljs"] 78 | :compiler {:main "file-upload.dev" 79 | :source-map true}} 80 | } 81 | }} 82 | 83 | :uberjar {:hooks [leiningen.cljsbuild minify-assets.plugin/hooks] 84 | :env {:production true} 85 | :aot :all 86 | :omit-source true 87 | :cljsbuild {:jar true 88 | :builds {:app 89 | {:source-paths ["env/prod/cljs"] 90 | :compiler 91 | {:optimizations :advanced 92 | :pretty-print false}}}}}}) 93 | -------------------------------------------------------------------------------- /resources/public/css/site.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theophilusx/file-upload/d2fcb5574079c9de486c3b796727c677fa34581b/resources/public/css/site.css -------------------------------------------------------------------------------- /resources/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | File Upload Expeiments 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

File Upload Experiments

18 |
19 | Loading javascript.... 20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/clj/file_upload/handler.clj: -------------------------------------------------------------------------------- 1 | (ns file-upload.handler 2 | (:require [clojure.java.io :as io] 3 | [compojure.core :refer [GET POST defroutes]] 4 | [compojure.route :refer [not-found resources]] 5 | [ring.middleware.defaults :refer [site-defaults wrap-defaults]] 6 | [ring.middleware.format :refer [wrap-restful-format]] 7 | [prone.middleware :refer [wrap-exceptions]] 8 | [cheshire.core :refer [generate-string]] 9 | [environ.core :refer [env]] 10 | [clojure.java.io :as io])) 11 | 12 | (defn make-response [status value-map] 13 | {:status status 14 | :headers {"Content-Type" "application/json"} 15 | :body (generate-string value-map)}) 16 | 17 | (defn handle-upload [{:keys [filename size tempfile] :as params}] 18 | (println (str "Params: " params)) 19 | (println (str "handle-upload: Filename: " (or filename "null") " size: " 20 | (or size 0) " tempfile: " (str (or tempfile "null")))) 21 | ;; lets slow things down so that we can see an upload indicator 22 | (Thread/sleep 5000) 23 | (cond 24 | ;; Seems ajax-cljs sets filename to null when no file selected prior to 25 | ;; clicking upload button, but IframeIo sends "" 26 | (or (not filename) 27 | (= "" filename)) 28 | (make-response 400 {:status "ERROR" 29 | :message "No file parameter sent"}) 30 | (< size 100) 31 | (make-response 400 {:status "ERROR" 32 | :message (str "File less than 100 bytes" 33 | " - Can't be bothered")}) 34 | (>= size 100) 35 | (make-response 200 {:status "OK" 36 | :filename filename 37 | :size (or size 0) 38 | :tempfile (str tempfile)}) 39 | :else (make-response 400 {:status "ERROR" 40 | :message "Unexpected Error"}))) 41 | 42 | (defroutes routes 43 | (GET "/" [] (slurp (io/resource "public/index.html"))) 44 | (POST "/upload" [upload-file] (handle-upload upload-file)) 45 | (resources "/") 46 | (not-found "Not Found")) 47 | 48 | (def app 49 | ;; We turn off CSRF protection for this recipe to keep things simple 50 | ;; You can use CSRF protection with Ajax/API type applications 51 | ;; but you must add a mechanism for the client to get the current 52 | ;; session anti-forgery toekn, which you then pass back in a header when 53 | ;; doing AJAX/API calls 54 | ;; We add the wrap-restful-format middleware because it just makes things 55 | ;; simple. 56 | (-> routes 57 | wrap-restful-format 58 | (wrap-defaults (assoc-in site-defaults [:security :anti-forgery] false)) 59 | wrap-exceptions)) 60 | 61 | -------------------------------------------------------------------------------- /src/clj/file_upload/server.clj: -------------------------------------------------------------------------------- 1 | (ns file-upload.server 2 | (:require [file-upload.handler :refer [app]] 3 | [environ.core :refer [env]] 4 | [ring.adapter.jetty :refer [run-jetty]]) 5 | (:gen-class)) 6 | 7 | (defn -main [& args] 8 | (let [port (Integer/parseInt (or (env :port) "3000"))] 9 | (run-jetty app {:port port :join? false}))) 10 | -------------------------------------------------------------------------------- /src/cljs/file_upload/core.cljs: -------------------------------------------------------------------------------- 1 | (ns file-upload.core 2 | (:require [reagent.core :as reagent :refer [atom]] 3 | [reagent.session :as session] 4 | [secretary.core :as secretary :include-macros true] 5 | [ajax.core :refer [POST]] 6 | [goog.events :as events] 7 | [goog.history.EventType :as HistoryEventType]) 8 | (:import goog.History 9 | goog.net.IframeIo 10 | goog.net.EventType)) 11 | 12 | ;; ------------------------- 13 | ;; Views 14 | 15 | (defn status-component [] 16 | (if-let [status (session/get :upload-status)] 17 | [:div 18 | [:h3 "Status"] 19 | status])) 20 | 21 | (defn upload-component [] 22 | [:div 23 | [:form {:id "upload-form" 24 | :enc-type "multipart/form-data" 25 | :method "POST"} 26 | [:labe "Upload Filename: "] 27 | [:input {:type "file" 28 | :name "upload-file" 29 | :id "upload-file"}]]]) 30 | 31 | (defn set-upload-indicator [] 32 | (let [class "fa fa-spinner fa-spin fa-pulse"] 33 | (session/put! :upload-status [:div 34 | [:p "Uploading file... " 35 | [:span {:class class}]]]))) 36 | 37 | (defn into-list [items] 38 | (into [:ul] 39 | (for [i items] 40 | [:li i]))) 41 | 42 | (defn set-status [class title items] 43 | [:div {:class class} 44 | [:h4 title] 45 | (into-list items)]) 46 | 47 | ;;; cljs-ajax upload routines 48 | (defn handle-response-ok [resp] 49 | (let [rsp (js->clj resp :keywordize-keys true) 50 | status (set-status "alert alert-success" 51 | "Upload Successful" 52 | [(str "Filename: " (:filename rsp)) 53 | (str "Size: " (:size rsp)) 54 | (str "Tempfile: " (:tempfile rsp))])] 55 | (session/put! :upload-status status))) 56 | 57 | (defn handle-response-error [ctx] 58 | (let [rsp (js->clj (:response ctx) :keywordize-keys true) 59 | status (set-status "alert alert-danger" 60 | "Upload Failure" 61 | [(str "Status: " (:status ctx) " " 62 | (:status-text ctx)) 63 | (str (:message rsp))])] 64 | (.log js/console (str "cljs-ajax error: " status)) 65 | (session/put! :upload-status status))) 66 | 67 | (defn cljs-ajax-upload-file [element-id] 68 | (let [el (.getElementById js/document element-id) 69 | name (.-name el) 70 | file (aget (.-files el) 0) 71 | form-data (doto 72 | (js/FormData.) 73 | (.append name file))] 74 | (POST "/upload" {:params form-data 75 | :response-format :json 76 | :keywords? true 77 | :handler handle-response-ok 78 | :error-handler handle-response-error}) 79 | (set-upload-indicator))) 80 | 81 | (defn cljs-ajax-upload-button [] 82 | [:div 83 | [:hr] 84 | [:button {:class "btn btn-primary" :type "button" 85 | :on-click #(cljs-ajax-upload-file "upload-file")} 86 | "Upload using cljs-ajax " [:span {:class "fa fa-upload"}]]]) 87 | 88 | ;;; goog.net.IFrameIO routines 89 | (defn iframe-response-ok [msg] 90 | (let [status (set-status "alert alert-success" 91 | "Upload Successful" 92 | [(str "Filename: " (:filename msg)) 93 | (str "Size: " (:size msg)) 94 | (str "Tempfile: " (:tempfile msg))])] 95 | (session/put! :upload-status status))) 96 | 97 | (defn iframe-response-error [msg] 98 | (let [status (set-status "alert alert-danger" 99 | "Upload Failure" 100 | [(str "Status: " (:status msg)) 101 | (str (:message msg))])] 102 | (session/put! :upload-status status))) 103 | 104 | (defn handle-iframe-response [json-msg] 105 | (let [msg (js->clj json-msg :keywordize-keys true)] 106 | (.log js/console (str "iframe-response: " msg)) 107 | (cond 108 | (= "OK" (:status msg)) (iframe-response-ok msg) 109 | (= "ERROR" (:status msg)) (iframe-response-error msg) 110 | :else (session/put! :upload-status [:div.alert.alert-danger 111 | [:h4 "Unexpected Error"] 112 | [:ul 113 | [:li (str "Status: " (:status msg))] 114 | [:li (:message msg)]]])))) 115 | ;;; Stole this from Dmitri Sotnikov - thanks. 116 | ;;; Original code is at https://github.com/yogthos 117 | (defn iframeio-upload-file [form-id] 118 | (let [el (.getElementById js/document form-id) 119 | iframe (IframeIo.)] 120 | (events/listen iframe EventType.COMPLETE 121 | (fn [event] 122 | (let [rsp (.getResponseJson iframe) 123 | status ()]) 124 | (handle-iframe-response (.getResponseJson iframe)) 125 | (.dispose iframe))) 126 | (set-upload-indicator) 127 | (.sendFromForm iframe el "/upload"))) 128 | 129 | (defn iframeio-upload-button [] 130 | [:div 131 | [:hr] 132 | [:button {:class "btn btn-primary" 133 | :type "button" 134 | :on-click #(iframeio-upload-file "upload-form")} 135 | "Upload Using IFrameIO " [:span {:class "fa fa-upload"}]]]) 136 | 137 | (defn home-page [] 138 | (fn [] 139 | [:div [:h2 "Welcome to file-upload"] 140 | [:p "This provides an example of different methods to upload a " 141 | "file to the server fro a Reagent based client."] 142 | [status-component] 143 | [upload-component] 144 | [cljs-ajax-upload-button] 145 | [iframeio-upload-button] 146 | [:hr] 147 | [:div [:a {:href "#/about"} "go to about page"]]])) 148 | 149 | (defn about-page [] 150 | [:div [:h2 "About file-upload"] 151 | [:div [:a {:href "#/"} "go to the home page"]]]) 152 | 153 | (defn current-page [] 154 | [:div [(session/get :current-page)]]) 155 | 156 | ;; ------------------------- 157 | ;; Routes 158 | (secretary/set-config! :prefix "#") 159 | 160 | (secretary/defroute "/" [] 161 | (session/put! :current-page #'home-page)) 162 | 163 | (secretary/defroute "/about" [] 164 | (session/put! :current-page #'about-page)) 165 | 166 | ;; ------------------------- 167 | ;; History 168 | ;; must be called after routes have been defined 169 | (defn hook-browser-navigation! [] 170 | (doto (History.) 171 | (events/listen 172 | HistoryEventType/NAVIGATE 173 | (fn [event] 174 | (secretary/dispatch! (.-token event)))) 175 | (.setEnabled true))) 176 | 177 | 178 | ;; ------------------------- 179 | ;; Initialize app 180 | (defn mount-root [] 181 | (reagent/render [current-page] (.getElementById js/document "app"))) 182 | 183 | (defn init! [] 184 | (hook-browser-navigation!) 185 | (mount-root)) 186 | --------------------------------------------------------------------------------