This is the part 1 of 2 in DropzoneJS + Go series. Part 1: How to build a file upload form Part 2: How to display existing files on server DropzoneJS + Go: How to build a file upload form 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 . DropzoneJS Iris Table Of Content Preparation Work with DropzoneJS Work with Go Preparation Download , setup your computer as shown there and continue to 2. Go(Golang) Install ; open a terminal and execute Iris go get -u github.com/kataras/iris Download DropzoneJS from . DropzoneJS does not rely on JQuery, you will not have to worry that, upgrading JQuery version breaks your application. this URL Download dropzone.css from , if you want some already made css. this URL Create a folder “./public/uploads”, this is for storing uploaded files. Create a file “./views/upload.html”, this is for the front form page. Create a file “./main.go”, this is for handling backend file upload process. Your folder&file structure should look like this after the preparation: 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. Include the CSS Stylesheet. Include DropzoneJS JavaScript library. 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: Create a new Iris app. Register and load templates from the “views” folder. Make the “/public” route path to statically serve the ./public/… folder’s contents Create a route to serve the upload form. Create a route to handle the POST form data from the DropzoneJS’ form Declare a variable for destination folder. If file is sent to the page, store the file object to a temporary “file” variable. Move uploaded file to destination based on the uploadsDir+uploaded file’s name. Running the server Open the terminal at the current project’s directory and execute: $ go run main.goNow listening on: http://localhost:8080Application started. Press CTRL+C to shut down. Now go to browser, and navigate to , you should be able to see a page as below: http://localhost:8080 Move forward to the Part 2 by . clicking here I want to personally thanks the team for sharing my new article at their twitter account! dev.to I like the visual effects when , do you? It’s simple: just click the clap button. If you feel strongly, click it more I click the clap button more than once (or just hold it down).

How to build a file upload form using DropzoneJS and Go

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Todo MVC Application using Iris and Vue.js

104 Stories To Learn About Go

The Noonification: How to Use React to Replace useEffect (12/31/2022)

3 Golang Pitfalls Every Developer Needs to Know

207 Stories To Learn About Golang

2 Error-Free Options for Decimal handling in Golang

A Todo MVC Application using Iris and Vue.js

104 Stories To Learn About Go

The Noonification: How to Use React to Replace useEffect (12/31/2022)

3 Golang Pitfalls Every Developer Needs to Know

207 Stories To Learn About Golang

2 Error-Free Options for Decimal handling in Golang

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps