diff --git a/_examples/http_request/upload-files/main.go b/_examples/http_request/upload-files/main.go index a9d574e0..77968e1f 100644 --- a/_examples/http_request/upload-files/main.go +++ b/_examples/http_request/upload-files/main.go @@ -16,16 +16,16 @@ func main() { app.RegisterView(iris.HTML("./templates", ".html")) - // Serve the form.html to the user + // Serve the upload_form.html to the client. app.Get("/upload", func(ctx iris.Context) { - //create a token (optionally) + // create a token (optionally). now := time.Now().Unix() h := md5.New() io.WriteString(h, strconv.FormatInt(now, 10)) token := fmt.Sprintf("%x", h.Sum(nil)) - // render the form with the token for any use you like + // render the form with the token for any use you'd like. ctx.ViewData("", token) ctx.View("upload_form.html") }) @@ -34,7 +34,7 @@ func main() { app.Post("/upload", iris.LimitRequestBodySize(10<<20), func(ctx iris.Context) { // or use ctx.SetMaxRequestBodySize(10 << 20) - //to limit the uploaded file(s) size. + // to limit the uploaded file(s) size. // Get the file from the request file, info, err := ctx.FormFile("uploadfile") diff --git a/_examples/http_request/upload-files/templates/upload_form.html b/_examples/http_request/upload-files/templates/upload_form.html index 55350ff8..9782eadf 100644 --- a/_examples/http_request/upload-files/templates/upload_form.html +++ b/_examples/http_request/upload-files/templates/upload_form.html @@ -4,7 +4,7 @@
+ action="http://127.0.0.1:8080/upload" method="POST">
diff --git a/_examples/tutorial/dropzonejs/README.md b/_examples/tutorial/dropzonejs/README.md new file mode 100644 index 00000000..b296a3b8 --- /dev/null +++ b/_examples/tutorial/dropzonejs/README.md @@ -0,0 +1,160 @@ +This is the part 1 of 2 in DropzoneJS + Go series. + +- [Part 1: How to build a file upload form](README.md) +- [Part 2: How to display existing files on server](README_NEXT.md) + +# DropzoneJS + Go: How to build a file upload form + +[DropzoneJS](https://github.com/enyo/dropzone) is an open source library that provides drag'n'drop file uploads with image previews. It is a great JavaScript library which actually does not even rely on JQuery. +In this tutorial, we are building a multiple file upload form using DropzoneJS, and the backend will be handled by Go and [Iris](https://iris-go.com). + +## Table Of Content + +- [Preparation](#preparation) +- [Work with DropzoneJS](#work-with-dropzonejs) +- [Work with Go](#work-with-go) + +## Preparation + +1. Download [Go(Golang)](https://golang.org/dl), setup your computer as shown there and continue to 2. +2. Install [Iris](https://github.com/kataras/iris); open a terminal and execute `go get -u github.com/kataras/iris` +3. Download DropzoneJS from [this URL](https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js). DropzoneJS does not rely on JQuery, you will not have to worry that, upgrading JQuery version breaks your application. +4. Download dropzone.css from [this URL](https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.css), if you want some already made css. +5. Create a folder "./public/uploads", this is for storing uploaded files. +6. Create a file "./views/upload.html", this is for the front form page. +7. Create a file "./main.go", this is for handling backend file upload process. + +Your folder&file structure should look like this after the preparation: + +![folder&file structure](folder_structure.png) + +## Work with DropzoneJS + +Open file "./views/upload.html" and let us create a DropzoneJs form. + +Copy the content below to "./views/upload.html" and we will go through each line of code individually. + +```html + + + + + DropzoneJS Uploader + + + + + + + + + + + +
+
+ + +
+
+ + + +``` + +1. Include the CSS Stylesheet. +2. Include DropzoneJS JavaScript library. +3. Create an upload form with css class "dropzone" and "action" is the route path "/upload". Note that we did create an input filed for fallback mode. This is all handled by DropzoneJS library itself. All we need to do is assign css class "dropzone" to the form. By default, DropzoneJS will find all forms with class "dropzone" and automatically attach itself to it. + +## Work with Go + +Now you have come to Last part of the tutorial. In this section, we will store files sent from DropzoneJS to the "./public/uploads" folder. + +Open "main.go" and copy the code below: + +```go +// main.go + +package main + +import ( + "os" + "io" + "strings" + + "github.com/kataras/iris" +) + +const uploadsDir = "./public/uploads/" + +func main() { + app := iris.New() + + // Register templates + app.RegisterView(iris.HTML("./views", ".html")) + + // Make the /public route path to statically serve the ./public/... contents + app.StaticWeb("/public", "./public") + + // Render the actual form + // GET: http://localhost:8080 + app.Get("/", func(ctx iris.Context) { + ctx.View("upload.html") + }) + + // Upload the file to the server + // POST: http://localhost:8080/upload + app.Post("/upload", iris.LimitRequestBodySize(10<<20), func(ctx iris.Context) { + // Get the file from the dropzone request + file, info, err := ctx.FormFile("file") + if err != nil { + ctx.StatusCode(iris.StatusInternalServerError) + ctx.Application().Logger().Warnf("Error while uploading: %v", err.Error()) + return + } + + defer file.Close() + fname := info.Filename + + // Create a file with the same name + // assuming that you have a folder named 'uploads' + out, err := os.OpenFile(uploadsDir+fname, + os.O_WRONLY|os.O_CREATE, 0666) + + if err != nil { + ctx.StatusCode(iris.StatusInternalServerError) + ctx.Application().Logger().Warnf("Error while preparing the new file: %v", err.Error()) + return + } + defer out.Close() + + io.Copy(out, file) + }) + + // Start the server at http://localhost:8080 + app.Run(iris.Addr(":8080")) +} +``` + +1. Create a new Iris app. +2. Register and load templates from the "views" folder. +3. Make the "/public" route path to statically serve the ./public/... folder's contents +4. Create a route to serve the upload form. +5. Create a route to handle the POST form data from the DropzoneJS' form +6. Declare a variable for destination folder. +7. If file is sent to the page, store the file object to a temporary "file" variable. +8. Move uploaded file to destination based on the uploadsDir+uploaded file's name. + +**Run the server** +Open the terminal at the current project's folder and execute: + +```bash +$ go run main.go +Now listening on: http://localhost:8080 +Application started. Press CTRL+C to shut down. +``` + +Now go to browser, and navigate to http://localhost:8080, you should be able to see a page as below: + +![no files screenshot](no_files.png) +![with uploaded files screenshot](with_files.png) \ No newline at end of file diff --git a/_examples/tutorial/dropzonejs/README_NEXT.MD b/_examples/tutorial/dropzonejs/README_NEXT.MD new file mode 100644 index 00000000..a28eb823 --- /dev/null +++ b/_examples/tutorial/dropzonejs/README_NEXT.MD @@ -0,0 +1,303 @@ +This is the part 2 of 2 in DropzoneJS + Go series. + +- [Part 1: How to build a file upload form](README.md) +- [Part 2: How to display existing files on server](README_NEXT.md) + +# DropzoneJS + Go: How to display existing files on server + +In this tutorial, we will show you how to display existing files on the server when using DropzoneJs and Go. This tutorial is based on [How to build a file upload form using DropzoneJs and Go](README.md). Make sure you have read it before proceeding to content in this tutorial. + +## Table Of Content + +- [Preparation](#preparation) +- [Modify the Server side](#modify-the-server-side) +- [Modify the Client side](#modify-the-client-side) +- [References](#references) +- [The End](#the-end) + +## Preparation + +Install the go package "nfnt/resize" with `go get github.com/nfnt/resize`, we need it to create thumbnails. + +In previous [tutorial](README.md). We have already set up a proper working DropzoneJs upload form. There is no additional file needed for this tutorial. What we need to do is to make some modifications to file below: + +1. main.go +2. views/upload.html + +Let us get started! + +## Modify the Server side + +In previous tutorial. All "/upload" does is to store uploaded files to the server directory "./public/uploads". So we need to add a piece of code to retrieve stored files' information (name and size), and return it in JSON format. + +Copy the content below to "main.go". Read comments for details. + +```go +// main.go + +package main + +import ( + "image/jpeg" + "image/png" + "io" + "os" + "path" + "path/filepath" + "strings" + "sync" + + "github.com/kataras/iris" + + "github.com/nfnt/resize" // $ go get -u github.com/nfnt/resize +) + +const uploadsDir = "./public/uploads/" + +type uploadedFile struct { + // {name: "", size: } are the dropzone's only requirements. + Name string `json:"name"` + Size int64 `json:"size"` +} + +type uploadedFiles struct { + dir string + items []uploadedFile + mu sync.RWMutex // slices are safe but RWMutex is a good practise for you. +} + +// scan the ./public/uploads folder for any files +// add them to a new uploadedFiles list. +func scanUploads(dir string) *uploadedFiles { + f := new(uploadedFiles) + + lindex := dir[len(dir)-1] + if lindex != os.PathSeparator && lindex != '/' { + dir += string(os.PathSeparator) + } + + // create directories if necessary + // and if, then return empty uploaded files; skipping the scan. + if err := os.MkdirAll(dir, os.FileMode(0666)); err != nil { + return f + } + + // otherwise scan the given "dir" for files. + f.scan(dir) + return f +} + +func (f *uploadedFiles) scan(dir string) { + f.dir = dir + filepath.Walk(dir, func(path string, info os.FileInfo, err error) error { + + // if it's directory or a thumbnail we saved ealier, skip it. + if info.IsDir() || strings.HasPrefix(info.Name(), "thumbnail_") { + return nil + } + + f.add(info.Name(), info.Size()) + return nil + }) +} + +// add the file's Name and Size to the uploadedFiles memory list +func (f *uploadedFiles) add(name string, size int64) uploadedFile { + f.mu.Lock() + uf := uploadedFile{ + Name: name, + Size: size, + } + f.items = append(f.items, uf) + f.mu.Unlock() + + return uf +} + +// create thumbnail 100x100 +// and save that to the ./public/uploads/thumbnail_$FILENAME +func (f *uploadedFiles) createThumbnail(uf uploadedFile) { + file, err := os.Open(path.Join(f.dir, uf.Name)) + if err != nil { + return + } + defer file.Close() + + name := strings.ToLower(uf.Name) + + out, err := os.OpenFile(f.dir+"thumbnail_"+uf.Name, + os.O_WRONLY|os.O_CREATE, 0666) + if err != nil { + return + } + defer out.Close() + + if strings.HasSuffix(name, ".jpg") { + // decode jpeg into image.Image + img, err := jpeg.Decode(file) + if err != nil { + return + } + + // write new image to file + resized := resize.Thumbnail(180, 180, img, resize.Lanczos3) + jpeg.Encode(out, resized, + &jpeg.Options{Quality: jpeg.DefaultQuality}) + + } else if strings.HasSuffix(name, ".png") { + img, err := png.Decode(file) + if err != nil { + return + } + + // write new image to file + resized := resize.Thumbnail(180, 180, img, resize.Lanczos3) // slower but better res + png.Encode(out, resized) + } + // and so on... you got the point, this code can be simplify, as a practise. +} + +func main() { + app := iris.New() + app.RegisterView(iris.HTML("./views", ".html")) + + app.StaticWeb("/public", "./public") + + app.Get("/", func(ctx iris.Context) { + ctx.View("upload.html") + }) + + files := scanUploads(uploadsDir) + + app.Get("/uploads", func(ctx iris.Context) { + ctx.JSON(files.items) + }) + + app.Post("/upload", iris.LimitRequestBodySize(10<<20), func(ctx iris.Context) { + // Get the file from the dropzone request + file, info, err := ctx.FormFile("file") + if err != nil { + ctx.StatusCode(iris.StatusInternalServerError) + ctx.Application().Logger().Warnf("Error while uploading: %v", err.Error()) + return + } + + defer file.Close() + fname := info.Filename + + // Create a file with the same name + // assuming that you have a folder named 'uploads' + out, err := os.OpenFile(uploadsDir+fname, + os.O_WRONLY|os.O_CREATE, 0666) + + if err != nil { + ctx.StatusCode(iris.StatusInternalServerError) + ctx.Application().Logger().Warnf("Error while preparing the new file: %v", err.Error()) + return + } + defer out.Close() + + io.Copy(out, file) + + // optionally, add that file to the list in order to be visible when refresh. + uploadedFile := files.add(fname, info.Size) + go files.createThumbnail(uploadedFile) + }) + + // start the server at http://localhost:8080 + app.Run(iris.Addr(":8080")) +} +``` + +## Modify the Client side + +Copy content below to "./views/upload.html". We will go through modifications individually. + +```html + + + + + DropzoneJS Uploader + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + +``` + +1. We added Jquery library into our page. This actually not for DropzoneJs directly. We are using Jquery's ajax function **$.get** only. You will see below +2. We added an ID element (my-dropzone) to the form. This is needed because we need to pass configuration values to Dropzone. And to do it, we must have an ID reference of it. So that we can configure it by assigning values to Dropzone.options.myDropzone. A lot of people face confusion when configuring Dropzone. To put it in a simple way. Do not take Dropzone as a Jquery plugin, it has its own syntax and you need to follow it. +3. This starts the main part of modification. What we did here is to pass a function to listen to Dropzone's init event. This event is called when Dropzone is initialized. +4. Retrieve files details from the new "/uploads" via ajax. +5. Create mockFile using values from server. mockFile is simply JavaScript objects with properties of name and size. Then we call Dropzone's **addedfile** and **thumbnail** functions explicitly to put existing files to Dropzone upload area and generate its thumbnail. + + +**Run the server** +Open the terminal at the current project's folder and execute: + +```bash +$ go run main.go +Now listening on: http://localhost:8080 +Application started. Press CTRL+C to shut down. +``` + +If you have done it successfully. Now go and upload some images and reload the upload page. Already uploaded files should auto display in Dropzone area. + +![with uploaded files screenshot](with_files.png) + +## References + +- http://www.dropzonejs.com/#server-side-implementation +- https://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php +- https://docs.iris-go.com +- https://github.com/kataras/iris/tree/master/_examples/tutorial/dropzonejs + +## The end + +Hopefully this simple tutorial helped you with your development. +If you like my post, please follow me on [Twitter](https://twitter.com/makismaropoulos) and help spread the word. I need your support to continue. \ No newline at end of file diff --git a/_examples/tutorial/dropzonejs/folder_structure.png b/_examples/tutorial/dropzonejs/folder_structure.png new file mode 100644 index 00000000..2c81637c Binary files /dev/null and b/_examples/tutorial/dropzonejs/folder_structure.png differ diff --git a/_examples/tutorial/dropzonejs/no_files.png b/_examples/tutorial/dropzonejs/no_files.png new file mode 100644 index 00000000..6e4afacb Binary files /dev/null and b/_examples/tutorial/dropzonejs/no_files.png differ diff --git a/_examples/tutorial/dropzonejs/src/main.go b/_examples/tutorial/dropzonejs/src/main.go new file mode 100644 index 00000000..c49f0c72 --- /dev/null +++ b/_examples/tutorial/dropzonejs/src/main.go @@ -0,0 +1,171 @@ +package main + +import ( + "image/jpeg" + "image/png" + "io" + "os" + "path" + "path/filepath" + "strings" + "sync" + + "github.com/kataras/iris" + + "github.com/nfnt/resize" +) + +// $ go get -u github.com/nfnt/resize + +const uploadsDir = "./public/uploads/" + +type uploadedFile struct { + // {name: "", size: } are the dropzone's only requirements. + Name string `json:"name"` + Size int64 `json:"size"` +} + +type uploadedFiles struct { + dir string + items []uploadedFile + mu sync.RWMutex // slices are safe but RWMutex is a good practise for you. +} + +func scanUploads(dir string) *uploadedFiles { + + f := new(uploadedFiles) + + lindex := dir[len(dir)-1] + if lindex != os.PathSeparator && lindex != '/' { + dir += string(os.PathSeparator) + } + + // create directories if necessary + // and if, then return empty uploaded files; skipping the scan. + if err := os.MkdirAll(dir, os.FileMode(0666)); err != nil { + return f + } + + // otherwise scan the given "dir" for files. + f.scan(dir) + return f +} + +func (f *uploadedFiles) scan(dir string) { + f.dir = dir + filepath.Walk(dir, func(path string, info os.FileInfo, err error) error { + + // if it's directory or a thumbnail we saved ealier, skip it. + if info.IsDir() || strings.HasPrefix(info.Name(), "thumbnail_") { + return nil + } + + f.add(info.Name(), info.Size()) + return nil + }) +} + +func (f *uploadedFiles) add(name string, size int64) uploadedFile { + f.mu.Lock() + uf := uploadedFile{ + Name: name, + Size: size, + } + f.items = append(f.items, uf) + f.mu.Unlock() + + return uf +} + +func (f *uploadedFiles) createThumbnail(uf uploadedFile) { + file, err := os.Open(path.Join(f.dir, uf.Name)) + if err != nil { + return + } + defer file.Close() + + name := strings.ToLower(uf.Name) + + out, err := os.OpenFile(f.dir+"thumbnail_"+uf.Name, + os.O_WRONLY|os.O_CREATE, 0666) + if err != nil { + return + } + defer out.Close() + + if strings.HasSuffix(name, ".jpg") { + // decode jpeg into image.Image + img, err := jpeg.Decode(file) + if err != nil { + return + } + + // write new image to file + resized := resize.Thumbnail(180, 180, img, resize.Lanczos3) + jpeg.Encode(out, resized, + &jpeg.Options{Quality: jpeg.DefaultQuality}) + + } else if strings.HasSuffix(name, ".png") { + img, err := png.Decode(file) + if err != nil { + return + } + + // write new image to file + resized := resize.Thumbnail(180, 180, img, resize.Lanczos3) // slower but better res + png.Encode(out, resized) + } + // and so on... you got the point, this code can be simplify, as a practise. + +} + +func main() { + app := iris.New() + app.RegisterView(iris.HTML("./views", ".html")) + + app.StaticWeb("/public", "./public") + + app.Get("/", func(ctx iris.Context) { + ctx.View("upload.html") + }) + + files := scanUploads(uploadsDir) + + app.Get("/uploads", func(ctx iris.Context) { + ctx.JSON(files.items) + }) + + app.Post("/upload", iris.LimitRequestBodySize(10<<20), func(ctx iris.Context) { + // Get the file from the dropzone request + file, info, err := ctx.FormFile("file") + if err != nil { + ctx.StatusCode(iris.StatusInternalServerError) + ctx.Application().Logger().Warnf("Error while uploading: %v", err.Error()) + return + } + + defer file.Close() + fname := info.Filename + + // Create a file with the same name + // assuming that you have a folder named 'uploads' + out, err := os.OpenFile(uploadsDir+fname, + os.O_WRONLY|os.O_CREATE, 0666) + + if err != nil { + ctx.StatusCode(iris.StatusInternalServerError) + ctx.Application().Logger().Warnf("Error while preparing the new file: %v", err.Error()) + return + } + defer out.Close() + + io.Copy(out, file) + + // optionally, add that file to the list in order to be visible when refresh. + uploadedFile := files.add(fname, info.Size) + go files.createThumbnail(uploadedFile) + }) + + // start the server at http://localhost:8080 + app.Run(iris.Addr(":8080")) +} diff --git a/_examples/tutorial/dropzonejs/src/public/css/dropzone.css b/_examples/tutorial/dropzonejs/src/public/css/dropzone.css new file mode 100644 index 00000000..0494d1cc --- /dev/null +++ b/_examples/tutorial/dropzonejs/src/public/css/dropzone.css @@ -0,0 +1,388 @@ +/* + * The MIT License + * Copyright (c) 2012 Matias Meno + */ +@-webkit-keyframes passing-through { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px); } + 30%, 70% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); } + 100% { + opacity: 0; + -webkit-transform: translateY(-40px); + -moz-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px); } } +@-moz-keyframes passing-through { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px); } + 30%, 70% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); } + 100% { + opacity: 0; + -webkit-transform: translateY(-40px); + -moz-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px); } } +@keyframes passing-through { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px); } + 30%, 70% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); } + 100% { + opacity: 0; + -webkit-transform: translateY(-40px); + -moz-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px); } } +@-webkit-keyframes slide-in { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px); } + 30% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); } } +@-moz-keyframes slide-in { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px); } + 30% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); } } +@keyframes slide-in { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px); } + 30% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px); } } +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } + 10% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); } + 20% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } } +@-moz-keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } + 10% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); } + 20% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } } +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } + 10% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); } + 20% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } } +.dropzone, .dropzone * { + box-sizing: border-box; } + +.dropzone { + min-height: 150px; + border: 2px solid rgba(0, 0, 0, 0.3); + background: white; + padding: 20px 20px; } + .dropzone.dz-clickable { + cursor: pointer; } + .dropzone.dz-clickable * { + cursor: default; } + .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { + cursor: pointer; } + .dropzone.dz-started .dz-message { + display: none; } + .dropzone.dz-drag-hover { + border-style: solid; } + .dropzone.dz-drag-hover .dz-message { + opacity: 0.5; } + .dropzone .dz-message { + text-align: center; + margin: 2em 0; } + .dropzone .dz-preview { + position: relative; + display: inline-block; + vertical-align: top; + margin: 16px; + min-height: 100px; } + .dropzone .dz-preview:hover { + z-index: 1000; } + .dropzone .dz-preview:hover .dz-details { + opacity: 1; } + .dropzone .dz-preview.dz-file-preview .dz-image { + border-radius: 20px; + background: #999; + background: linear-gradient(to bottom, #eee, #ddd); } + .dropzone .dz-preview.dz-file-preview .dz-details { + opacity: 1; } + .dropzone .dz-preview.dz-image-preview { + background: white; } + .dropzone .dz-preview.dz-image-preview .dz-details { + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -ms-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; } + .dropzone .dz-preview .dz-remove { + font-size: 14px; + text-align: center; + display: block; + cursor: pointer; + border: none; } + .dropzone .dz-preview .dz-remove:hover { + text-decoration: underline; } + .dropzone .dz-preview:hover .dz-details { + opacity: 1; } + .dropzone .dz-preview .dz-details { + z-index: 20; + position: absolute; + top: 0; + left: 0; + opacity: 0; + font-size: 13px; + min-width: 100%; + max-width: 100%; + padding: 2em 1em; + text-align: center; + color: rgba(0, 0, 0, 0.9); + line-height: 150%; } + .dropzone .dz-preview .dz-details .dz-size { + margin-bottom: 1em; + font-size: 16px; } + .dropzone .dz-preview .dz-details .dz-filename { + white-space: nowrap; } + .dropzone .dz-preview .dz-details .dz-filename:hover span { + border: 1px solid rgba(200, 200, 200, 0.8); + background-color: rgba(255, 255, 255, 0.8); } + .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { + overflow: hidden; + text-overflow: ellipsis; } + .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { + border: 1px solid transparent; } + .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { + background-color: rgba(255, 255, 255, 0.4); + padding: 0 0.4em; + border-radius: 3px; } + .dropzone .dz-preview:hover .dz-image img { + -webkit-transform: scale(1.05, 1.05); + -moz-transform: scale(1.05, 1.05); + -ms-transform: scale(1.05, 1.05); + -o-transform: scale(1.05, 1.05); + transform: scale(1.05, 1.05); + -webkit-filter: blur(8px); + filter: blur(8px); } + .dropzone .dz-preview .dz-image { + border-radius: 20px; + overflow: hidden; + width: 120px; + height: 120px; + position: relative; + display: block; + z-index: 10; } + .dropzone .dz-preview .dz-image img { + display: block; } + .dropzone .dz-preview.dz-success .dz-success-mark { + -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } + .dropzone .dz-preview.dz-error .dz-error-mark { + opacity: 1; + -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } + .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { + pointer-events: none; + opacity: 0; + z-index: 500; + position: absolute; + display: block; + top: 50%; + left: 50%; + margin-left: -27px; + margin-top: -27px; } + .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { + display: block; + width: 54px; + height: 54px; } + .dropzone .dz-preview.dz-processing .dz-progress { + opacity: 1; + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } + .dropzone .dz-preview.dz-complete .dz-progress { + opacity: 0; + -webkit-transition: opacity 0.4s ease-in; + -moz-transition: opacity 0.4s ease-in; + -ms-transition: opacity 0.4s ease-in; + -o-transition: opacity 0.4s ease-in; + transition: opacity 0.4s ease-in; } + .dropzone .dz-preview:not(.dz-processing) .dz-progress { + -webkit-animation: pulse 6s ease infinite; + -moz-animation: pulse 6s ease infinite; + -ms-animation: pulse 6s ease infinite; + -o-animation: pulse 6s ease infinite; + animation: pulse 6s ease infinite; } + .dropzone .dz-preview .dz-progress { + opacity: 1; + z-index: 1000; + pointer-events: none; + position: absolute; + height: 16px; + left: 50%; + top: 50%; + margin-top: -8px; + width: 80px; + margin-left: -40px; + background: rgba(255, 255, 255, 0.9); + -webkit-transform: scale(1); + border-radius: 8px; + overflow: hidden; } + .dropzone .dz-preview .dz-progress .dz-upload { + background: #333; + background: linear-gradient(to bottom, #666, #444); + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 0; + -webkit-transition: width 300ms ease-in-out; + -moz-transition: width 300ms ease-in-out; + -ms-transition: width 300ms ease-in-out; + -o-transition: width 300ms ease-in-out; + transition: width 300ms ease-in-out; } + .dropzone .dz-preview.dz-error .dz-error-message { + display: block; } + .dropzone .dz-preview.dz-error:hover .dz-error-message { + opacity: 1; + pointer-events: auto; } + .dropzone .dz-preview .dz-error-message { + pointer-events: none; + z-index: 1000; + position: absolute; + display: block; + display: none; + opacity: 0; + -webkit-transition: opacity 0.3s ease; + -moz-transition: opacity 0.3s ease; + -ms-transition: opacity 0.3s ease; + -o-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + border-radius: 8px; + font-size: 13px; + top: 130px; + left: -10px; + width: 140px; + background: #be2626; + background: linear-gradient(to bottom, #be2626, #a92222); + padding: 0.5em 1.2em; + color: white; } + .dropzone .dz-preview .dz-error-message:after { + content: ''; + position: absolute; + top: -6px; + left: 64px; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #be2626; } diff --git a/_examples/tutorial/dropzonejs/src/public/js/dropzone.js b/_examples/tutorial/dropzonejs/src/public/js/dropzone.js new file mode 100644 index 00000000..1bf9a7fe --- /dev/null +++ b/_examples/tutorial/dropzonejs/src/public/js/dropzone.js @@ -0,0 +1,2052 @@ + +/* + * + * More info at [www.dropzonejs.com](http://www.dropzonejs.com) + * + * Copyright (c) 2012, Matias Meno + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + */ + +(function() { + var Dropzone, Emitter, ExifRestore, camelize, contentLoaded, detectVerticalSquash, drawImageIOSFix, noop, without, + slice = [].slice, + extend1 = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, + hasProp = {}.hasOwnProperty; + + noop = function() {}; + + Emitter = (function() { + function Emitter() {} + + Emitter.prototype.addEventListener = Emitter.prototype.on; + + Emitter.prototype.on = function(event, fn) { + this._callbacks = this._callbacks || {}; + if (!this._callbacks[event]) { + this._callbacks[event] = []; + } + this._callbacks[event].push(fn); + return this; + }; + + Emitter.prototype.emit = function() { + var args, callback, callbacks, event, j, len; + event = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : []; + this._callbacks = this._callbacks || {}; + callbacks = this._callbacks[event]; + if (callbacks) { + for (j = 0, len = callbacks.length; j < len; j++) { + callback = callbacks[j]; + callback.apply(this, args); + } + } + return this; + }; + + Emitter.prototype.removeListener = Emitter.prototype.off; + + Emitter.prototype.removeAllListeners = Emitter.prototype.off; + + Emitter.prototype.removeEventListener = Emitter.prototype.off; + + Emitter.prototype.off = function(event, fn) { + var callback, callbacks, i, j, len; + if (!this._callbacks || arguments.length === 0) { + this._callbacks = {}; + return this; + } + callbacks = this._callbacks[event]; + if (!callbacks) { + return this; + } + if (arguments.length === 1) { + delete this._callbacks[event]; + return this; + } + for (i = j = 0, len = callbacks.length; j < len; i = ++j) { + callback = callbacks[i]; + if (callback === fn) { + callbacks.splice(i, 1); + break; + } + } + return this; + }; + + return Emitter; + + })(); + + Dropzone = (function(superClass) { + var extend, resolveOption; + + extend1(Dropzone, superClass); + + Dropzone.prototype.Emitter = Emitter; + + + /* + This is a list of all available events you can register on a dropzone object. + + You can register an event handler like this: + + dropzone.on("dragEnter", function() { }); + */ + + Dropzone.prototype.events = ["drop", "dragstart", "dragend", "dragenter", "dragover", "dragleave", "addedfile", "addedfiles", "removedfile", "thumbnail", "error", "errormultiple", "processing", "processingmultiple", "uploadprogress", "totaluploadprogress", "sending", "sendingmultiple", "success", "successmultiple", "canceled", "canceledmultiple", "complete", "completemultiple", "reset", "maxfilesexceeded", "maxfilesreached", "queuecomplete"]; + + Dropzone.prototype.defaultOptions = { + url: null, + method: "post", + withCredentials: false, + timeout: 30000, + parallelUploads: 2, + uploadMultiple: false, + maxFilesize: 256, + paramName: "file", + createImageThumbnails: true, + maxThumbnailFilesize: 10, + thumbnailWidth: 120, + thumbnailHeight: 120, + thumbnailMethod: 'crop', + resizeWidth: null, + resizeHeight: null, + resizeMimeType: null, + resizeQuality: 0.8, + resizeMethod: 'contain', + filesizeBase: 1000, + maxFiles: null, + params: {}, + headers: null, + clickable: true, + ignoreHiddenFiles: true, + acceptedFiles: null, + acceptedMimeTypes: null, + autoProcessQueue: true, + autoQueue: true, + addRemoveLinks: false, + previewsContainer: null, + hiddenInputContainer: "body", + capture: null, + renameFilename: null, + renameFile: null, + forceFallback: false, + dictDefaultMessage: "Drop files here to upload", + dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.", + dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.", + dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.", + dictInvalidFileType: "You can't upload files of this type.", + dictResponseError: "Server responded with {{statusCode}} code.", + dictCancelUpload: "Cancel upload", + dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?", + dictRemoveFile: "Remove file", + dictRemoveFileConfirmation: null, + dictMaxFilesExceeded: "You can not upload any more files.", + dictFileSizeUnits: { + tb: "TB", + gb: "GB", + mb: "MB", + kb: "KB", + b: "b" + }, + init: function() { + return noop; + }, + accept: function(file, done) { + return done(); + }, + fallback: function() { + var child, j, len, messageElement, ref, span; + this.element.className = this.element.className + " dz-browser-not-supported"; + ref = this.element.getElementsByTagName("div"); + for (j = 0, len = ref.length; j < len; j++) { + child = ref[j]; + if (/(^| )dz-message($| )/.test(child.className)) { + messageElement = child; + child.className = "dz-message"; + continue; + } + } + if (!messageElement) { + messageElement = Dropzone.createElement("
"); + this.element.appendChild(messageElement); + } + span = messageElement.getElementsByTagName("span")[0]; + if (span) { + if (span.textContent != null) { + span.textContent = this.options.dictFallbackMessage; + } else if (span.innerText != null) { + span.innerText = this.options.dictFallbackMessage; + } + } + return this.element.appendChild(this.getFallbackForm()); + }, + resize: function(file, width, height, resizeMethod) { + var info, srcRatio, trgRatio; + info = { + srcX: 0, + srcY: 0, + srcWidth: file.width, + srcHeight: file.height + }; + srcRatio = file.width / file.height; + if ((width == null) && (height == null)) { + width = info.srcWidth; + height = info.srcHeight; + } else if (width == null) { + width = height * srcRatio; + } else if (height == null) { + height = width / srcRatio; + } + width = Math.min(width, info.srcWidth); + height = Math.min(height, info.srcHeight); + trgRatio = width / height; + if (info.srcWidth > width || info.srcHeight > height) { + if (resizeMethod === 'crop') { + if (srcRatio > trgRatio) { + info.srcHeight = file.height; + info.srcWidth = info.srcHeight * trgRatio; + } else { + info.srcWidth = file.width; + info.srcHeight = info.srcWidth / trgRatio; + } + } else if (resizeMethod === 'contain') { + if (srcRatio > trgRatio) { + height = width / srcRatio; + } else { + width = height * srcRatio; + } + } else { + throw new Error("Unknown resizeMethod '" + resizeMethod + "'"); + } + } + info.srcX = (file.width - info.srcWidth) / 2; + info.srcY = (file.height - info.srcHeight) / 2; + info.trgWidth = width; + info.trgHeight = height; + return info; + }, + transformFile: function(file, done) { + if ((this.options.resizeWidth || this.options.resizeHeight) && file.type.match(/image.*/)) { + return this.resizeImage(file, this.options.resizeWidth, this.options.resizeHeight, this.options.resizeMethod, done); + } else { + return done(file); + } + }, + previewTemplate: "
\n
\n
\n
\n
\n
\n
\n
\n
\n \n Check\n \n \n \n \n \n
\n
\n \n Error\n \n \n \n \n \n \n \n
\n
", + + /* + Those functions register themselves to the events on init and handle all + the user interface specific stuff. Overwriting them won't break the upload + but can break the way it's displayed. + You can overwrite them if you don't like the default behavior. If you just + want to add an additional event handler, register it on the dropzone object + and don't overwrite those options. + */ + drop: function(e) { + return this.element.classList.remove("dz-drag-hover"); + }, + dragstart: noop, + dragend: function(e) { + return this.element.classList.remove("dz-drag-hover"); + }, + dragenter: function(e) { + return this.element.classList.add("dz-drag-hover"); + }, + dragover: function(e) { + return this.element.classList.add("dz-drag-hover"); + }, + dragleave: function(e) { + return this.element.classList.remove("dz-drag-hover"); + }, + paste: noop, + reset: function() { + return this.element.classList.remove("dz-started"); + }, + addedfile: function(file) { + var j, k, l, len, len1, len2, node, ref, ref1, ref2, removeFileEvent, removeLink, results; + if (this.element === this.previewsContainer) { + this.element.classList.add("dz-started"); + } + if (this.previewsContainer) { + file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim()); + file.previewTemplate = file.previewElement; + this.previewsContainer.appendChild(file.previewElement); + ref = file.previewElement.querySelectorAll("[data-dz-name]"); + for (j = 0, len = ref.length; j < len; j++) { + node = ref[j]; + node.textContent = file.name; + } + ref1 = file.previewElement.querySelectorAll("[data-dz-size]"); + for (k = 0, len1 = ref1.length; k < len1; k++) { + node = ref1[k]; + node.innerHTML = this.filesize(file.size); + } + if (this.options.addRemoveLinks) { + file._removeLink = Dropzone.createElement("" + this.options.dictRemoveFile + ""); + file.previewElement.appendChild(file._removeLink); + } + removeFileEvent = (function(_this) { + return function(e) { + e.preventDefault(); + e.stopPropagation(); + if (file.status === Dropzone.UPLOADING) { + return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() { + return _this.removeFile(file); + }); + } else { + if (_this.options.dictRemoveFileConfirmation) { + return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() { + return _this.removeFile(file); + }); + } else { + return _this.removeFile(file); + } + } + }; + })(this); + ref2 = file.previewElement.querySelectorAll("[data-dz-remove]"); + results = []; + for (l = 0, len2 = ref2.length; l < len2; l++) { + removeLink = ref2[l]; + results.push(removeLink.addEventListener("click", removeFileEvent)); + } + return results; + } + }, + removedfile: function(file) { + var ref; + if (file.previewElement) { + if ((ref = file.previewElement) != null) { + ref.parentNode.removeChild(file.previewElement); + } + } + return this._updateMaxFilesReachedClass(); + }, + thumbnail: function(file, dataUrl) { + var j, len, ref, thumbnailElement; + if (file.previewElement) { + file.previewElement.classList.remove("dz-file-preview"); + ref = file.previewElement.querySelectorAll("[data-dz-thumbnail]"); + for (j = 0, len = ref.length; j < len; j++) { + thumbnailElement = ref[j]; + thumbnailElement.alt = file.name; + thumbnailElement.src = dataUrl; + } + return setTimeout(((function(_this) { + return function() { + return file.previewElement.classList.add("dz-image-preview"); + }; + })(this)), 1); + } + }, + error: function(file, message) { + var j, len, node, ref, results; + if (file.previewElement) { + file.previewElement.classList.add("dz-error"); + if (typeof message !== "String" && message.error) { + message = message.error; + } + ref = file.previewElement.querySelectorAll("[data-dz-errormessage]"); + results = []; + for (j = 0, len = ref.length; j < len; j++) { + node = ref[j]; + results.push(node.textContent = message); + } + return results; + } + }, + errormultiple: noop, + processing: function(file) { + if (file.previewElement) { + file.previewElement.classList.add("dz-processing"); + if (file._removeLink) { + return file._removeLink.textContent = this.options.dictCancelUpload; + } + } + }, + processingmultiple: noop, + uploadprogress: function(file, progress, bytesSent) { + var j, len, node, ref, results; + if (file.previewElement) { + ref = file.previewElement.querySelectorAll("[data-dz-uploadprogress]"); + results = []; + for (j = 0, len = ref.length; j < len; j++) { + node = ref[j]; + if (node.nodeName === 'PROGRESS') { + results.push(node.value = progress); + } else { + results.push(node.style.width = progress + "%"); + } + } + return results; + } + }, + totaluploadprogress: noop, + sending: noop, + sendingmultiple: noop, + success: function(file) { + if (file.previewElement) { + return file.previewElement.classList.add("dz-success"); + } + }, + successmultiple: noop, + canceled: function(file) { + return this.emit("error", file, "Upload canceled."); + }, + canceledmultiple: noop, + complete: function(file) { + if (file._removeLink) { + file._removeLink.textContent = this.options.dictRemoveFile; + } + if (file.previewElement) { + return file.previewElement.classList.add("dz-complete"); + } + }, + completemultiple: noop, + maxfilesexceeded: noop, + maxfilesreached: noop, + queuecomplete: noop, + addedfiles: noop + }; + + extend = function() { + var j, key, len, object, objects, target, val; + target = arguments[0], objects = 2 <= arguments.length ? slice.call(arguments, 1) : []; + for (j = 0, len = objects.length; j < len; j++) { + object = objects[j]; + for (key in object) { + val = object[key]; + target[key] = val; + } + } + return target; + }; + + function Dropzone(element1, options) { + var elementOptions, fallback, ref; + this.element = element1; + this.version = Dropzone.version; + this.defaultOptions.previewTemplate = this.defaultOptions.previewTemplate.replace(/\n*/g, ""); + this.clickableElements = []; + this.listeners = []; + this.files = []; + if (typeof this.element === "string") { + this.element = document.querySelector(this.element); + } + if (!(this.element && (this.element.nodeType != null))) { + throw new Error("Invalid dropzone element."); + } + if (this.element.dropzone) { + throw new Error("Dropzone already attached."); + } + Dropzone.instances.push(this); + this.element.dropzone = this; + elementOptions = (ref = Dropzone.optionsForElement(this.element)) != null ? ref : {}; + this.options = extend({}, this.defaultOptions, elementOptions, options != null ? options : {}); + if (this.options.forceFallback || !Dropzone.isBrowserSupported()) { + return this.options.fallback.call(this); + } + if (this.options.url == null) { + this.options.url = this.element.getAttribute("action"); + } + if (!this.options.url) { + throw new Error("No URL provided."); + } + if (this.options.acceptedFiles && this.options.acceptedMimeTypes) { + throw new Error("You can't provide both 'acceptedFiles' and 'acceptedMimeTypes'. 'acceptedMimeTypes' is deprecated."); + } + if (this.options.acceptedMimeTypes) { + this.options.acceptedFiles = this.options.acceptedMimeTypes; + delete this.options.acceptedMimeTypes; + } + if (this.options.renameFilename != null) { + this.options.renameFile = (function(_this) { + return function(file) { + return _this.options.renameFilename.call(_this, file.name, file); + }; + })(this); + } + this.options.method = this.options.method.toUpperCase(); + if ((fallback = this.getExistingFallback()) && fallback.parentNode) { + fallback.parentNode.removeChild(fallback); + } + if (this.options.previewsContainer !== false) { + if (this.options.previewsContainer) { + this.previewsContainer = Dropzone.getElement(this.options.previewsContainer, "previewsContainer"); + } else { + this.previewsContainer = this.element; + } + } + if (this.options.clickable) { + if (this.options.clickable === true) { + this.clickableElements = [this.element]; + } else { + this.clickableElements = Dropzone.getElements(this.options.clickable, "clickable"); + } + } + this.init(); + } + + Dropzone.prototype.getAcceptedFiles = function() { + var file, j, len, ref, results; + ref = this.files; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + if (file.accepted) { + results.push(file); + } + } + return results; + }; + + Dropzone.prototype.getRejectedFiles = function() { + var file, j, len, ref, results; + ref = this.files; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + if (!file.accepted) { + results.push(file); + } + } + return results; + }; + + Dropzone.prototype.getFilesWithStatus = function(status) { + var file, j, len, ref, results; + ref = this.files; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + if (file.status === status) { + results.push(file); + } + } + return results; + }; + + Dropzone.prototype.getQueuedFiles = function() { + return this.getFilesWithStatus(Dropzone.QUEUED); + }; + + Dropzone.prototype.getUploadingFiles = function() { + return this.getFilesWithStatus(Dropzone.UPLOADING); + }; + + Dropzone.prototype.getAddedFiles = function() { + return this.getFilesWithStatus(Dropzone.ADDED); + }; + + Dropzone.prototype.getActiveFiles = function() { + var file, j, len, ref, results; + ref = this.files; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + if (file.status === Dropzone.UPLOADING || file.status === Dropzone.QUEUED) { + results.push(file); + } + } + return results; + }; + + Dropzone.prototype.init = function() { + var eventName, j, len, noPropagation, ref, ref1, setupHiddenFileInput; + if (this.element.tagName === "form") { + this.element.setAttribute("enctype", "multipart/form-data"); + } + if (this.element.classList.contains("dropzone") && !this.element.querySelector(".dz-message")) { + this.element.appendChild(Dropzone.createElement("
" + this.options.dictDefaultMessage + "
")); + } + if (this.clickableElements.length) { + setupHiddenFileInput = (function(_this) { + return function() { + if (_this.hiddenFileInput) { + _this.hiddenFileInput.parentNode.removeChild(_this.hiddenFileInput); + } + _this.hiddenFileInput = document.createElement("input"); + _this.hiddenFileInput.setAttribute("type", "file"); + if ((_this.options.maxFiles == null) || _this.options.maxFiles > 1) { + _this.hiddenFileInput.setAttribute("multiple", "multiple"); + } + _this.hiddenFileInput.className = "dz-hidden-input"; + if (_this.options.acceptedFiles != null) { + _this.hiddenFileInput.setAttribute("accept", _this.options.acceptedFiles); + } + if (_this.options.capture != null) { + _this.hiddenFileInput.setAttribute("capture", _this.options.capture); + } + _this.hiddenFileInput.style.visibility = "hidden"; + _this.hiddenFileInput.style.position = "absolute"; + _this.hiddenFileInput.style.top = "0"; + _this.hiddenFileInput.style.left = "0"; + _this.hiddenFileInput.style.height = "0"; + _this.hiddenFileInput.style.width = "0"; + document.querySelector(_this.options.hiddenInputContainer).appendChild(_this.hiddenFileInput); + return _this.hiddenFileInput.addEventListener("change", function() { + var file, files, j, len; + files = _this.hiddenFileInput.files; + if (files.length) { + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + _this.addFile(file); + } + } + _this.emit("addedfiles", files); + return setupHiddenFileInput(); + }); + }; + })(this); + setupHiddenFileInput(); + } + this.URL = (ref = window.URL) != null ? ref : window.webkitURL; + ref1 = this.events; + for (j = 0, len = ref1.length; j < len; j++) { + eventName = ref1[j]; + this.on(eventName, this.options[eventName]); + } + this.on("uploadprogress", (function(_this) { + return function() { + return _this.updateTotalUploadProgress(); + }; + })(this)); + this.on("removedfile", (function(_this) { + return function() { + return _this.updateTotalUploadProgress(); + }; + })(this)); + this.on("canceled", (function(_this) { + return function(file) { + return _this.emit("complete", file); + }; + })(this)); + this.on("complete", (function(_this) { + return function(file) { + if (_this.getAddedFiles().length === 0 && _this.getUploadingFiles().length === 0 && _this.getQueuedFiles().length === 0) { + return setTimeout((function() { + return _this.emit("queuecomplete"); + }), 0); + } + }; + })(this)); + noPropagation = function(e) { + e.stopPropagation(); + if (e.preventDefault) { + return e.preventDefault(); + } else { + return e.returnValue = false; + } + }; + this.listeners = [ + { + element: this.element, + events: { + "dragstart": (function(_this) { + return function(e) { + return _this.emit("dragstart", e); + }; + })(this), + "dragenter": (function(_this) { + return function(e) { + noPropagation(e); + return _this.emit("dragenter", e); + }; + })(this), + "dragover": (function(_this) { + return function(e) { + var efct; + try { + efct = e.dataTransfer.effectAllowed; + } catch (undefined) {} + e.dataTransfer.dropEffect = 'move' === efct || 'linkMove' === efct ? 'move' : 'copy'; + noPropagation(e); + return _this.emit("dragover", e); + }; + })(this), + "dragleave": (function(_this) { + return function(e) { + return _this.emit("dragleave", e); + }; + })(this), + "drop": (function(_this) { + return function(e) { + noPropagation(e); + return _this.drop(e); + }; + })(this), + "dragend": (function(_this) { + return function(e) { + return _this.emit("dragend", e); + }; + })(this) + } + } + ]; + this.clickableElements.forEach((function(_this) { + return function(clickableElement) { + return _this.listeners.push({ + element: clickableElement, + events: { + "click": function(evt) { + if ((clickableElement !== _this.element) || (evt.target === _this.element || Dropzone.elementInside(evt.target, _this.element.querySelector(".dz-message")))) { + _this.hiddenFileInput.click(); + } + return true; + } + } + }); + }; + })(this)); + this.enable(); + return this.options.init.call(this); + }; + + Dropzone.prototype.destroy = function() { + var ref; + this.disable(); + this.removeAllFiles(true); + if ((ref = this.hiddenFileInput) != null ? ref.parentNode : void 0) { + this.hiddenFileInput.parentNode.removeChild(this.hiddenFileInput); + this.hiddenFileInput = null; + } + delete this.element.dropzone; + return Dropzone.instances.splice(Dropzone.instances.indexOf(this), 1); + }; + + Dropzone.prototype.updateTotalUploadProgress = function() { + var activeFiles, file, j, len, ref, totalBytes, totalBytesSent, totalUploadProgress; + totalBytesSent = 0; + totalBytes = 0; + activeFiles = this.getActiveFiles(); + if (activeFiles.length) { + ref = this.getActiveFiles(); + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + totalBytesSent += file.upload.bytesSent; + totalBytes += file.upload.total; + } + totalUploadProgress = 100 * totalBytesSent / totalBytes; + } else { + totalUploadProgress = 100; + } + return this.emit("totaluploadprogress", totalUploadProgress, totalBytes, totalBytesSent); + }; + + Dropzone.prototype._getParamName = function(n) { + if (typeof this.options.paramName === "function") { + return this.options.paramName(n); + } else { + return "" + this.options.paramName + (this.options.uploadMultiple ? "[" + n + "]" : ""); + } + }; + + Dropzone.prototype._renameFile = function(file) { + if (typeof this.options.renameFile !== "function") { + return file.name; + } + return this.options.renameFile(file); + }; + + Dropzone.prototype.getFallbackForm = function() { + var existingFallback, fields, fieldsString, form; + if (existingFallback = this.getExistingFallback()) { + return existingFallback; + } + fieldsString = "
"; + if (this.options.dictFallbackText) { + fieldsString += "

" + this.options.dictFallbackText + "

"; + } + fieldsString += "
"; + fields = Dropzone.createElement(fieldsString); + if (this.element.tagName !== "FORM") { + form = Dropzone.createElement("
"); + form.appendChild(fields); + } else { + this.element.setAttribute("enctype", "multipart/form-data"); + this.element.setAttribute("method", this.options.method); + } + return form != null ? form : fields; + }; + + Dropzone.prototype.getExistingFallback = function() { + var fallback, getFallback, j, len, ref, tagName; + getFallback = function(elements) { + var el, j, len; + for (j = 0, len = elements.length; j < len; j++) { + el = elements[j]; + if (/(^| )fallback($| )/.test(el.className)) { + return el; + } + } + }; + ref = ["div", "form"]; + for (j = 0, len = ref.length; j < len; j++) { + tagName = ref[j]; + if (fallback = getFallback(this.element.getElementsByTagName(tagName))) { + return fallback; + } + } + }; + + Dropzone.prototype.setupEventListeners = function() { + var elementListeners, event, j, len, listener, ref, results; + ref = this.listeners; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + elementListeners = ref[j]; + results.push((function() { + var ref1, results1; + ref1 = elementListeners.events; + results1 = []; + for (event in ref1) { + listener = ref1[event]; + results1.push(elementListeners.element.addEventListener(event, listener, false)); + } + return results1; + })()); + } + return results; + }; + + Dropzone.prototype.removeEventListeners = function() { + var elementListeners, event, j, len, listener, ref, results; + ref = this.listeners; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + elementListeners = ref[j]; + results.push((function() { + var ref1, results1; + ref1 = elementListeners.events; + results1 = []; + for (event in ref1) { + listener = ref1[event]; + results1.push(elementListeners.element.removeEventListener(event, listener, false)); + } + return results1; + })()); + } + return results; + }; + + Dropzone.prototype.disable = function() { + var file, j, len, ref, results; + this.clickableElements.forEach(function(element) { + return element.classList.remove("dz-clickable"); + }); + this.removeEventListeners(); + ref = this.files; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + results.push(this.cancelUpload(file)); + } + return results; + }; + + Dropzone.prototype.enable = function() { + this.clickableElements.forEach(function(element) { + return element.classList.add("dz-clickable"); + }); + return this.setupEventListeners(); + }; + + Dropzone.prototype.filesize = function(size) { + var cutoff, i, j, len, selectedSize, selectedUnit, unit, units; + selectedSize = 0; + selectedUnit = "b"; + if (size > 0) { + units = ['tb', 'gb', 'mb', 'kb', 'b']; + for (i = j = 0, len = units.length; j < len; i = ++j) { + unit = units[i]; + cutoff = Math.pow(this.options.filesizeBase, 4 - i) / 10; + if (size >= cutoff) { + selectedSize = size / Math.pow(this.options.filesizeBase, 4 - i); + selectedUnit = unit; + break; + } + } + selectedSize = Math.round(10 * selectedSize) / 10; + } + return "" + selectedSize + " " + this.options.dictFileSizeUnits[selectedUnit]; + }; + + Dropzone.prototype._updateMaxFilesReachedClass = function() { + if ((this.options.maxFiles != null) && this.getAcceptedFiles().length >= this.options.maxFiles) { + if (this.getAcceptedFiles().length === this.options.maxFiles) { + this.emit('maxfilesreached', this.files); + } + return this.element.classList.add("dz-max-files-reached"); + } else { + return this.element.classList.remove("dz-max-files-reached"); + } + }; + + Dropzone.prototype.drop = function(e) { + var files, items; + if (!e.dataTransfer) { + return; + } + this.emit("drop", e); + files = e.dataTransfer.files; + this.emit("addedfiles", files); + if (files.length) { + items = e.dataTransfer.items; + if (items && items.length && (items[0].webkitGetAsEntry != null)) { + this._addFilesFromItems(items); + } else { + this.handleFiles(files); + } + } + }; + + Dropzone.prototype.paste = function(e) { + var items, ref; + if ((e != null ? (ref = e.clipboardData) != null ? ref.items : void 0 : void 0) == null) { + return; + } + this.emit("paste", e); + items = e.clipboardData.items; + if (items.length) { + return this._addFilesFromItems(items); + } + }; + + Dropzone.prototype.handleFiles = function(files) { + var file, j, len, results; + results = []; + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + results.push(this.addFile(file)); + } + return results; + }; + + Dropzone.prototype._addFilesFromItems = function(items) { + var entry, item, j, len, results; + results = []; + for (j = 0, len = items.length; j < len; j++) { + item = items[j]; + if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) { + if (entry.isFile) { + results.push(this.addFile(item.getAsFile())); + } else if (entry.isDirectory) { + results.push(this._addFilesFromDirectory(entry, entry.name)); + } else { + results.push(void 0); + } + } else if (item.getAsFile != null) { + if ((item.kind == null) || item.kind === "file") { + results.push(this.addFile(item.getAsFile())); + } else { + results.push(void 0); + } + } else { + results.push(void 0); + } + } + return results; + }; + + Dropzone.prototype._addFilesFromDirectory = function(directory, path) { + var dirReader, errorHandler, readEntries; + dirReader = directory.createReader(); + errorHandler = function(error) { + return typeof console !== "undefined" && console !== null ? typeof console.log === "function" ? console.log(error) : void 0 : void 0; + }; + readEntries = (function(_this) { + return function() { + return dirReader.readEntries(function(entries) { + var entry, j, len; + if (entries.length > 0) { + for (j = 0, len = entries.length; j < len; j++) { + entry = entries[j]; + if (entry.isFile) { + entry.file(function(file) { + if (_this.options.ignoreHiddenFiles && file.name.substring(0, 1) === '.') { + return; + } + file.fullPath = path + "/" + file.name; + return _this.addFile(file); + }); + } else if (entry.isDirectory) { + _this._addFilesFromDirectory(entry, path + "/" + entry.name); + } + } + readEntries(); + } + return null; + }, errorHandler); + }; + })(this); + return readEntries(); + }; + + Dropzone.prototype.accept = function(file, done) { + if (file.size > this.options.maxFilesize * 1024 * 1024) { + return done(this.options.dictFileTooBig.replace("{{filesize}}", Math.round(file.size / 1024 / 10.24) / 100).replace("{{maxFilesize}}", this.options.maxFilesize)); + } else if (!Dropzone.isValidFile(file, this.options.acceptedFiles)) { + return done(this.options.dictInvalidFileType); + } else if ((this.options.maxFiles != null) && this.getAcceptedFiles().length >= this.options.maxFiles) { + done(this.options.dictMaxFilesExceeded.replace("{{maxFiles}}", this.options.maxFiles)); + return this.emit("maxfilesexceeded", file); + } else { + return this.options.accept.call(this, file, done); + } + }; + + Dropzone.prototype.addFile = function(file) { + file.upload = { + progress: 0, + total: file.size, + bytesSent: 0, + filename: this._renameFile(file) + }; + this.files.push(file); + file.status = Dropzone.ADDED; + this.emit("addedfile", file); + this._enqueueThumbnail(file); + return this.accept(file, (function(_this) { + return function(error) { + if (error) { + file.accepted = false; + _this._errorProcessing([file], error); + } else { + file.accepted = true; + if (_this.options.autoQueue) { + _this.enqueueFile(file); + } + } + return _this._updateMaxFilesReachedClass(); + }; + })(this)); + }; + + Dropzone.prototype.enqueueFiles = function(files) { + var file, j, len; + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + this.enqueueFile(file); + } + return null; + }; + + Dropzone.prototype.enqueueFile = function(file) { + if (file.status === Dropzone.ADDED && file.accepted === true) { + file.status = Dropzone.QUEUED; + if (this.options.autoProcessQueue) { + return setTimeout(((function(_this) { + return function() { + return _this.processQueue(); + }; + })(this)), 0); + } + } else { + throw new Error("This file can't be queued because it has already been processed or was rejected."); + } + }; + + Dropzone.prototype._thumbnailQueue = []; + + Dropzone.prototype._processingThumbnail = false; + + Dropzone.prototype._enqueueThumbnail = function(file) { + if (this.options.createImageThumbnails && file.type.match(/image.*/) && file.size <= this.options.maxThumbnailFilesize * 1024 * 1024) { + this._thumbnailQueue.push(file); + return setTimeout(((function(_this) { + return function() { + return _this._processThumbnailQueue(); + }; + })(this)), 0); + } + }; + + Dropzone.prototype._processThumbnailQueue = function() { + var file; + if (this._processingThumbnail || this._thumbnailQueue.length === 0) { + return; + } + this._processingThumbnail = true; + file = this._thumbnailQueue.shift(); + return this.createThumbnail(file, this.options.thumbnailWidth, this.options.thumbnailHeight, this.options.thumbnailMethod, true, (function(_this) { + return function(dataUrl) { + _this.emit("thumbnail", file, dataUrl); + _this._processingThumbnail = false; + return _this._processThumbnailQueue(); + }; + })(this)); + }; + + Dropzone.prototype.removeFile = function(file) { + if (file.status === Dropzone.UPLOADING) { + this.cancelUpload(file); + } + this.files = without(this.files, file); + this.emit("removedfile", file); + if (this.files.length === 0) { + return this.emit("reset"); + } + }; + + Dropzone.prototype.removeAllFiles = function(cancelIfNecessary) { + var file, j, len, ref; + if (cancelIfNecessary == null) { + cancelIfNecessary = false; + } + ref = this.files.slice(); + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + if (file.status !== Dropzone.UPLOADING || cancelIfNecessary) { + this.removeFile(file); + } + } + return null; + }; + + Dropzone.prototype.resizeImage = function(file, width, height, resizeMethod, callback) { + return this.createThumbnail(file, width, height, resizeMethod, false, (function(_this) { + return function(dataUrl, canvas) { + var resizeMimeType, resizedDataURL; + if (canvas === null) { + return callback(file); + } else { + resizeMimeType = _this.options.resizeMimeType; + if (resizeMimeType == null) { + resizeMimeType = file.type; + } + resizedDataURL = canvas.toDataURL(resizeMimeType, _this.options.resizeQuality); + if (resizeMimeType === 'image/jpeg' || resizeMimeType === 'image/jpg') { + resizedDataURL = ExifRestore.restore(file.dataURL, resizedDataURL); + } + return callback(Dropzone.dataURItoBlob(resizedDataURL)); + } + }; + })(this)); + }; + + Dropzone.prototype.createThumbnail = function(file, width, height, resizeMethod, fixOrientation, callback) { + var fileReader; + fileReader = new FileReader; + fileReader.onload = (function(_this) { + return function() { + file.dataURL = fileReader.result; + if (file.type === "image/svg+xml") { + if (callback != null) { + callback(fileReader.result); + } + return; + } + return _this.createThumbnailFromUrl(file, width, height, resizeMethod, fixOrientation, callback); + }; + })(this); + return fileReader.readAsDataURL(file); + }; + + Dropzone.prototype.createThumbnailFromUrl = function(file, width, height, resizeMethod, fixOrientation, callback, crossOrigin) { + var img; + img = document.createElement("img"); + if (crossOrigin) { + img.crossOrigin = crossOrigin; + } + img.onload = (function(_this) { + return function() { + var loadExif; + loadExif = function(callback) { + return callback(1); + }; + if ((typeof EXIF !== "undefined" && EXIF !== null) && fixOrientation) { + loadExif = function(callback) { + return EXIF.getData(img, function() { + return callback(EXIF.getTag(this, 'Orientation')); + }); + }; + } + return loadExif(function(orientation) { + var canvas, ctx, ref, ref1, ref2, ref3, resizeInfo, thumbnail; + file.width = img.width; + file.height = img.height; + resizeInfo = _this.options.resize.call(_this, file, width, height, resizeMethod); + canvas = document.createElement("canvas"); + ctx = canvas.getContext("2d"); + canvas.width = resizeInfo.trgWidth; + canvas.height = resizeInfo.trgHeight; + if (orientation > 4) { + canvas.width = resizeInfo.trgHeight; + canvas.height = resizeInfo.trgWidth; + } + switch (orientation) { + case 2: + ctx.translate(canvas.width, 0); + ctx.scale(-1, 1); + break; + case 3: + ctx.translate(canvas.width, canvas.height); + ctx.rotate(Math.PI); + break; + case 4: + ctx.translate(0, canvas.height); + ctx.scale(1, -1); + break; + case 5: + ctx.rotate(0.5 * Math.PI); + ctx.scale(1, -1); + break; + case 6: + ctx.rotate(0.5 * Math.PI); + ctx.translate(0, -canvas.height); + break; + case 7: + ctx.rotate(0.5 * Math.PI); + ctx.translate(canvas.width, -canvas.height); + ctx.scale(-1, 1); + break; + case 8: + ctx.rotate(-0.5 * Math.PI); + ctx.translate(-canvas.width, 0); + } + drawImageIOSFix(ctx, img, (ref = resizeInfo.srcX) != null ? ref : 0, (ref1 = resizeInfo.srcY) != null ? ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (ref2 = resizeInfo.trgX) != null ? ref2 : 0, (ref3 = resizeInfo.trgY) != null ? ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight); + thumbnail = canvas.toDataURL("image/png"); + if (callback != null) { + return callback(thumbnail, canvas); + } + }); + }; + })(this); + if (callback != null) { + img.onerror = callback; + } + return img.src = file.dataURL; + }; + + Dropzone.prototype.processQueue = function() { + var i, parallelUploads, processingLength, queuedFiles; + parallelUploads = this.options.parallelUploads; + processingLength = this.getUploadingFiles().length; + i = processingLength; + if (processingLength >= parallelUploads) { + return; + } + queuedFiles = this.getQueuedFiles(); + if (!(queuedFiles.length > 0)) { + return; + } + if (this.options.uploadMultiple) { + return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength)); + } else { + while (i < parallelUploads) { + if (!queuedFiles.length) { + return; + } + this.processFile(queuedFiles.shift()); + i++; + } + } + }; + + Dropzone.prototype.processFile = function(file) { + return this.processFiles([file]); + }; + + Dropzone.prototype.processFiles = function(files) { + var file, j, len; + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + file.processing = true; + file.status = Dropzone.UPLOADING; + this.emit("processing", file); + } + if (this.options.uploadMultiple) { + this.emit("processingmultiple", files); + } + return this.uploadFiles(files); + }; + + Dropzone.prototype._getFilesWithXhr = function(xhr) { + var file, files; + return files = (function() { + var j, len, ref, results; + ref = this.files; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + file = ref[j]; + if (file.xhr === xhr) { + results.push(file); + } + } + return results; + }).call(this); + }; + + Dropzone.prototype.cancelUpload = function(file) { + var groupedFile, groupedFiles, j, k, len, len1, ref; + if (file.status === Dropzone.UPLOADING) { + groupedFiles = this._getFilesWithXhr(file.xhr); + for (j = 0, len = groupedFiles.length; j < len; j++) { + groupedFile = groupedFiles[j]; + groupedFile.status = Dropzone.CANCELED; + } + file.xhr.abort(); + for (k = 0, len1 = groupedFiles.length; k < len1; k++) { + groupedFile = groupedFiles[k]; + this.emit("canceled", groupedFile); + } + if (this.options.uploadMultiple) { + this.emit("canceledmultiple", groupedFiles); + } + } else if ((ref = file.status) === Dropzone.ADDED || ref === Dropzone.QUEUED) { + file.status = Dropzone.CANCELED; + this.emit("canceled", file); + if (this.options.uploadMultiple) { + this.emit("canceledmultiple", [file]); + } + } + if (this.options.autoProcessQueue) { + return this.processQueue(); + } + }; + + resolveOption = function() { + var args, option; + option = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : []; + if (typeof option === 'function') { + return option.apply(this, args); + } + return option; + }; + + Dropzone.prototype.uploadFile = function(file) { + return this.uploadFiles([file]); + }; + + Dropzone.prototype.uploadFiles = function(files) { + var doneCounter, doneFunction, file, formData, handleError, headerName, headerValue, headers, i, input, inputName, inputType, j, k, key, l, len, len1, len2, len3, m, method, o, option, progressObj, ref, ref1, ref2, ref3, ref4, ref5, response, results, updateProgress, url, value, xhr; + xhr = new XMLHttpRequest(); + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + file.xhr = xhr; + } + method = resolveOption(this.options.method, files); + url = resolveOption(this.options.url, files); + xhr.open(method, url, true); + xhr.timeout = resolveOption(this.options.timeout, files); + xhr.withCredentials = !!this.options.withCredentials; + response = null; + handleError = (function(_this) { + return function() { + var k, len1, results; + results = []; + for (k = 0, len1 = files.length; k < len1; k++) { + file = files[k]; + results.push(_this._errorProcessing(files, response || _this.options.dictResponseError.replace("{{statusCode}}", xhr.status), xhr)); + } + return results; + }; + })(this); + updateProgress = (function(_this) { + return function(e) { + var allFilesFinished, k, l, len1, len2, len3, m, progress, results; + if (e != null) { + progress = 100 * e.loaded / e.total; + for (k = 0, len1 = files.length; k < len1; k++) { + file = files[k]; + file.upload.progress = progress; + file.upload.total = e.total; + file.upload.bytesSent = e.loaded; + } + } else { + allFilesFinished = true; + progress = 100; + for (l = 0, len2 = files.length; l < len2; l++) { + file = files[l]; + if (!(file.upload.progress === 100 && file.upload.bytesSent === file.upload.total)) { + allFilesFinished = false; + } + file.upload.progress = progress; + file.upload.bytesSent = file.upload.total; + } + if (allFilesFinished) { + return; + } + } + results = []; + for (m = 0, len3 = files.length; m < len3; m++) { + file = files[m]; + results.push(_this.emit("uploadprogress", file, progress, file.upload.bytesSent)); + } + return results; + }; + })(this); + xhr.onload = (function(_this) { + return function(e) { + var error1, ref; + if (files[0].status === Dropzone.CANCELED) { + return; + } + if (xhr.readyState !== 4) { + return; + } + if (xhr.responseType !== 'arraybuffer' && xhr.responseType !== 'blob') { + response = xhr.responseText; + if (xhr.getResponseHeader("content-type") && ~xhr.getResponseHeader("content-type").indexOf("application/json")) { + try { + response = JSON.parse(response); + } catch (error1) { + e = error1; + response = "Invalid JSON response from server."; + } + } + } + updateProgress(); + if (!((200 <= (ref = xhr.status) && ref < 300))) { + return handleError(); + } else { + return _this._finished(files, response, e); + } + }; + })(this); + xhr.onerror = (function(_this) { + return function() { + if (files[0].status === Dropzone.CANCELED) { + return; + } + return handleError(); + }; + })(this); + progressObj = (ref = xhr.upload) != null ? ref : xhr; + progressObj.onprogress = updateProgress; + headers = { + "Accept": "application/json", + "Cache-Control": "no-cache", + "X-Requested-With": "XMLHttpRequest" + }; + if (this.options.headers) { + extend(headers, this.options.headers); + } + for (headerName in headers) { + headerValue = headers[headerName]; + if (headerValue) { + xhr.setRequestHeader(headerName, headerValue); + } + } + formData = new FormData(); + if (this.options.params) { + ref1 = this.options.params; + for (key in ref1) { + value = ref1[key]; + formData.append(key, value); + } + } + for (k = 0, len1 = files.length; k < len1; k++) { + file = files[k]; + this.emit("sending", file, xhr, formData); + } + if (this.options.uploadMultiple) { + this.emit("sendingmultiple", files, xhr, formData); + } + if (this.element.tagName === "FORM") { + ref2 = this.element.querySelectorAll("input, textarea, select, button"); + for (l = 0, len2 = ref2.length; l < len2; l++) { + input = ref2[l]; + inputName = input.getAttribute("name"); + inputType = input.getAttribute("type"); + if (input.tagName === "SELECT" && input.hasAttribute("multiple")) { + ref3 = input.options; + for (m = 0, len3 = ref3.length; m < len3; m++) { + option = ref3[m]; + if (option.selected) { + formData.append(inputName, option.value); + } + } + } else if (!inputType || ((ref4 = inputType.toLowerCase()) !== "checkbox" && ref4 !== "radio") || input.checked) { + formData.append(inputName, input.value); + } + } + } + doneCounter = 0; + results = []; + for (i = o = 0, ref5 = files.length - 1; 0 <= ref5 ? o <= ref5 : o >= ref5; i = 0 <= ref5 ? ++o : --o) { + doneFunction = (function(_this) { + return function(file, paramName, fileName) { + return function(transformedFile) { + formData.append(paramName, transformedFile, fileName); + if (++doneCounter === files.length) { + return _this.submitRequest(xhr, formData, files); + } + }; + }; + })(this); + results.push(this.options.transformFile.call(this, files[i], doneFunction(files[i], this._getParamName(i), files[i].upload.filename))); + } + return results; + }; + + Dropzone.prototype.submitRequest = function(xhr, formData, files) { + return xhr.send(formData); + }; + + Dropzone.prototype._finished = function(files, responseText, e) { + var file, j, len; + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + file.status = Dropzone.SUCCESS; + this.emit("success", file, responseText, e); + this.emit("complete", file); + } + if (this.options.uploadMultiple) { + this.emit("successmultiple", files, responseText, e); + this.emit("completemultiple", files); + } + if (this.options.autoProcessQueue) { + return this.processQueue(); + } + }; + + Dropzone.prototype._errorProcessing = function(files, message, xhr) { + var file, j, len; + for (j = 0, len = files.length; j < len; j++) { + file = files[j]; + file.status = Dropzone.ERROR; + this.emit("error", file, message, xhr); + this.emit("complete", file); + } + if (this.options.uploadMultiple) { + this.emit("errormultiple", files, message, xhr); + this.emit("completemultiple", files); + } + if (this.options.autoProcessQueue) { + return this.processQueue(); + } + }; + + return Dropzone; + + })(Emitter); + + Dropzone.version = "5.1.1"; + + Dropzone.options = {}; + + Dropzone.optionsForElement = function(element) { + if (element.getAttribute("id")) { + return Dropzone.options[camelize(element.getAttribute("id"))]; + } else { + return void 0; + } + }; + + Dropzone.instances = []; + + Dropzone.forElement = function(element) { + if (typeof element === "string") { + element = document.querySelector(element); + } + if ((element != null ? element.dropzone : void 0) == null) { + throw new Error("No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone."); + } + return element.dropzone; + }; + + Dropzone.autoDiscover = true; + + Dropzone.discover = function() { + var checkElements, dropzone, dropzones, j, len, results; + if (document.querySelectorAll) { + dropzones = document.querySelectorAll(".dropzone"); + } else { + dropzones = []; + checkElements = function(elements) { + var el, j, len, results; + results = []; + for (j = 0, len = elements.length; j < len; j++) { + el = elements[j]; + if (/(^| )dropzone($| )/.test(el.className)) { + results.push(dropzones.push(el)); + } else { + results.push(void 0); + } + } + return results; + }; + checkElements(document.getElementsByTagName("div")); + checkElements(document.getElementsByTagName("form")); + } + results = []; + for (j = 0, len = dropzones.length; j < len; j++) { + dropzone = dropzones[j]; + if (Dropzone.optionsForElement(dropzone) !== false) { + results.push(new Dropzone(dropzone)); + } else { + results.push(void 0); + } + } + return results; + }; + + Dropzone.blacklistedBrowsers = [/opera.*Macintosh.*version\/12/i]; + + Dropzone.isBrowserSupported = function() { + var capableBrowser, j, len, ref, regex; + capableBrowser = true; + if (window.File && window.FileReader && window.FileList && window.Blob && window.FormData && document.querySelector) { + if (!("classList" in document.createElement("a"))) { + capableBrowser = false; + } else { + ref = Dropzone.blacklistedBrowsers; + for (j = 0, len = ref.length; j < len; j++) { + regex = ref[j]; + if (regex.test(navigator.userAgent)) { + capableBrowser = false; + continue; + } + } + } + } else { + capableBrowser = false; + } + return capableBrowser; + }; + + Dropzone.dataURItoBlob = function(dataURI) { + var ab, byteString, i, ia, j, mimeString, ref; + byteString = atob(dataURI.split(',')[1]); + mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; + ab = new ArrayBuffer(byteString.length); + ia = new Uint8Array(ab); + for (i = j = 0, ref = byteString.length; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) { + ia[i] = byteString.charCodeAt(i); + } + return new Blob([ab], { + type: mimeString + }); + }; + + without = function(list, rejectedItem) { + var item, j, len, results; + results = []; + for (j = 0, len = list.length; j < len; j++) { + item = list[j]; + if (item !== rejectedItem) { + results.push(item); + } + } + return results; + }; + + camelize = function(str) { + return str.replace(/[\-_](\w)/g, function(match) { + return match.charAt(1).toUpperCase(); + }); + }; + + Dropzone.createElement = function(string) { + var div; + div = document.createElement("div"); + div.innerHTML = string; + return div.childNodes[0]; + }; + + Dropzone.elementInside = function(element, container) { + if (element === container) { + return true; + } + while (element = element.parentNode) { + if (element === container) { + return true; + } + } + return false; + }; + + Dropzone.getElement = function(el, name) { + var element; + if (typeof el === "string") { + element = document.querySelector(el); + } else if (el.nodeType != null) { + element = el; + } + if (element == null) { + throw new Error("Invalid `" + name + "` option provided. Please provide a CSS selector or a plain HTML element."); + } + return element; + }; + + Dropzone.getElements = function(els, name) { + var e, el, elements, error1, j, k, len, len1, ref; + if (els instanceof Array) { + elements = []; + try { + for (j = 0, len = els.length; j < len; j++) { + el = els[j]; + elements.push(this.getElement(el, name)); + } + } catch (error1) { + e = error1; + elements = null; + } + } else if (typeof els === "string") { + elements = []; + ref = document.querySelectorAll(els); + for (k = 0, len1 = ref.length; k < len1; k++) { + el = ref[k]; + elements.push(el); + } + } else if (els.nodeType != null) { + elements = [els]; + } + if (!((elements != null) && elements.length)) { + throw new Error("Invalid `" + name + "` option provided. Please provide a CSS selector, a plain HTML element or a list of those."); + } + return elements; + }; + + Dropzone.confirm = function(question, accepted, rejected) { + if (window.confirm(question)) { + return accepted(); + } else if (rejected != null) { + return rejected(); + } + }; + + Dropzone.isValidFile = function(file, acceptedFiles) { + var baseMimeType, j, len, mimeType, validType; + if (!acceptedFiles) { + return true; + } + acceptedFiles = acceptedFiles.split(","); + mimeType = file.type; + baseMimeType = mimeType.replace(/\/.*$/, ""); + for (j = 0, len = acceptedFiles.length; j < len; j++) { + validType = acceptedFiles[j]; + validType = validType.trim(); + if (validType.charAt(0) === ".") { + if (file.name.toLowerCase().indexOf(validType.toLowerCase(), file.name.length - validType.length) !== -1) { + return true; + } + } else if (/\/\*$/.test(validType)) { + if (baseMimeType === validType.replace(/\/.*$/, "")) { + return true; + } + } else { + if (mimeType === validType) { + return true; + } + } + } + return false; + }; + + if (typeof jQuery !== "undefined" && jQuery !== null) { + jQuery.fn.dropzone = function(options) { + return this.each(function() { + return new Dropzone(this, options); + }); + }; + } + + if (typeof module !== "undefined" && module !== null) { + module.exports = Dropzone; + } else { + window.Dropzone = Dropzone; + } + + Dropzone.ADDED = "added"; + + Dropzone.QUEUED = "queued"; + + Dropzone.ACCEPTED = Dropzone.QUEUED; + + Dropzone.UPLOADING = "uploading"; + + Dropzone.PROCESSING = Dropzone.UPLOADING; + + Dropzone.CANCELED = "canceled"; + + Dropzone.ERROR = "error"; + + Dropzone.SUCCESS = "success"; + + + /* + + Bugfix for iOS 6 and 7 + Source: http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios + based on the work of https://github.com/stomita/ios-imagefile-megapixel + */ + + detectVerticalSquash = function(img) { + var alpha, canvas, ctx, data, ey, ih, iw, py, ratio, sy; + iw = img.naturalWidth; + ih = img.naturalHeight; + canvas = document.createElement("canvas"); + canvas.width = 1; + canvas.height = ih; + ctx = canvas.getContext("2d"); + ctx.drawImage(img, 0, 0); + data = ctx.getImageData(1, 0, 1, ih).data; + sy = 0; + ey = ih; + py = ih; + while (py > sy) { + alpha = data[(py - 1) * 4 + 3]; + if (alpha === 0) { + ey = py; + } else { + sy = py; + } + py = (ey + sy) >> 1; + } + ratio = py / ih; + if (ratio === 0) { + return 1; + } else { + return ratio; + } + }; + + drawImageIOSFix = function(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) { + var vertSquashRatio; + vertSquashRatio = detectVerticalSquash(img); + return ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio); + }; + + ExifRestore = (function() { + function ExifRestore() {} + + ExifRestore.KEY_STR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; + + ExifRestore.encode64 = function(input) { + var chr1, chr2, chr3, enc1, enc2, enc3, enc4, i, output; + output = ''; + chr1 = void 0; + chr2 = void 0; + chr3 = ''; + enc1 = void 0; + enc2 = void 0; + enc3 = void 0; + enc4 = ''; + i = 0; + while (true) { + chr1 = input[i++]; + chr2 = input[i++]; + chr3 = input[i++]; + enc1 = chr1 >> 2; + enc2 = (chr1 & 3) << 4 | chr2 >> 4; + enc3 = (chr2 & 15) << 2 | chr3 >> 6; + enc4 = chr3 & 63; + if (isNaN(chr2)) { + enc3 = enc4 = 64; + } else if (isNaN(chr3)) { + enc4 = 64; + } + output = output + this.KEY_STR.charAt(enc1) + this.KEY_STR.charAt(enc2) + this.KEY_STR.charAt(enc3) + this.KEY_STR.charAt(enc4); + chr1 = chr2 = chr3 = ''; + enc1 = enc2 = enc3 = enc4 = ''; + if (!(i < input.length)) { + break; + } + } + return output; + }; + + ExifRestore.restore = function(origFileBase64, resizedFileBase64) { + var image, rawImage, segments; + if (!origFileBase64.match('data:image/jpeg;base64,')) { + return resizedFileBase64; + } + rawImage = this.decode64(origFileBase64.replace('data:image/jpeg;base64,', '')); + segments = this.slice2Segments(rawImage); + image = this.exifManipulation(resizedFileBase64, segments); + return 'data:image/jpeg;base64,' + this.encode64(image); + }; + + ExifRestore.exifManipulation = function(resizedFileBase64, segments) { + var aBuffer, exifArray, newImageArray; + exifArray = this.getExifArray(segments); + newImageArray = this.insertExif(resizedFileBase64, exifArray); + aBuffer = new Uint8Array(newImageArray); + return aBuffer; + }; + + ExifRestore.getExifArray = function(segments) { + var seg, x; + seg = void 0; + x = 0; + while (x < segments.length) { + seg = segments[x]; + if (seg[0] === 255 & seg[1] === 225) { + return seg; + } + x++; + } + return []; + }; + + ExifRestore.insertExif = function(resizedFileBase64, exifArray) { + var array, ato, buf, imageData, mae, separatePoint; + imageData = resizedFileBase64.replace('data:image/jpeg;base64,', ''); + buf = this.decode64(imageData); + separatePoint = buf.indexOf(255, 3); + mae = buf.slice(0, separatePoint); + ato = buf.slice(separatePoint); + array = mae; + array = array.concat(exifArray); + array = array.concat(ato); + return array; + }; + + ExifRestore.slice2Segments = function(rawImageArray) { + var endPoint, head, length, seg, segments; + head = 0; + segments = []; + while (true) { + if (rawImageArray[head] === 255 & rawImageArray[head + 1] === 218) { + break; + } + if (rawImageArray[head] === 255 & rawImageArray[head + 1] === 216) { + head += 2; + } else { + length = rawImageArray[head + 2] * 256 + rawImageArray[head + 3]; + endPoint = head + length + 2; + seg = rawImageArray.slice(head, endPoint); + segments.push(seg); + head = endPoint; + } + if (head > rawImageArray.length) { + break; + } + } + return segments; + }; + + ExifRestore.decode64 = function(input) { + var base64test, buf, chr1, chr2, chr3, enc1, enc2, enc3, enc4, i, output; + output = ''; + chr1 = void 0; + chr2 = void 0; + chr3 = ''; + enc1 = void 0; + enc2 = void 0; + enc3 = void 0; + enc4 = ''; + i = 0; + buf = []; + base64test = /[^A-Za-z0-9\+\/\=]/g; + if (base64test.exec(input)) { + console.warning('There were invalid base64 characters in the input text.\n' + 'Valid base64 characters are A-Z, a-z, 0-9, \'+\', \'/\',and \'=\'\n' + 'Expect errors in decoding.'); + } + input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ''); + while (true) { + enc1 = this.KEY_STR.indexOf(input.charAt(i++)); + enc2 = this.KEY_STR.indexOf(input.charAt(i++)); + enc3 = this.KEY_STR.indexOf(input.charAt(i++)); + enc4 = this.KEY_STR.indexOf(input.charAt(i++)); + chr1 = enc1 << 2 | enc2 >> 4; + chr2 = (enc2 & 15) << 4 | enc3 >> 2; + chr3 = (enc3 & 3) << 6 | enc4; + buf.push(chr1); + if (enc3 !== 64) { + buf.push(chr2); + } + if (enc4 !== 64) { + buf.push(chr3); + } + chr1 = chr2 = chr3 = ''; + enc1 = enc2 = enc3 = enc4 = ''; + if (!(i < input.length)) { + break; + } + } + return buf; + }; + + return ExifRestore; + + })(); + + + /* + * contentloaded.js + * + * Author: Diego Perini (diego.perini at gmail.com) + * Summary: cross-browser wrapper for DOMContentLoaded + * Updated: 20101020 + * License: MIT + * Version: 1.2 + * + * URL: + * http://javascript.nwbox.com/ContentLoaded/ + * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE + */ + + contentLoaded = function(win, fn) { + var add, doc, done, init, poll, pre, rem, root, top; + done = false; + top = true; + doc = win.document; + root = doc.documentElement; + add = (doc.addEventListener ? "addEventListener" : "attachEvent"); + rem = (doc.addEventListener ? "removeEventListener" : "detachEvent"); + pre = (doc.addEventListener ? "" : "on"); + init = function(e) { + if (e.type === "readystatechange" && doc.readyState !== "complete") { + return; + } + (e.type === "load" ? win : doc)[rem](pre + e.type, init, false); + if (!done && (done = true)) { + return fn.call(win, e.type || e); + } + }; + poll = function() { + var e, error1; + try { + root.doScroll("left"); + } catch (error1) { + e = error1; + setTimeout(poll, 50); + return; + } + return init("poll"); + }; + if (doc.readyState !== "complete") { + if (doc.createEventObject && root.doScroll) { + try { + top = !win.frameElement; + } catch (undefined) {} + if (top) { + poll(); + } + } + doc[add](pre + "DOMContentLoaded", init, false); + doc[add](pre + "readystatechange", init, false); + return win[add](pre + "load", init, false); + } + }; + + Dropzone._autoDiscoverFunction = function() { + if (Dropzone.autoDiscover) { + return Dropzone.discover(); + } + }; + + contentLoaded(window, Dropzone._autoDiscoverFunction); + +}).call(this); diff --git a/_examples/tutorial/dropzonejs/src/views/upload.html b/_examples/tutorial/dropzonejs/src/views/upload.html new file mode 100644 index 00000000..d7f00987 --- /dev/null +++ b/_examples/tutorial/dropzonejs/src/views/upload.html @@ -0,0 +1,53 @@ + + + + DropzoneJS Uploader + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/_examples/tutorial/dropzonejs/with_files.png b/_examples/tutorial/dropzonejs/with_files.png new file mode 100644 index 00000000..2b6f3cdc Binary files /dev/null and b/_examples/tutorial/dropzonejs/with_files.png differ